@for (alert of alerts; track alert) {
  <div
    class="alert m-8"
    role="alert"
    [ngClass]="{
      'alert-danger': alert.type === 'danger',
      'alert-warning': alert.type === 'warning',
      'alert-info': alert.type === 'info',
      'alert-success': alert.type === 'success'
    }"
  >
    <p><strong translate>There was an issue in the HTML widget:</strong></p>
    <pre>{{ alert.text }}</pre>
  </div>
}
<div
  class="fit-w fit-h"
  #hostElement
></div>