Angular7 - Bahan

Material menawarkan banyak modul built-in untuk proyek Anda. Fitur seperti pelengkapan otomatis, pemilih data, penggeser, menu, kisi, dan bilah alat tersedia untuk digunakan dengan materi di Angular 7.

Untuk menggunakan material, kita perlu mengimpor paketnya. Angular 2 juga memiliki semua fitur di atas tetapi tersedia sebagai bagian dari@angular/core module. Dari Angular 4, modul Material telah tersedia dengan modul @ angular / material terpisah. Ini membantu pengguna untuk hanya mengimpor bahan yang diperlukan dalam proyek mereka.

Untuk mulai menggunakan bahan, Anda perlu menginstal dua paket: materials and cdk. Komponen material bergantung pada modul animasi untuk fitur lanjutan. Karenanya Anda memerlukan paket animasi untuk hal yang sama,@angular/animations. Paket sudah diperbarui di bab sebelumnya. Kami telah menginstal paket @ angular / cdk di bab sebelumnya untuk modul virtual dan drag drop.

Berikut adalah perintah untuk menambahkan bahan ke proyek Anda -

npm install --save @angular/material

Sekarang mari kita lihat package.json. @angular/material dan @angular/cdk dipasang.

{ 
   "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"
   } 
}

Kami telah menyoroti paket-paket yang diinstal untuk bekerja dengan material.

Kami sekarang akan mengimpor modul di modul induk - app.module.ts seperti gambar dibawah.

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 { }

Pada file di atas, kami telah mengimpor modul berikut dari @angular/materials.

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

Dan hal yang sama digunakan dalam larik impor seperti yang ditunjukkan di bawah ini -

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

App.component.ts seperti yang ditunjukkan di bawah ini -

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

Sekarang mari kita tambahkan dukungan material-css styles.css.

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

Sekarang mari kita tambahkan materi di dalam app.component.html

Tidak bisa

Untuk menambahkan menu, <mat-menu></mat-menu>digunakan. Itufile dan Save Asitem ditambahkan ke tombol di bawah mat-menu. Ada tombol utama yang ditambahkanMenu. Referensi yang sama diberikan<mat-menu> dengan menggunakan [matMenuTriggerFor]="menu" dan menggunakan menu dengan # 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>

Gambar di bawah ini ditampilkan di browser -

Mengklik Menu akan menampilkan item di dalamnya -

SideNav

Untuk menambahkan sidenav, kita membutuhkan <mat-sidenav-container></mat-sidenav-container>. <mat-sidenav></mat-sidenav>ditambahkan sebagai anak ke wadah. Ada div lain yang ditambahkan, yang memicu sidenav dengan menggunakan(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; 
}

Berikut tampilan menu dan sidenav di browser -

Panel berikut terbuka di sisi kiri jika kita mengklik Open Sidenav -

Datepicker

Sekarang mari kita tambahkan datepicker menggunakan material. Untuk menambahkan datepicker, kita perlu mengimpor modul yang diperlukan untuk menampilkan datepicker.

Di app.module.ts, kami telah mengimpor modul berikut seperti yang ditunjukkan di bawah ini untuk 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 { }

Di sini, kami telah mengimpor modul seperti MatDatepickerModule, MatInputModule, dan MatNativeDateModule.

Sekarang, app.component.ts seperti yang ditunjukkan di bawah ini -

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

Itu app.component.html adalah seperti yang ditunjukkan di bawah ini -

<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>

CSS global ditambahkan di 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;
}

Datepicker ditampilkan di browser seperti yang ditunjukkan di bawah ini -