title: How to remove a component dynamically in angular
body: <p>I went through angular dynamically loading components. But i could not find how to remove the component dynamically. </p>
  
  <p>My requirement is that the chat application loads dynamic component(image/graph/list/table) as per the conversation. But how can i destroy the component if the conversation moves forward.</p>
  
  <p>I am trying to destroy dynamic component with external event.</p>
  
  <p>Please help how to proceed.</p>
  
  <p>EDIT: <a href="https://stackblitz.com/angular/emjkxxxdxmk?file=src%2Fapp%2Fad-banner.component.ts" rel="nofollow noreferrer">https://stackblitz.com/angular/emjkxxxdxmk?file=src%2Fapp%2Fad-banner.component.ts</a></p>
  
  <p>I developed my code according to this example. Instead of time interval, I need to use a API call from a service that is subscribed another component(chat component).</p>
  
  <p>Below API response can load the component.I am looking for how to destroy the already loaded component i use the API call again.</p>
  
  <pre><code>public sendMessage(data): void {
      this.messages.push(this.message);
      this.API.getResponse(data).subscribe(res =&gt; {
        this.previousContext = res.context;
        console.log('res', res);
        if (res.result.type == 'table') {
          this.DataService.setTrigger(new AdItem(Table2Component, res));
        }
        this.messages.push(
          new Message(res.text, 'assets/images/bot.png', new Date(), 'chatbot')
        );
      });
      this.message = new Message('', 'assets/images/user.png', this.message.timestamp, 'user');
    }
  </code></pre>