Tìm hiểu về Angular Material Control in action P1 - Autocomplete

Autocomplete

* Autocomplete được biết là một trong các control trong forms control và là kiểu nhập văn bản bình thường và được hỗ trợ bởi một nhóm các tùy chọn được đề xuất.

Tham khảo https://material.angular.io/components/autocomplete/overview và thực hiện ví dụ. Sử dụng autocomplete control vào trong các dự án rất thuận tiện có thể áp dụng cho search, filter,vvv.

Đầu tiên bài đăng sử dụng Visual code để thực hiện. 

Tạo mới project với teminal phím tắt Ctrl + ~
> ng new learn-material-control








Install angular material
> npm install --save @angular/material @angular/cdk @angular/animations

Tạo file material-modules.ts
ở đường dẫn src/app/ với nội dung như sau

import {A11yModule} from '@angular/cdk/a11y';

import {DragDropModule} from '@angular/cdk/drag-drop';

import {ScrollingModule} from '@angular/cdk/scrolling';

import {CdkStepperModule} from '@angular/cdk/stepper';

import {CdkTableModule} from '@angular/cdk/table';

import {CdkTreeModule} from '@angular/cdk/tree';

import {NgModule} from '@angular/core';

import {

MatAutocompleteModule,

MatBadgeModule,

MatBottomSheetModule,

MatButtonModule,

MatButtonToggleModule,

MatCardModule,

MatCheckboxModule,

MatChipsModule,

MatDatepickerModule,

MatDialogModule,

MatDividerModule,

MatExpansionModule,

MatGridListModule,

MatIconModule,

MatInputModule,

MatListModule,

MatMenuModule,

MatNativeDateModule,

MatPaginatorModule,

MatProgressBarModule,

MatProgressSpinnerModule,

MatRadioModule,

MatRippleModule,

MatSelectModule,

MatSidenavModule,

MatSliderModule,

MatSlideToggleModule,

MatSnackBarModule,

MatSortModule,

MatStepperModule,

MatTableModule,

MatTabsModule,

MatToolbarModule,

MatTooltipModule,

MatTreeModule,

} from '@angular/material';

@NgModule({

exports: [

A11yModule,

CdkStepperModule,

CdkTableModule,

CdkTreeModule,

DragDropModule,

MatAutocompleteModule,

MatBadgeModule,

MatBottomSheetModule,

MatButtonModule,

MatButtonToggleModule,

MatCardModule,

MatCheckboxModule,

MatChipsModule,

MatStepperModule,

MatDatepickerModule,

MatDialogModule,

MatDividerModule,

MatExpansionModule,

MatGridListModule,

MatIconModule,

MatInputModule,

MatListModule,

MatMenuModule,

MatNativeDateModule,

MatPaginatorModule,

MatProgressBarModule,

MatProgressSpinnerModule,

MatRadioModule,

MatRippleModule,

MatSelectModule,

MatSidenavModule,

MatSliderModule,

MatSlideToggleModule,

MatSnackBarModule,

MatSortModule,

MatTableModule,

MatTabsModule,

MatToolbarModule,

MatTooltipModule,

MatTreeModule,

ScrollingModule,

]

})

export class DemoMaterialModule {}

/** Copyright 2018 Google Inc. All Rights Reserved.

Use of this source code is governed by an MIT-style license that

can be found in the LICENSE file at http://angular.io/license */

Tạo test component autocomplete control
> ng g c simple-autocomplete

Thay đổi ở AppModule
Ở file app.module.ts sửa như sau

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

import { SimpleAutocompleteComponent } from './simple-autocomplete/simple-autocomplete.component'; //Component mới thêm

import {DemoMaterialModule} from './material-module'; //import Material module

@NgModule({

declarations: [

AppComponent,

SimpleAutocompleteComponent //Component test mới thêm

],

imports: [

BrowserModule,

BrowserAnimationsModule,

FormsModule,

ReactiveFormsModule,

DemoMaterialModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Ở file app.html thay đổi nội dung sử dụng component mới tạo để xem kết quả

<!--The content below is only a placeholder and can be replaced.-->

<app-simple-autocomplete></app-simple-autocomplete>

Thay đổi ở SimpleAutocompleteComponent
Ở file simple-autocomplete.component.css

.example-form {

min-width: 150px;

max-width: 500px;

width: 100%;

}

.example-full-width {

width: 100%;

}

Ở file simple-autocomplete.component.ts

import { Component, OnInit } from '@angular/core';

import {FormControl} from '@angular/forms';

@Component({

selector: 'app-simple-autocomplete',

templateUrl: './simple-autocomplete.component.html',

styleUrls: ['./simple-autocomplete.component.css']

})

export class SimpleAutocompleteComponent implements OnInit {

constructor() { }

myControl = new FormControl();

options: string[] = ['Framgia', 'Fpt', 'Vnpt', 'VinGroup'];

ngOnInit() {

}

}

Ở file simple-autocomplete.component.html

<form class="example-form">

<mat-form-field class="example-full-width">

<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">

<mat-autocomplete #auto="matAutocomplete">

<mat-option *ngFor="let option of options" [value]="option">

{{option}}

</mat-option>

</mat-autocomplete>

</mat-form-field>

</form>

Chạy project

ng serve --open or (npm start sau đó vào trình duyệt gõ localhost:4200 enter)

Kết quả

Ở phần sau tôi sẽ giới thiệu về các control tiếp theo trong Forms Control
Phần tiếp theo
Nguồn: https://material.angular.io/components/autocomplete/overview
Project: Tự tạo