@engie-group/fluid-design-system-angular/src/components/avatar/avatar.component.html

Fluid Design System Angular

<ng-container *ngTemplateOutlet="avatarTemplate"></ng-container>

<ng-template #tagContent>
  <ng-content></ng-content>
  <p class="nj-sr-only">{{label}}</p>
  <span aria-hidden="true">{{getFormattedInitials()}}</span>

  <nj-badge *ngIf="notification && size !== 'sm'"
            [value]="notification"
            [capedValue]="notificationCapedValue"
            [size]="getBadgeSize()"
            [variant]="notificationVariant"
            [emphasis]="notificationEmphasis"
            [unitLabel]="notificationUnitLabel">
  </nj-badge>
</ng-template>

<ng-template #avatarTemplate>
  <a *ngIf="!tooltipOptions && href" [href]="href" class="nj-avatar"
     [ngClass]="getAvatarClasses()">
    <ng-container *ngTemplateOutlet="tagContent"></ng-container>
  </a>
  <button *ngIf="!tooltipOptions && isClickable" class="nj-avatar"
          [ngClass]="getAvatarClasses()">
    <ng-container *ngTemplateOutlet="tagContent"></ng-container>
  </button>
  <div *ngIf="!tooltipOptions && !href && !isClickable" class="nj-avatar"
       [ngClass]="getAvatarClasses()">
    <ng-container *ngTemplateOutlet="tagContent"></ng-container>
  </div>
  <a *ngIf="tooltipOptions && href" [href]="href" class="nj-avatar"
     njTooltip [tooltipOptions]="tooltipOptions"
     [ngClass]="getAvatarClasses()">
    <ng-container *ngTemplateOutlet="tagContent"></ng-container>
  </a>
  <button *ngIf="tooltipOptions && isClickable" class="nj-avatar"
          njTooltip [tooltipOptions]="tooltipOptions"
          [ngClass]="getAvatarClasses()">
    <ng-container *ngTemplateOutlet="tagContent"></ng-container>
  </button>
  <div *ngIf="tooltipOptions && !href && !isClickable" class="nj-avatar"
       njTooltip [tooltipOptions]="tooltipOptions"
       [ngClass]="getAvatarClasses()">
    <ng-container *ngTemplateOutlet="tagContent"></ng-container>
  </div>
</ng-template>