task_tracker/web/angular/src/app/project-select/project-select.component.html

<mat-form-field appearance="outline" style="margin-top: 1em">
    <mat-label>{{"project.chain" | translate}}</mat-label>
    <mat-select [(ngModel)]="project" (selectionChange)="projectChange.emit($event.value)"
                [placeholder]="'project.chain' | translate"
                (opened)="loadProjectList()">
        <mat-select-trigger>{{project?.name}}</mat-select-trigger>
        <mat-option disabled *ngIf="projectList == undefined">
            {{"project_select.loading" | translate}}
        </mat-option>
        <mat-option [value]="null" *ngIf="projectList">
            {{"project_select.none" | translate}}
        </mat-option>
        <mat-option *ngFor="let p of projectList" [value]="p">
            <mat-icon *ngIf="p.public">public</mat-icon>
            <mat-icon *ngIf="!p.public">lock</mat-icon>
            <span style="width: 3em; display: inline-block">{{p.id}}</span>
            {{p.name}}
        </mat-option>
    </mat-select>
</mat-form-field>