0

I have codes like bellow

@Component({
  selector: 'app-name',
  template: `{{ name }}`
})
export class NameComponent {
  @Input() name: string;
}


@Component({
  selector: 'app-parent',
  template: `
    <!--Option 1-->
    <app-name name="{{ name }}"></app-name>
    
    <!--Option 2-->
    <app-name [name]="name"></app-name>
  `
})
export class ParentComponent {
  name = 'parent';
}

as you can see I have two different ways to bind the input name in app-name such name = {{ xxx }} and [name]=xxx as following

<app-name name="{{ name }}"></app-name>
<app-name [name]="name"></app-name>

My question is, which one would be preferred? Are there any pros and cons? Do I need to worry about this?

Thank you in advance

ttquang1063750
  • 803
  • 6
  • 15
  • Check https://stackoverflow.com/q/39112904/9471852 and see if it helps. – Siddhant Feb 17 '22 at 02:20
  • Thank @Siddhant for your link, but it doesn't match with my question here. In my question, the component totally is kind of `property binding` and my wonder is how different between using directly `name` with interpolating `{{ name }}` before binding – ttquang1063750 Feb 17 '22 at 02:50
  • Not sure why the answers from that post didn't help you answer your query. When the `name` input property is of `string` type, then you should be able to use both the syntaxes. If it would have been non-string type, then `{{}}` wouldn't work as expected. `{{}}` converts the expression to string. `[val]="true"` here `val` would result in boolean `true`, whereas `val={{true}}` here `val` will result in string `'true'`. – Siddhant Feb 17 '22 at 03:12
  • As you can see, I set `name = 'parent'` in `ParentComponent` and I don't know why some developers used this binding `(1): name="{{ name }}"` instead of `(2):[name]="name"` because both syntaxes are working and I don't know how to tell them which one would be preferred (sorry, that is my wonder) – ttquang1063750 Feb 17 '22 at 03:31

1 Answers1

0

[name]="name" is the syntax for an input variable. If you remove the input variable, or misspell the variable's name, this is the only one that will throw an error. This syntax will also take precedence if you include both. Other developers will also recognize this as an input variable immediately. Lastly, you can pass data other than strings this way.

name = {{name}} creates an html attribute, in other words it will appear in the DOM. I guess @Input() supports this syntax so you can easily get an html attribute in the component. This also only works for strings, it will perform a type conversion when used. If other developers are using this syntax for a variable, they either don't know any better or the html attribute has another purpose other than an input variable. For example, in a CSS selector.

Chris Hamilton
  • 9,252
  • 1
  • 9
  • 26
  • Thank @Chris Hamilton for your explanation. How about the performance impact, will they have any difference or they're the same? – ttquang1063750 Feb 17 '22 at 04:26
  • 1
    I would assume something like this is negligible. – Chris Hamilton Feb 17 '22 at 04:29
  • @ChrisHamilton You mean to say if variable name is misspelled in case of interpolation, an error won't be thrown? Also are you sure on ``, "`name = {{name}}` creates an html attribute, in other words it will appear in the DOM."? – Siddhant Feb 17 '22 at 05:28
  • @Siddhant Yes the attribute appears in the DOM, it's pretty easy to test yourself. Since you can create an html attribute of any name, the compiler will not check that there is a matching input variable. As a side note, both syntaxes will appear in the DOM, but `[name]="name"` will appear as `ng-reflect-name` – Chris Hamilton Feb 17 '22 at 05:33