Home Angular4 + TemplateOutlet + using template variable in component

# Angular4 + TemplateOutlet + using template variable in component

Nicolas Pretot
1#
Nicolas Pretot Published in 2018-01-10 13:21:30Z
 In angular4, I'm trying to use ngTemplateOutlet directive to make my component more reusable. And I'm wondering if something it's possible. Lets take this exemple : UserComponent.ts @Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.css'] }) export class UserComponent implements OnInit { @ContentChild('userInfos', { read: TemplateRef }) userInfosTemplate; public ctx: any = { firstname: 'Jhon', lastname: 'Doe' }; constructor() { } ngOnInit() { } }  UserComponent.html 

UserPanel

 AppComponent.ts @Component({ selector: 'app-root', templateUrl: 'app.component.html' }) export class AppComponent { }  AppComponent.html 

Firstname : {{firstname}}

Lastname : {{lastname}}

 So for the demonstration purpose, I'm building an UserComponent that will display the firstname and the lastname of an user. To make my component more reusable I use the ngTemplateOutlet directive to allow the Upper component decide how he want to display theses two fields. Here, how can I use this username in the appComponent ? Let's say, I want to check if the firstname is "bob" and in that case I want to log the lastname, or I want to save this in the session, or watever that can't be accomplished in the html file ? Maybe is there a way to get this var from the TS file, or maybe I can in some way, call a function of my component when this ng-template is displayed ? If you have any hint, Thanks
 You need to login account before you can post.
Processed in 0.299598 second(s) , Gzip On .