Data interpolation binding behavior with and without the this keyword in angular?

Question

Below code is my component

@Component({
    selector: 'my-app',
    template: '<div>{{name}}</div>'
})

export class MyApp {
    name: String = '';
    constructor(){
        this.name = 'Mr_Perfect';
    }

}

In the template, I know that the data will contact when I mention {{name}}. But it also works if I change it to {{this.name}}.

Is there any difference? Which one is better to use?

Answer 1

It looks like they have activated usage thisin the template with Angular 2 RC5. I tried this with help Angular 2 Beta, Angular 2 Finaland Angular 4, and it works in the last two.

Here are some live examples ( thisnot added by default, do it like this in the template)

Plunker Angular 2 Beta < - Angular 2 Final < - Angular 4 < -

Angular , Component Class. , , this , , 2.x 4.x , .

@Component({
    selector: 'my-app',
    template: `<div>{{name}}</div>       <!-- Angular 2 & Angular 4 -->
               <div>{{this.name}}</div>  <!-- Angular 4 Only -->`
})

export class MyApp {
    name: string = '';
    constructor(){
        this.name = 'Mr_Perfect';
      // ^ required
    }

    get(name: string)
    {
        return this.name;
             // ^ required
    }

}

Answer 2

- .. . , (`this).

, , , , Angular 4 ( , ), , , this..

, , this - , . this. , , .