argos/dmp-frontend/src/app/shared/components/criteria/data-management-plan/dmp-criteria.component.html

<div class="dmp-criteria">
	<mat-card class="mat-card">
		<div class="row">
			<div class="col-md-6">
				<mat-form-field>
					<input matInput placeholder=" {{'CRITERIA.DMP.LIKE'| translate}}" name="projectCriteriaLike" [(ngModel)]="criteria.like"
					 (ngModelChange)="controlModified()">
					<mat-error *ngIf="baseErrorModel?.like">{{baseErrorModel['Criteria.like']}}</mat-error>
				</mat-form-field>
			</div>
			<div class="col-md-6">
				<td-chips color="accent" [items]="filteredProjects" [(ngModel)]="criteria.projects" placeholder="{{'CRITERIA.DMP.PROJECTS' | translate}}"
				 (inputChange)="filterProjects($event)" requireMatch>
					<ng-template td-chip let-chip="chip">
						<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
						{{chip.name}}
					</ng-template>
					<ng-template td-autocomplete-option let-option="option">
						<div layout="row" layout-align="start center">
							{{option.name}}
						</div>
					</ng-template>
					<mat-progress-bar [style.height.px]="2" *ngIf="filteringProjectsAsync" mode="indeterminate"></mat-progress-bar>
				</td-chips>
			</div>
		</div>
	</mat-card>
</div>