How to add conditional attribute in Angular 2?

by

null removes it:

[attr.checked]="value ? '' : null"

or

[attr.checked]="value ? 'checked' : null"

Hint:

Attribute vs property

When the HTML element where you add this binding does not have a property with the name used in the binding (checked in this case) and also no Angular component or directive is applied to the same element that has an @Input() checked;, then [xxx]="..." can not be used.

See also What is the difference between properties and attributes in HTML?

What to bind to when there is no such property

Alternatives are [style.xxx]="...", [attr.xxx]="...", [class.xxx]="..." depending on what you try to accomplish.

Because <input> only has a checked attribute, but no checked property [attr.checked]="..." is the right way for this specific case.

Attributes can only handle string values

A common pitfall is also that for [attr.xxx]="..." bindings the value (...) is always stringified. Only properties and @Input()s can receive other value types like boolean, number, object, …

Most properties and attributes of elements are connected and have the same name.

Property-attribute connection

When bound to the attribute the property also only receives the stringified value from the attribute.
When bound to the property the property receives the value bound to it (boolean, number, object, …) and the attribute again the stringified value.

Two cases where attribute and property names do not match.

Angular was changed since then and knows about these special cases and handles them so that you can bind to <label [for]=" even though no such property exists (same for colspan)

More Related Contents:

  1. typescript anonymous object with variable based label value
  2. How to pass parameters rendered from backend to angular2 bootstrap method
  3. CORS Error: “requests are only supported for protocol schemes: http…” etc
  4. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  5. Hot and Cold observables: are there ‘hot’ and ‘cold’ operators?
  6. (change) vs (ngModelChange) in angular
  7. Angular window resize event
  8. Dynamic template URLs in Angular 2
  9. Angular 2 dependency injection in ES5 and ES6
  10. Angular Cli Webpack, How to add or bundle external js files?
  11. Typescript Type ‘string’ is not assignable to type
  12. Angular 2 Karma Test ‘component-name’ is not a known element
  13. What is ngDefaultControl in Angular?
  14. How do I call an Angular 2 pipe with multiple arguments?
  15. How to do the chain sequence in rxjs
  16. Angular 6: How to set response type as text while making http call
  17. using external JS libraries in my angular 2 project
  18. Huge number of files generated for every Angular project
  19. Is it a good practice using Observable with async/await?
  20. Angular 2 Material 2 datepicker date format
  21. Angular 2 – Chaining http requests
  22. Angular 2 Component @Input not working
  23. Highlight the search text – angular 2
  24. angular 4+ assign @Input for ngComponentOutlet dynamically created component
  25. Dynamic template in templatURL in angular2
  26. How to loop over object properties with ngFor in Angular
  27. Converting an image to base64 in angular 2
  28. Angular2 – catch/subscribe to (click) event in dynamically added HTML
  29. How to check empty object in angular 2 template using *ngIf
  30. How can I apply a quantity limit to *ngFor? [duplicate]

Leave a Comment