Property binding vs attribute interpolation

by

Property binding like

[trueValue]="..."

evaluates the expression "..." and assigns the value

"true" evaluates to the value true
"Y" is unknown. There is no internal Y value in TypeScript and no property in the component class instance, which is the scope of template binding.
In this case you would want

[trueValue]="'Y'"

Note the additional quotes to make Y a string.

Plain attributes are also assigned to inputs 

trueValue="Y"

is plain HTML without any Angular2 binding and attribute values are always strings. Therefore this would assign the string Y.

Another way is string interpolation

trueValue="{{true}}"

would assign the value "true" (as string) because the expression withing {{...}} would be evaluated and then converted to a string before passed to the input.
This can’t be used to bind other values than strings.

To explicitly bind to an attribute instead of a property you can use
(besides trueValue="Y" which creates an attribute but doesn’t do any evaluation)

[attr.trueValue]="'Y'"

or

attr.trueValue="{{'Y'}}"

Attribute binding is helpful if you want to use the trueValue attribute to address the element with CSS selectors.

More Related Contents:

  1. Property ‘value’ does not exist on type ‘EventTarget’
  2. *ngIf and local template variables
  3. How do I share data between components in Angular 2?
  4. Could not find module “@angular-devkit/build-angular”
  5. Angular how to get the multiple checkbox values?
  6. How to add font-awesome to Angular 2 + CLI project
  7. No ‘Access-Control-Allow-Origin’ header in Angular 2 app
  8. How to watch for form changes in Angular
  9. ng: command not found while creating new project using angular-cli
  10. What is the difference between production and development mode in Angular2?
  11. Angular Reactive Forms with nested Form Arrays
  12. Set default option in mat-select
  13. Queries scale with the size of your result set, not the size of your data set
  14. Resetting a form in Angular 2 after submit
  15. Angular 2 router resolve with Observable
  16. Angular 2 – Does ngOnDestroy get called on refresh or just when navigate away from component?
  17. Angularjs2 – preload server configuration before the application starts [duplicate]
  18. How to get param from url in angular 4?
  19. How to check if Angular application running in Production or Development mode
  20. No provider for Router?
  21. Angular 4+ using Google Analytics
  22. Merging http observables using forkjoin
  23. tap() isn’t triggered in RXJS Pipe
  24. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  25. Style html,body from web component (Angular 2)
  26. Angular Mat Select Multiple selectionchange finding which option was changed
  27. Call a function every 10 seconds Angular2
  28. Angular 4: “Cannot find name ‘require’
  29. `[(ngModel)]` vs `[(value)]`
  30. Angular Material2 theming – how to set app background?

Leave a Comment