Angular Dynamic Components and ExpressionChangedAfterItHasBeenCheckedError

Ok, there were two main problems with my code. The first one was pretty dumb. I didn't add the directive to the app module declarations, so it was just like any other html property; angular just didn't expect it, so it didn't look for it. However, after adding it to the app module, it threw ExpressionChangedAfterItHasBeenCheckedError. This error is caused because I'm changing variables after the view has load. For a more in depth explanation look this blog post.

In summary, what I did was extracting what I was doing inside the ngAfterViewInit into its own function and calling it from a promise. What this does, is creates a microtask queued after the syncronous code has fininshed executing. To learn more about micro and macro tasks in angular, look at this post: I reverse-engineered Zones (zone.js) and here is what I’ve found.

Here is how the code ended up:

@Directive({
  selector: '[dynamic-query]'
})
export class QueryDirective {
  constructor(public viewContainerRef: ViewContainerRef) {}
}

@Component({
  selector: 'app-dynamic-article',
  template: 
  `<ng-container *ngFor="let element of elements">
    <ng-template dynamic-query></ng-template>
  </ng-container>`,
  styleUrls: ['dynamic-article.component.css']
})
export class DynamicArticleComponent implements AfterViewInit {

    @Input() elements: Element[];
    @ViewChildren(QueryDirective) queryDirectives;

    constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

    ngAfterViewInit() {
        Promise.resolve(null).then(() => this.renderChildren());
    }

    private renderChildren() {
      this.queryDirectives.forEach((queryDirective: QueryDirective, index) => {
        const element = this.elements[index];
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(element.component);
        const containerRef = queryDirective.viewContainerRef;
        containerRef.clear();
        const newComponent = containerRef.createComponent(componentFactory);
        (<DynamicComponent>newComponent.instance).data = element.data; 
      });
    }
}

This code totally works. Hopefully I help someone.