How to re-render a component manually Angular 5

Question

Is there a way I can re render a component manually, say when a user clicks a button??

I\'ve seen similar posts but none of these worked for me for example here

Answer 1

I tried the answers in this thread but I had to do modifications to make it work. Let me share my working code.

.html-----------------

ADD
REMOVE



   


.ts---------------------
import { Component, ViewChild, ViewContainerRef, TemplateRef, ViewRef } from '@angular/core';

export class ParentComponent{

@ViewChild('vc', { read: ViewContainerRef }) vc: ViewContainerRef;
@ViewChild('tpl', { read: TemplateRef }) tpl: TemplateRef;

addChild(){
let view = this.tpl.createEmbeddedView(null);
this.vc.insert(view);
}

removeChild(){
 this.vc.clear();
}

This page was helpful. Make sure to add let view = this.tpl.createEmbeddedView(null); in addchild()