<ng-container [ngSwitch]="layout" *ngIf="errorList?.length > 0">
  <ng-container *ngSwitchCase="'inline'">
    <button type="button" class="btn btn-link" [popover]="popTemplate" *ngIf="expand && errorList.length > 1; else mainError">
      <small class="text-danger d-block">
        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
        {{message | translate}}
      </small>
    </button>
    <ng-template #mainError>
      <ng-template [ngTemplateOutlet]="mainBlock" [ngTemplateOutletContext]="{error: errorList[0]}"></ng-template>
    </ng-template>
    
    <ng-template #popTemplate>
      <ng-template [ngTemplateOutlet]="mainBlock" [ngTemplateOutletContext]="{error: error}" *ngFor="let error of errorList"></ng-template>
    </ng-template>

    <ng-template #mainBlock let-error="error">
      <small class="text-danger d-block">
        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
        {{error?.message | translate:error?.parameter}}
      </small>
    </ng-template>
  </ng-container>

  <ng-container *ngSwitchCase="'alert'">
    <ng-template [ngTemplateOutlet]="collapseError" [ngTemplateOutletContext]="{error: error, index: i}"
      *ngFor="let error of errorList; let i = index; trackBy: trackByFn"></ng-template>
    
  
    

    <ng-template #collapseError let-error="error" let-index="index">
      <ng-container *ngIf="error?.children?.length > 0; else singleError">
        <div class="alert alert-danger accordion" [id]="'alert' + index">
          <button class="btn btn-link text-dark" type="button" data-toggle="collapse" [attr.data-target]="'#collapse' + index" aria-expanded="false">
            <i class="fa fa-exclamation-triangle mr-3" aria-hidden="true"></i>
            {{message | translate}}
          </button>

          <div [id]="'collapse' + index" class="collapse" [attr.data-parent]="'#alert' + index">
            <div *ngFor="let childError of error.children" class="mb-0 pl-5">
              <i class="fa fa-exclamation-triangle pl-3 mr-3" aria-hidden="true"></i>
              {{childError?.message | translate:childError?.parameter}}
              <a *ngIf="childError?.reference" href="javascript:void(0)"
                [routerLink]="childError?.reference?.value">
                {{childError?.reference?.key}}
              </a>
            </div>
          </div>
        </div>
      </ng-container>
      

      <ng-template #singleError>
        <div [class]="'alert ' + alertColorMap[error?.type] + ' flex-grow-1'">
          <i class="fa fa-exclamation-triangle mr-3" aria-hidden="true"></i>
          {{error?.message | translate:error?.parameter}}
        </div>
      </ng-template>
    </ng-template>

  </ng-container>
</ng-container>

./alert.component.scss

button[aria-expanded]{
  &:before, &:after{
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    font-size: larger;
    margin-right: 1rem;
  }
  padding: 0;
}
button[aria-expanded="false"]:before{
      content: "\f0da";
  }

button[aria-expanded="true"]:before{
    content: "\f0d7";
}
.collapse, .collapsing{
    background-color: inherit;
}