this is kind of relate to ExpressionChangedAfterItHasBeenCheckedError again.
in my situation, I have a parameter 'data' which I recover from ajax call. this data is used to create child via @input directive. I wish the binding only occurs when data is defined. but I have no idea how to do that with angular
export class UserComponent{
data: any
constructor(
private userService: UserService){
this.userService.getUser()
.subscribe(result => {
this.data = result;
}
}
);
}
because the way it works, angular will display an ExpressionChangedAfterItHasBeenCheckedError, which I understand why, but how to ask angular to wait for the callback to be done and data to be != from undefined before start binding and stuff, the goal is to have some child initialized with the real value coming from the database.
If I should wait for the end of the cycle before binding "real" data, it's fine, but how to do it without having this error, (and please without using setTimeout as it looks a lot of rubbish !).
Thanks
<!--the template if it matter --><somechildtag [data]="data" ></somechildtag>
Load your component with ng-container.
For example:
<div *ngIf="data?.length > 0">
<ng-container *ngComponentOutlet="myChildComponent;
ngModuleFactory: childComponentsModule;"></ng-container>
</div>
So, you will render your child only if your data object is populated.
In your component:
private childComponentsModule: NgModuleFactory<any>;
constructor(private compiler: Compiler){
this.childComponentsModule = compiler.compileModuleSync(ChildComponentsModule);
}
You can see a more detailed example of how to load dynamically a component here:
Angular2: Use Pipe to render templates dynamically
Angular's documentation:
https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html