how to display Angular innerHTML + content

Question

i need to display inner html plus content between div. i need one message in innerHTML i.e notification.message and content as button between tag.button should be same for all dynamic message.which is close button.instead of repeating close button i need to change message dynamically and keep close button as it is. please helpe me to do so...

i want to convert

<div [innterHTML]="message"><button></div> to

<div>message <button>X</button></div>

when i am trying to conver below code i am not getting button close only content is getting rendered.

<ng-container *ngFor="let notification of src.notifications">
    <div class="elementToFadeInAndOut">
      <div
      class="notification is-toast"
      style="margin-top: 10px; float:right;"
      data-e2e="notifier-toast"
      [innerHTML]="notification.message"
    >
    <button class="close" (click)="src.destroy(notification)" data-e2e="notifier-close">
        <span class="icon">
          <i class="fal fa-times fa-lg"></i>
        </span>
      </button>
    </div>
    </div>
   
  </ng-container>

Answer 1

I don't think this is possible, at least not that i am aware of. Why don't you just use a span?

<ng-container *ngFor="let notification of src.notifications">
    <div class="elementToFadeInAndOut">
      <div
      class="notification is-toast"
      style="margin-top: 10px; float:right;"
      data-e2e="notifier-toast"
    >
    <span [innerHTML]="notification.message"></span>
    <button class="close" (click)="src.destroy(notification)" data-e2e="notifier-close">
        <span class="icon">
          <i class="fal fa-times fa-lg"></i>
        </span>
      </button>
    </div>
    </div>
   
  </ng-container>

Answer 2

If i am correct you want to render/show both your messege and button inside div. then You can use interpolation here instead of innerHtml if you dont have any HTML code in notification.message. Please correct if i understand your query wrong.

<ng-container *ngFor="let notification of src.notifications">
    <div class="elementToFadeInAndOut">
      <div
      class="notification is-toast"
      style="margin-top: 10px; float:right;"
      data-e2e="notifier-toast"
    >
    {{notification.message}}
    <button class="close" (click)="src.destroy(notification)" data-e2e="notifier-close">
        <span class="icon">
          <i class="fal fa-times fa-lg"></i>
        </span>
      </button>
    </div>
    </div>
   
  </ng-container>