Angular7 - Vật liệu

Vật liệu cung cấp rất nhiều mô-đun tích hợp sẵn cho dự án của bạn. Các tính năng như tự động hoàn thành, bộ chọn ngày, thanh trượt, menu, lưới và thanh công cụ có sẵn để sử dụng với các tài liệu trong Angular 7.

Để sử dụng vật liệu, chúng ta cần nhập gói. Angular 2 cũng có tất cả các tính năng trên nhưng chúng có sẵn như một phần của@angular/core module. Từ Angular 4, mô-đun Vật liệu đã được tạo sẵn với một mô-đun riêng biệt @ angle / Materials. Điều này giúp người dùng chỉ nhập các vật liệu cần thiết trong dự án của họ.

Để bắt đầu sử dụng vật liệu, bạn cần cài đặt hai gói: materials and cdk. Các thành phần nguyên liệu phụ thuộc vào mô-đun hoạt ảnh cho các tính năng nâng cao. Do đó, bạn cần gói hoạt ảnh giống nhau,@angular/animations. Gói này đã được cập nhật trong chương trước. Chúng tôi đã cài đặt các gói @ angle / cdk trong các chương trước cho mô-đun thả và kéo ảo.

Sau đây là lệnh để thêm vật liệu vào dự án của bạn:

npm install --save @angular/material

Bây giờ chúng ta hãy xem package.json. @angular/material và @angular/cdk đã được cài đặt.

{ 
   "name": "angular7-app", 
   "version": "0.0.0", 
   "scripts": { 
      "ng": "ng", 
      "start": "ng serve",
      "build": "ng build", 
      "test": "ng test", 
      "lint": "ng lint", 
      "e2e": "ng e2e" 
   }, 
   "private": true, 
   "dependencies": { 
      "@angular/animations": "~7.2.0", 
      "@angular/cdk": "^7.3.4", 
      "@angular/common": "~7.2.0", 
      "@angular/compiler": "~7.2.0", 
      "@angular/core": "~7.2.0", 
      "@angular/forms": "~7.2.0", 
      "@angular/material": "^7.3.4", 
      "@angular/platform-browser": "~7.2.0", 
      "@angular/platform-browser-dynamic": "~7.2.0", 
      "@angular/router": "~7.2.0", 
      "core-js": "^2.5.4", 
      "rxjs": "~6.3.3", 
      "tslib": "^1.9.0", 
      "zone.js": "~0.8.26" 
   }, 
   "devDependencies": { 
      "@angular-devkit/build-angular": "~0.13.0", 
      "@angular/cli": "~7.3.2", 
      "@angular/compiler-cli": "~7.2.0", 
      "@angular/language-service": "~7.2.0", 
      "@types/node": "~8.9.4", 
      "@types/jasmine": "~2.8.8", 
      "@types/jasminewd2": "~2.0.3", 
      "codelyzer": "~4.5.0", 
      "jasmine-core": "~2.99.1", 
      "jasmine-spec-reporter": "~4.2.1", 
      "karma": "~3.1.1", 
      "karma-chrome-launcher": "~2.2.0", 
      "karma-coverage-istanbul-reporter": "~2.0.1",
      "karma-jasmine": "~1.1.2", 
      "karma-jasmine-html-reporter": "^0.2.2", 
      "protractor": "~5.4.0", 
      "ts-node": "~7.0.0", 
      "tslint": "~5.11.0", 
      "typescript": "~3.2.2"
   } 
}

Chúng tôi đã đánh dấu các gói được cài đặt để làm việc với vật liệu.

Bây giờ chúng ta sẽ nhập các mô-đun trong mô-đun mẹ - app.module.ts như hình bên dưới.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      MatButtonModule,
      MatMenuModule,
      MatSidenavModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Trong tệp trên, chúng tôi đã nhập các mô-đun sau từ @angular/materials.

import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';

Và điều tương tự được sử dụng trong mảng nhập khẩu như được hiển thị bên dưới:

