gns3-web-ui/src/app/components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component.html

<div class="path">
  <div>Path: /</div>
  <div *ngFor="let p of path.getDisplayPath()">{{p}}/</div>
  <div class="path-edit-line">
    <div>
      <div *ngIf="mode === 'SELECT'">
        <mat-select (valueChange)="valueChanged($event)" class="edit-area">
          <mat-option *ngFor="let value of values" value="{{value}}">{{value}}</mat-option>
        </mat-select>
      </div>
      <div *ngIf="mode === 'COMPLETE'">
        <input matInput
               autofocus
               class="complete edit-area"
               aria-label="find"
               [(ngModel)]="completeField"
               [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option [value]="'*'">*</mat-option>
          <mat-option *ngFor="let data of completeData.data | filterComplete: completeField"
                      [value]="data.name">
            <span>{{data.name}}</span>
          </mat-option>
        </mat-autocomplete>
      </div>
    </div>
    <div class="command-button">
      <mat-icon (click)="removePrevious()" *ngIf="!path.isEmpty()">cancel</mat-icon>
      <mat-icon (click)="getNext()" *ngIf="!this.mode">add_circle_outline</mat-icon>
      <mat-icon
        matTooltip="validate data"
        (click)="validComplete()"
        *ngIf="this.mode === 'COMPLETE'">check_circle
      </mat-icon>
    </div>
  </div>
</div>