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

For example,

renderComponent() {    // force component re-render } 

Answer 1

If you meant to manipulate the view (add, remove or reattach) then here is an example:

import { Component, ViewContainerRef, AfterViewInit, ViewChild, ViewRef,TemplateRef} from '@angular/core';  import { ChildComponent } from './child.component';  @Component({   selector: 'host-comp',   template: `     <h1>I am a host component</h1>      <ng-container #vc><ng-container>      <br>      <button (click)="insertChildView()">Insert Child View</button>     <button (click)="removeChildView()">Remove Child View</button>     <button (click)="reloadChildView()">Reload Child View</button>      <ng-template #tpl>       <child-comp><child-comp>     <ng-template>    ` }) export class HostComponent implements AfterViewInit{    @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;    @ViewChild('tpl', {read: TemplateRef}) tpl: TemplateRef<any>;    childViewRef: ViewRef;    constructor(){}    ngAfterViewInit(){     this.childViewRef = this.tpl.createEmbeddedView(null);   }    insertChildView(){     this.vc.insert(this.childViewRef);   }    removeChildView(){     this.vc.detach();   }    reloadChildView(){     this.removeChildView();     setTimeout(() =>{       this.insertChildView();     }, 3000);   } } 

live example here