delay before binding template angular

Question

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>

every answer on http://stackoverflow.com/questions/39787038/how-to-manage-angular2-expression-has-changed-after-it-was-checked-exception-w didn't help in my scenario :s — ssbb, Apr 27 '17 at 10:17

score 3 · Accepted Answer · edited May 23 '17 at 12:10

3

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

edited May 23 '17 at 12:10

Community

1
1

answered Apr 27 '17 at 10:43

SrAxi

19,787
11
46
65

1

never see this ngcomponentOutlet before, thanks for different link – ssbb Apr 27 '17 at 10:50
@ssbb No problem man. Is a very flexible solution, since I discovered it, it has saved my life! I am now rendering dynamic form inputs, dynamic menu options, etc... Is a very powerful tool in my opinion. Good luck in your project! ;) – SrAxi Apr 27 '17 at 10:52

delay before binding template angular

1 Answers1