What is the difference between [property]= and property in Angular 4 markup?

Question

So lets have following markup for PrimeNG table

<p-dataTable
    selectionMode="multiple"
    [(selection)]="selectedUsers"
    dataKey="id"
    [value]="users">

There obviously is a difference between selectionMode="multiple" and [selection]="multiple" as second variand does not make table selectable. What is the difference??

For a moment i thought that property= will set value once while [property]= would bind that property to input value so it would reflect its changes, but if that is the case, in both variants table should behave the same in my case.

I believe this was introduced in angular 2 as a binding value property — Sterling Archer, Dec 06 '17 at 16:37
https://stackoverflow.com/questions/35944749/what-is-the-difference-between-parentheses-brackets-and-asterisks-in-angular2 I think it's the same in angular 4 — Sterling Archer, Dec 06 '17 at 16:37
https://angular.io/guide/template-syntax#one-time-string-initialization — Kirk Larkin, Dec 06 '17 at 16:40

Alejandro Lora · Accepted Answer · 2017-12-06T16:46:05.607

The difference is the decorator used under the hood.

For cases like this [property]="" the component ts file implements that property with the @Input decorator.

For cases like this property="" the component ts file implements that property with the @Attribute decorator.

See this example:

export class MyComponent {

    @Input() public title1: string;
    public title2: string;

    constructor(@Attribute('title2') titleAttr) {
        this.title2 = titleAttr;
    }

}

So then, you can use it like:

<my-component [title1]="'testing'" title2="testing2"></my-component>

Another thing to have in mind and be able to decide when to use which one is the type of value you want to pass in. While the input accepts variables coming from your component context, the attribute only accepts values passed in line.

Notice in the example above that for the input I am using single quotes to pass a string in line, but it could be without the quotes and a name of a existing variable.

score 1 · Answer 2 · answered Dec 06 '17 at 16:38

1

selectionMode="multiple"

Is plain HTML attribute and not related to Angular in any way.

[selection]="multiple"

creates an Angular binding from the field (or expression) multiple to the property selection

answered Dec 06 '17 at 16:38

Günter Zöchbauer

623,577
216
2,003
1,567

Its not related to angular but it **can** be related to component like Alejandro explained. – Antoniossss Dec 06 '17 at 17:04
No, it can't. Angular reads attributes if the name matches an input, but you can read it using plain JS as well, so I don't see this related to Angular. The `@Attribute()` decorator is an instruction to Angular to read an attribute, but that is a different thing than `selectionMode="multiple"` which is just added to the DOM as-is (as if you wrote it yourself into `index.html`) – Günter Zöchbauer Dec 06 '17 at 17:10
I think that you focuset on right side of expresion while my doubds were regards left side. – Antoniossss Dec 06 '17 at 18:00
I don't think so. Your argument becomes only valid if you add ` `constructor(@Attribute('title2') titleAttr) {` which instructs angular to read an attribute from the host element. Without that Angular has nothing to do with the attribute. – Günter Zöchbauer Dec 06 '17 at 18:03
1

And that is my point - in some cases *my argument is valid* as you pointed out. This is what Alejandro showed me, and what I was referring to. Im new to angular and didnt know the existence of `@Atrribute`. Thanks for the effort! – Antoniossss Dec 06 '17 at 18:04
1

Glad to hear you learned something valueable. Lots of things to discover in Angular. – Günter Zöchbauer Dec 06 '17 at 18:26

What is the difference between [property]= and property in Angular 4 markup?

2 Answers2