angularangular-materialangular2-formsangular2-directivesangular-material2

Apply a directive conditionally

I am using Material 2 to add md-raised-button. I want to apply this directive only if certain condition becomes true.

For example: 

<button md-raised-button="true"></button>

Another example: I created a basic dynamic reactive form in plunker. I am using formArrayName directive of reactive form for array of controls. I want to apply formArrayName directive only if specific condition becomes true, otherwise don't add formArrayName directive.

Here is a plunker link.

Solution

  • I don't know if you can apply directives based on a condition, but a workaround would be having 2 buttons and display them based on a condition.

    <button *ngIf="!condition"></button>
<button *ngIf="condition" md-raised-button></button>

    Edit: maybe this will be helpful.