<mat-chip-set>

  <ng-container *ngIf="!showAllCategories">
    <mat-chip *ngFor="let cat of this.categories.controls.slice(0, maxVisible)">
      <span [translate]="'categories.' + cat.controls['id'].value"></span>
    </mat-chip>
    <mat-chip highlighted color="primary" *ngIf="remainingCategories > 0" (click)="toggleCategories(); $event.stopPropagation()">
      <span class="clickable" [translate]="'chips.show-more'"></span> {{ remainingCategories }}+
    </mat-chip>
  </ng-container>

  <ng-container *ngIf="showAllCategories">
    <mat-chip *ngFor="let cat of this.categories.controls">
      <span [translate]="'categories.' + cat.controls['id'].value"></span>
    </mat-chip>
    <mat-chip highlighted color="primary" (click)="toggleCategories(); $event.stopPropagation()">
      <span class="clickable" [translate]="'chips.show-less'"></span>
    </mat-chip>
  </ng-container>

</mat-chip-set>
