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.
If you just need to add an attribute in order to trigger CSS rules, you can use the below method: (this does not dynamically create/destroy a directive)
<button [attr.md-raised-button]="condition ? '' : null"></button>
Applied the same to your plunker: fork
Update:
How condition ? '' : null
works as the value:
When its the empty string (''
) it becomes attr.md-raised-button=""
, when its null
the attribute will not exist.
Update: plunker update: fork (version issues fixed, please note the question was originally based on angular 4)