No ng-init for Angular2

Question

As we all know, there is no ng-init or something for Angular2. Therefore, if we try to do something like:

<div #rr="2+2"> {{rr}} </div> 

We will get a runtime error:

Error: There is no directive with "exportAs" set to "2+2"

I watched one of the Angular2 dev videos on youtube and saw exactly the same design as for the job. Here is a screenshot:

How is this assignment of a user template variable possible?

Answer 1

#rr is not equivalent to ng-init. ng-init is gone and will not return - you need to explicitly initialize the fields in the component class (equivalent to initializing the scope).

You can use the exportAs property of exportAs annotations. It exports the directive that will be used in the parent view. From the parent view, you can bind it to a view variable and access it from the parent class using @ViewChild() .

You can learn more about exportAs here .

Please check the sample demo for exportAs implementation on here .

Answer 2

Local variables are intended to refer to the current DOM element:

 <div #elt></div> 

or a specific item applied to the item:

 <div #elt="someDirective" dir></div> 

someDirective matches the value of the exportAs directive:

 @Directive({ selector: '[dir]', exportAs: 'someDirective' }) 

You cannot use them to define something else. This is what the message actually reports ...

Answer 3

To be able to declare a variable inside a template, you can use a custom structure directive, for example:

 @Directive({ selector: '[ngInit]', }) export class NgInitDirective { @Input() set ngInit(context: any) { this.context.$implicit = this.context.ngInit = context; this.vcRef.clear(); this.vcRef.createEmbeddedView(this.templateRef, this.context); } context: { $implicit?: any, ngInit?: any } = {}; constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef<any>) {} } 

After that, your code can be written as follows:

 <div *ngInit="2+2 as rr"> {{rr}} </div> 

or

 <div *ngInit="2+2; let rr"> <span>{{rr}}</span> </div> 

Plunger example