Autocomplet in grid
Como implementar um auto-complete com Angular 10 em um grid
Neste tutorial, você aprenderá a implementar um recurso de auto-complete em um grid usando Angular 10. Vamos usar o pacote Angular Material para facilitar o processo.
Pré-requisitos:
- Ter o Node.js e o npm instalados.
- Ter o Angular CLI instalado. Se não tiver, instale-o com
npm install -g @angular/cli.
Passos:
1. Crie um novo projeto Angular:
ng new angular-autocomplete-grid
cd angular-autocomplete-grid
2. Instale o Angular Material:
ng add @angular/material
Siga as instruções para escolher um tema e configurar gestos e animações.
3. Importe os módulos necessários:
No arquivo app.module.ts, importe os módulos necessários:
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { MatTableModule } from '@angular/material/table';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
// ... seus componentes aqui
],
imports: [
// ... outros módulos aqui
MatAutocompleteModule,
MatInputModule,
MatTableModule,
ReactiveFormsModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
4. Implemente o auto-complete no grid:
No seu componente, por exemplo app.component.ts:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myControl = new FormControl();
options: string[] = ['Opção 1', 'Opção 2', 'Opção 3'];
filteredOptions: Observable<string[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().includes(filterValue));
}
}
No seu template, app.component.html:
<mat-form-field>
<input type="text" placeholder="Escolha uma opção" matInput [matAutocomplete]="auto" [formControl]="myControl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-table [dataSource]="options">
<!-- Seu grid aqui -->
</mat-table>
5. Estilize conforme necessário:
Ajuste o CSS no arquivo app.component.css para que o grid e o auto-complete se ajustem ao design desejado.
6. Execute o projeto:
ng serve
Agora, ao acessar http://localhost:4200/, você verá um campo de auto-complete acima de um grid. À medida que você digita no campo, as opções que correspondem ao texto inserido serão exibidas.
Espero que este tutorial tenha sido útil! Com esses passos, você deve ser capaz de implementar um recurso de auto-complete em um grid usando Angular 10 e Angular Material.
