Angular 2: Do something with @Input inside Component

Question

How can I do something with the @Input value inside the component?

For instance:

<log-user [user]="user"></log-user> 

Suppose user is an object. Now I know how I can transfer this user data inside the log-user log template, but how can I do something with this user inside its component?

LogUserComponent :

 @Component({ selector: 'log-user', template: ` This works: {{user}} ` }) export class LogUserComponent { @Input() user:any; constructor() { // this get logged as undefined?? console.log(this.user); } } 

Any help would be great! Thanks in advance!

Answer 1

During construction, the @Input value is not yet set. How can Angular2 set the @Input value before the component was actually constructed?

You need to wait for the component to initialize; which means all @Input values @Input set. You can do this by implementing the OnInit interface.

So, to fix your example:

 <log-user [user]="user"></log-user> 

^{(Note: user must be a specific object, otherwise in this example, undefined will still be registered. You can add *ngIf="user" to the html log-user tag to ensure that the tag does not get rendered until user actually exists. )}

make:

 import {Component, Input, OnInit} from 'angular2/core'; @Component({ selector: 'log-user', template: `This works: {{user}}` }) export class LogUserComponent implements OnInit { @Input() user:any; ngOnInit() { // this now gets logged as 'user' console.log(this.user); } } 

You can also simply create the ngOnInit method on your component without implementing an interface, but by importing the OnInit interface that you provide with the Typescript compiler, avoid typographical errors.

Angular docs about OnInit :

Implement this interface to execute custom initialization logic after your data properties associated with the directive have been initialized.

ngOnInit is called immediately after the data properties associated with the directive were checked for the first time and before any of its children were checked. It is called only once when the directive is instantiated.

Answer 2

After some research, I found this post @Input undefined value in angular 2 onInit ".

So the answer is actually quite simple. Because in this example, user is an object coming from an API call, when initializing a component, it is undefined (I hope that I say that correctly). Using *ngIf , the fix:

<log-user *ngIf="user" [user]="user"></log-user>

Answer 3

Since our Angular components are ES6 classes using the @Component () decorator, they could use third-party TS providers to intercept the input value as follows:

The main difference is that instead of decorating the property, we decorate the setter.

Read more http://www.typescriptlang.org/docs/handbook/classes.html

 <log-user [user]="user"></log-user> 

Inside Component.ts

 export class LogUserComponent { private _user:any; get user() { return this._user; } @Input() set user( user:any) { // to catch undefined user if(!user) return; this._user = user; // modify the user here example below // this._user = 'X' + user; } constructor() { } }