title: Can't display a component using ViewContainerRef
body: <p>I have to "generate" a new component on button click, by default I want to show the last added product on page after load and after navigate throught the other products. </p>
  
  <p>When I retrieved all the product, on the <code>complete</code> function I'll call the <code>createComponent()</code> method and provide the last id.  </p>
  
  <pre><code>// global variables
  @ViewChild('productDetails', {read: ViewContainerRef}) entry: ViewContainerRef;
  componentRef: any;
  
  // create child component method
  createComponent(id: number) {
    if (this.entry) {
      this.entry.clear();
      const factory = this.resolver.resolveComponentFactory(ProductDetailsComponent);
      this.componentRef = this.entry.createComponent(factory);
      this.componentRef.instance.id = this.id = id;
    }
  }
  
  // Get list and generate component
  ngOnInit() {
    this.list$ = this.listService.getList().subscribe(
      (response: IProducts[]) =&gt; {
        response.map((item, index) =&gt; {
          if (!this.id) {
            this.id = +item.Id;
          }
  
          if (!item.IsExpired) {
            item.style = 'card-disabled';
          } else {
            item.style = this.colors[index];
          }
  
          this.list.push(item);
        });
      },
      reason =&gt; console.error(reason),
      () =&gt; this.createComponent(this.id)
    );
  }
  </code></pre>
  
  <p>But at the first time the console tell me <code>TypeError: Cannot read property 'clear' of undefined</code>. But  after other clicks on the other product the component is showing correctly.</p>