Component Directive with Template and data bindings

Question

In Angular2 is it possible to source below out into a directive?

<button [attr.disabled]="!infoForm.valid"></button>

e.g. have later:

<button [isValid]="!infoForm.valid"></button>

Edit

Would it be possible to end up with a more complex directive like such:?

@Component({
    selector: 'isValid',
    template: `
    <div>
        <button primary class="primary" (click)="next($event)">{{title}}</button>
    </div>`
})

export class ContinuationCheckDirective {

    @Input() isValid:boolean = false;

    @HostBinding('attr.disabled')
    disabled: boolean;

    ngOnChanges() {
        this.disabled = !this.isValid;
    }

    next() { // dostuff }

And then in parent component:

 <continuationCheckDirective [isValid]="!addresForm.valid"></continuationCheckDirective>

Answer 1

@Directive({
  selector: '[isValid]'
})
class IsValidDirective {

  @Input() isValid:boolean = false;

  @HostBinding('attr.disabled')
  disabled: boolean;

  ngOnChanges() {
    this.disabled = !this.isValid;
  }
}

Plunker example