Angular – How to re-render a component manually Angular 5

angular, typescript

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}

Best Solution

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