How to append html content in angular 2 / typescript

Question

I want to append HTML content into a div('single-pane') using insertAdjacentHTML but nothing happens. Not sure what I am missing here.

Here is my HTML content which I am trying to append---> component.html

  <div #notification class="notification-top-bar" style="display: block;">
  </div>

Here is my typescript code where I am appending---> component.ts

export class SiteNotificationComponent implements OnInit {
  @ViewChildren('notification') private notificationsElements:  QueryList<ElementRef>;
  parentClass: any;

  constructor() {}
  ngOnInit() {} 
 
  ngAfterViewInit() {
    this.parentClass = document.getElementsByClassName('single-pane')[0];
    this.parentClass.insertAdjacentHTML('afterbegin', 'notificationsElements');
  }
}

Prachi · Accepted Answer · 2018-06-13 07:48:26Z

2

Use ViewChild instead of ViewChildren if you have only one element of notification type. And declare it of the type ElementRef.

export class SiteNotificationComponent implements OnInit {
  @ViewChild('notification') el:ElementRef;
  parentClass: any;

  constructor() {}
  ngOnInit() {} 

  ngAfterViewInit() {
    this.parentClass = document.getElementsByClassName('single-pane')[0];
    this.parentClass.insertAdjacentHTML('afterbegin', this.notificationsElements.nativeElement.innerHTML);
  }
}

edited Jun 13, 2018 at 7:48

answered Jun 13, 2018 at 6:41

Prachi

3,60421 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8053092 Over a year ago

I tried what you have suggested, it appends [object HTMLDivElement]

Prachi Over a year ago

Try this.notificationsElements.nativeElement.innerHTML. I have updated the answer.

Collectives™ on Stack Overflow

How to append html content in angular 2 / typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related