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.