imports: [
   BrowserModule,
   AppRoutingModule,
   HttpClientModule,
   ScrollDispatchModule,
   DragDropModule,
   ReactiveFormsModule,
   BrowserAnimationsModule,
   MatButtonModule,
   MatMenuModule,
   MatSidenavModule
],

App.component.ts như được hiển thị bên dưới -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor() {}
}

Bây giờ, hãy để chúng tôi thêm hỗ trợ material-css vào styles.css.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Bây giờ hãy để chúng tôi thêm tài liệu vào bên trong app.component.html

Thực đơn

Để thêm menu, <mat-menu></mat-menu>Được sử dụng. Cácfile và Save Ascác mục được thêm vào nút dưới menu thảm. Có một nút chính được thêm vàoMenu. Tham chiếu của cùng một được đưa ra<mat-menu> bằng cách sử dụng [matMenuTriggerFor]="menu" và sử dụng menu với # in<mat-menu>.

app.component.html

<button mat-button [matMenuTriggerFor] = "menu">Menu</button> 
<mat-menu #menu = "matMenu"> 
   <button mat-menu-item> File </button> 
   <button mat-menu-item> Save As </button>
</mat-menu>

Hình ảnh dưới đây được hiển thị trong trình duyệt -

Nhấp vào Menu sẽ hiển thị các mục bên trong nó -

SideNav

Để thêm sidenav, chúng tôi cần <mat-sidenav-container></mat-sidenav-container>. <mat-sidenav></mat-sidenav>được thêm dưới dạng con vào vùng chứa. Có một div khác được thêm vào, kích hoạt sidenav bằng cách sử dụng(click)="sidenav.open()".

app.component.html

<mat-sidenav-container class="example-container" fullscreen> 
   <mat-sidenav #sidenav class = "example-sidenav"> 
      Angular 7 
   </mat-sidenav> 
   <div class = "example-sidenav-content"> 
      <button type = "button" mat-button (click) = "sidenav.open()"> 
         Open sidenav 
      </button> 
   </div> 
</mat-sidenav-container>

app.component.css

.example-container { 
   width: 500px;  
   height: 300px; 
   border: 1px solid rgba(0, 0, 0, 0.5); 
}
.example-sidenav { 
   padding: 20px; 
   width: 150px; 
   font-size: 20px;
   border: 1px solid rgba(0, 0, 0, 0.5); 
   background-color: #ccc; 
   color:white; 
}

Sau đây là hiển thị menu và sidenav trong trình duyệt -

Bảng điều khiển sau sẽ mở ra ở phía bên trái nếu chúng ta nhấp vào Open Sidenav -

Bảng chọn ngày

Bây giờ chúng ta hãy thêm một người chọn ngày sử dụng vật liệu. Để thêm trình chọn ngày, chúng ta cần nhập các mô-đun cần thiết để hiển thị trình chọn ngày.

Trong app.module.ts, chúng tôi đã nhập mô-đun sau như được hiển thị bên dưới cho datepicker -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      MatDatepickerModule,
      MatInputModule,
      MatNativeDateModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Ở đây, chúng tôi đã nhập các mô-đun như MatDatepickerModule, MatInputModule và MatNativeDateModule.

Bây giờ, app.component.ts như được hiển thị bên dưới -

import { Component } from '@angular/core'; 
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', s
   tyleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   constructor() {} 
}

Các app.component.html như hình dưới đây -

<mat-form-field>
   <input matInput [matDatepicker] = "picker" placeholder = "Choose a date"> 
   <mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Global css được thêm vào style.css -

/* You can add global styles to this file, and also 
import other style files */ 
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
body { 
   font-family: Roboto, Arial, sans-serif; 
   margin: 10; 
}
.basic-container { 
   padding: 30px; 
}
.version-info { 
   font-size: 8pt; 
   float: right;
}

Bộ chọn ngày được hiển thị trong trình duyệt như hình dưới đây -