Can a component remove its own template and put it back conditionally?

Here is what you are looking for:

@Component({
    selector: 'your-selector',
    template: '<template [ngIf]="showView"> Here is my component template </template> ',
})
class MyComponent{

    showView: boolean = true;

   onSomeButtonClick(condition){
       if (condition) {
          this.showView = false;
       } else {
          this.showView = true;
        }
   }
}

Now, just add some button with an onClick callback to call onSomeButtonClick with some param and you are done


There is no official way of removing a template from inside a component and for me it makes sense. If you remove your template, who is gonna take care of putting it back. This works in ngIf because ngIf first creates a template behind the scene and then embeds the element inside it, so it has a reference to the embedded element, therefore it can delete it or put it back.

Tags:

Angular