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

Fluid Design System Angular

<div class="nj-tag" [ngClass]="[getTagVariantClass(), getTagSizeClass(), getTagDisabledClass()]">
  <!-- Icon -->
  <span aria-hidden="true" class="nj-tag__icon nj-icon-material material-icons" *ngIf="iconName && !hasCustomIcon">{{
    iconName
  }}</span>
  <span aria-hidden="true" class="nj-tag__icon" *ngIf="hasCustomIcon">
    <ng-content select="[njTagIcon]"></ng-content>
  </span>

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

  <!-- Close button -->
  <nj-icon-button
    *ngIf="isClosable && !isDisabled"
    icon="close"
    class="nj-tag__close"
    size="2xs"
    type="button"
    [label]="closeLabel"
    (buttonClick)="removeTag($event)"
  >
  </nj-icon-button>
</div>

<!-- Render a link, a button or a span for the tag content -->
<ng-template #tagWrapper>
  <a
    *ngIf="href"
    class="nj-tag__link"
    [attr.href]="isDisabled ? null : href"
    [attr.target]="isDisabled ? null : target"
    [attr.role]="isDisabled ? 'link' : null"
    [attr.aria-disabled]="isDisabled ? 'true' : null"
    (click)="isClickable ? tagClick?.emit($event) : null"
  >
    <ng-container *ngTemplateOutlet="tagContent"></ng-container>
  </a>

  <button
    *ngIf="!href && isClickable"
    class="nj-tag__button"
    [attr.disabled]="isDisabled ? 'disabled' : null"
    (click)="tagClick?.emit($event)"
  >
    <ng-container *ngTemplateOutlet="tagContent"></ng-container>
  </button>

  <p *ngIf="!href && !isClickable" class="nj-tag__text">
    <ng-container *ngTemplateOutlet="tagContent"></ng-container>
  </p>
</ng-template>

<!-- Tag inner text content -->
<ng-template #tagContent>
  <ng-content></ng-content>
</ng-template>