Add html elements and json list inside angular typescript class

Question

I have this code.

  this._notificationService.showInfoMessage
        (
          'The list below cannot be reached'
            + `'<ul>
             <li> ${this.tagList
            .map(i => i.tag)
            .join(',')} </li>
            </ul>'`
        );

It does not work

I want add html list for this tag list and show list items one by one as a list with bullets. I have tried many ways.

I made it using browser inspect view I want to get as below one

please suggest best way for this

Answer 1

Why it doesn't work? Just check what says the official Angular documentation.

Angular recognizes the value as unsafe and automatically sanitizes it, which removes the script element but keeps safe content such as the element.

https://angular.io/guide/security#sanitization-example

That is how it's works!

But still, you have many options to achieve your goal.

Since you have a list/array of tags you could just iterate over them in the template and using string interpolation.

 <ul>
  <li *ngFor="let tag of tags">{{tag}}</li>
 </ul>

Text interpolation: https://angular.io/guide/interpolation

PS Please, share with us what your service/component looks like.