Повторно создать компонент в angular 4

Это возможно, создав динамический компонент ...

Для этого вам необходимо выполнить следующие действия:

в родительском html:

<ng-template #dynamic></ng-template>

в вашем родительском файле component.ts:

@ViewChild("dynamic", {read: ViewContainerRef}) container;
componentRef: ComponentRef<any>;

constructor(...
              private resolver: ComponentFactoryResolver
...) 

    createComponent() {
      if (this.componentRef) this.componentRef.destroy();
      this.container.clear();
      const factoryGleam: ComponentFactory<YourComponent> = this.resolver.resolveComponentFactory(YourComponent);
      this.componentRef = this.container.createComponent(factoryGleam);
}

ngOnDestroy() {
if (this.componentRef) this.componentRef.destroy();
}

Используйте свой метод createComponent (), если вы хотите снова создать компонент ...

И в вашем родительском модуле:

  ...
  providers: ...,
  entryComponents: [YourComponent]

Или вы можете прочитать эту статью: https://medium.com/front-end-hacking/dynamically-add-components-to-the-dom-with-angular-71b0cb535286

Немного взломав шаблон *ngFor, вы можете создать новый экземпляр при изменении:

Шаблон :

<ng-template #MyTemplate let-name = "name">
  <hello name = "{{ name }}"></hello>
</ng-template>

<ng-container *ngFor = "let value of values">
  <ng-container *ngTemplateOutlet = "MyTemplate;context:{name: value}">
  </ng-container>
</ng-container>

<input type = "text" [(ngModel)] = "name" (ngModelChange) = "change($event)">

Составная часть :

  values = ['Template'];


  change(event) {
    this.values.pop();
    this.values.push(event);
  }

Здесь вы можете найти работающий пример. Счетчик отображает количество экземпляров.

So I want to ask is there any way I can destroy this instance of component so that when it is again rendered it re-initializes everything?

Пример кода

В шаблоне родительского компонента:

  <child-comp *ngIf = "isShown">
  </child-comp>
   <button (click) = "toggleChild()">Toggle</button>
   <button (click) = "reInit()">ReInitialize</button>

Родительский компонент класса:

class ParentComponent{

    isShown = false;

    toggleChild(){       
       this.isShown = !this.isShown;
    }


    reInit() {
       this.isShown = false;
        setTimeout(() =>{
           this.isShown = true;
        });
    }
}

setTimeout необходим, если мы хотим немедленно повторно инициализировать компонент. Без него компонент не будет повторно инициализирован за один цикл дайджеста. В первом цикле компонент уничтожается, setTimeout заставляет инициализировать компонент в следующем цикле.