Empty Or Remove Element Using Angular2

Thursday, 4 February 2016 | Posted by Dasari Srinivas

Angular1 provides angular.element by to create JavaScript element. In Angular2, It is much easy, you can define element by using #<element name> as attribute

Markup to define element

<div #myElement>
  sample text in div
</div>

Emptying Element

You can empty element by using making whole inner HTML as null. Find below markup

<button (click)="myElement.innerHTML = ''">Empty div</button>

Remove Element

You can remove element by using .remove()

<button (click)="myElement.remove()">Empty div</button>

View DEMO

Labels:AngularJS

3 comments:

Jack Lyons12 December 2016 at 21:46
Simple but perfect for what I needed. Thanks!
ReplyDelete
elpana22 February 2018 at 04:49
Great for the template way, but how can i do that in the component ts?.

Thanks
ReplyDelete
Unknown6 September 2018 at 23:21
@elpana :

@ViewChild('myElement') private myElementContainer:ElementRef;

this.myElementContainer.nativeElement.innerHTML = '';

add this to your code.
ReplyDelete