I’m trying to use matchip with autocomplete enabled, I can’t say why it doesn’t work
The values passed are correct and I can’t use a filter on an observable
Does anyone have a tip on what to do?
Using the example of angular material, the filter and ViewChild were enough, but it didn’t work
Using angular v16
https://v16.material.angular.io/components/chips/examples
<code> <mat-form-field class="example-chip-list" appearance="outline">
<mat-label>Selecione os participantes</mat-label>
<mat-chip-grid #chipGrid>
<mat-chip-row [removable]="true" *ngFor="let item of allParticipantes" (removed)="remove(item)">
{{item.funcionario.nome}}
<button matChipRemove >
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>
</mat-chip-grid>
<input placeholder="Nome dos funcionários" #participantesInput formControlName="participantesCtrl"
[matChipInputFor]="chipGrid" [matAutocomplete]="auto" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="add($event)" />
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let item of filteredParticipantes$| async" [value]="item">{{item.nome}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
constructor(
protected _fb: FormBuilder,
private _reservaSala: ReservaSalaService,
private _funcionarioService: FuncionarioService,
@Inject(MAT_DIALOG_DATA) public data: ReservaSala,
private _storage: StorageService,
public dialog: MatDialog,
private participantesService: ParticipantesService,
) {
this.filteredParticipantes$ = this.participantesControle.valueChanges.pipe(
startWith(null),
map((part: string | null) => (part ? this.filter(part) : this.allParticipantes.slice())),);
}
@ViewChild('participantesInput') participantesInput!: ElementRef<HTMLInputElement>;
@ViewChild('auto') matAutocomplete!: MatAutocomplete;
public add(event: MatChipInputEvent): void {
const value = this.form.get('participantes')?.value;
// const input = event.chipInput;
if (value) {
console.log('value no add', value)
if (this.allParticipantes.includes(value)) {
const participanteIndividual: Participantes = {
funcionario: value,
codParticipantes: 0,
codReservaSala: 0
};
this.allParticipantes.push(participanteIndividual);
}
}
event.chipInput!.clear();
this.participantesControle.setValue(null);
}
public selected(event: MatAutocompleteSelectedEvent): void {
event.option.deselect();
const participanteIndividual: Participantes = {
funcionario: event.option.value,
codParticipantes: 0,
codReservaSala: 0
};
this.allParticipantes.push(participanteIndividual);
this.participantesControle.setValue(null);
}
public filter(value: string): any[] {
const filterValue = value.toLowerCase();
console.log('filterValue', filterValue)
return this.allParticipantes.filter((participante) => participante.funcionario.nome.toLowerCase().includes(filterValue));
}
```
</code>
<code> <mat-form-field class="example-chip-list" appearance="outline">
<mat-label>Selecione os participantes</mat-label>
<mat-chip-grid #chipGrid>
<mat-chip-row [removable]="true" *ngFor="let item of allParticipantes" (removed)="remove(item)">
{{item.funcionario.nome}}
<button matChipRemove >
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>
</mat-chip-grid>
<input placeholder="Nome dos funcionários" #participantesInput formControlName="participantesCtrl"
[matChipInputFor]="chipGrid" [matAutocomplete]="auto" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="add($event)" />
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let item of filteredParticipantes$| async" [value]="item">{{item.nome}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
constructor(
protected _fb: FormBuilder,
private _reservaSala: ReservaSalaService,
private _funcionarioService: FuncionarioService,
@Inject(MAT_DIALOG_DATA) public data: ReservaSala,
private _storage: StorageService,
public dialog: MatDialog,
private participantesService: ParticipantesService,
) {
this.filteredParticipantes$ = this.participantesControle.valueChanges.pipe(
startWith(null),
map((part: string | null) => (part ? this.filter(part) : this.allParticipantes.slice())),);
}
@ViewChild('participantesInput') participantesInput!: ElementRef<HTMLInputElement>;
@ViewChild('auto') matAutocomplete!: MatAutocomplete;
public add(event: MatChipInputEvent): void {
const value = this.form.get('participantes')?.value;
// const input = event.chipInput;
if (value) {
console.log('value no add', value)
if (this.allParticipantes.includes(value)) {
const participanteIndividual: Participantes = {
funcionario: value,
codParticipantes: 0,
codReservaSala: 0
};
this.allParticipantes.push(participanteIndividual);
}
}
event.chipInput!.clear();
this.participantesControle.setValue(null);
}
public selected(event: MatAutocompleteSelectedEvent): void {
event.option.deselect();
const participanteIndividual: Participantes = {
funcionario: event.option.value,
codParticipantes: 0,
codReservaSala: 0
};
this.allParticipantes.push(participanteIndividual);
this.participantesControle.setValue(null);
}
public filter(value: string): any[] {
const filterValue = value.toLowerCase();
console.log('filterValue', filterValue)
return this.allParticipantes.filter((participante) => participante.funcionario.nome.toLowerCase().includes(filterValue));
}
```
</code>
<mat-form-field class="example-chip-list" appearance="outline">
<mat-label>Selecione os participantes</mat-label>
<mat-chip-grid #chipGrid>
<mat-chip-row [removable]="true" *ngFor="let item of allParticipantes" (removed)="remove(item)">
{{item.funcionario.nome}}
<button matChipRemove >
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>
</mat-chip-grid>
<input placeholder="Nome dos funcionários" #participantesInput formControlName="participantesCtrl"
[matChipInputFor]="chipGrid" [matAutocomplete]="auto" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="add($event)" />
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let item of filteredParticipantes$| async" [value]="item">{{item.nome}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
constructor(
protected _fb: FormBuilder,
private _reservaSala: ReservaSalaService,
private _funcionarioService: FuncionarioService,
@Inject(MAT_DIALOG_DATA) public data: ReservaSala,
private _storage: StorageService,
public dialog: MatDialog,
private participantesService: ParticipantesService,
) {
this.filteredParticipantes$ = this.participantesControle.valueChanges.pipe(
startWith(null),
map((part: string | null) => (part ? this.filter(part) : this.allParticipantes.slice())),);
}
@ViewChild('participantesInput') participantesInput!: ElementRef<HTMLInputElement>;
@ViewChild('auto') matAutocomplete!: MatAutocomplete;
public add(event: MatChipInputEvent): void {
const value = this.form.get('participantes')?.value;
// const input = event.chipInput;
if (value) {
console.log('value no add', value)
if (this.allParticipantes.includes(value)) {
const participanteIndividual: Participantes = {
funcionario: value,
codParticipantes: 0,
codReservaSala: 0
};
this.allParticipantes.push(participanteIndividual);
}
}
event.chipInput!.clear();
this.participantesControle.setValue(null);
}
public selected(event: MatAutocompleteSelectedEvent): void {
event.option.deselect();
const participanteIndividual: Participantes = {
funcionario: event.option.value,
codParticipantes: 0,
codReservaSala: 0
};
this.allParticipantes.push(participanteIndividual);
this.participantesControle.setValue(null);
}
public filter(value: string): any[] {
const filterValue = value.toLowerCase();
console.log('filterValue', filterValue)
return this.allParticipantes.filter((participante) => participante.funcionario.nome.toLowerCase().includes(filterValue));
}
```
New contributor
Rafaela Repessold is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.