Apply a directive conditionally

by

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)

More Related Contents:

  1. Angular 6 MatTable Performance in 1000 rows
  2. custom filter in mat-table
  3. SassError: Can’t find stylesheet to import. @use ‘~@angular/material’ as mat;
  4. Angular2 nested template driven form
  5. password and confirm password field validation angular2 reactive forms
  6. two way binding with safe navigation operator
  7. Angular Material: mat-select not selecting default
  8. When to use square brackets [ ] in directives @Inputs and when not?
  9. Set default option in mat-select
  10. Resetting a form in Angular 2 after submit
  11. Generic email validator
  12. formGroup expects a FormGroup instance
  13. Is it possible to get native element for formControl?
  14. ng-content select bound variable
  15. Angular Material 2 DataTable Sorting with nested objects
  16. Angular2: validation for won’t trigger when changing the file to upload
  17. How to import component into another root component in Angular 2
  18. How to detect scroll to bottom of html element
  19. Angular 4 Material table highlight a row
  20. Angular 2 Reactive Forms trigger validation on submit
  21. Angular Mat Select Multiple selectionchange finding which option was changed
  22. How to change angular material datepicker format
  23. How to manually set focus on mat-form-field in Angular 6
  24. How to dynamically add FormControl to FormArray on button click in Angular?
  25. Angular 9 Formarray search operation executing for only first dynamic control
  26. How can I catch the Material Datepicker month pagination event?
  27. Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)
  28. Angular2 Error: There is no directive with “exportAs” set to “ngForm”
  29. Get reference to a directive used in a component
  30. Angular Material2 theming – how to set app background?

Leave a Comment