Angular7 - Matériaux

Les matériaux offrent de nombreux modules intégrés pour votre projet. Des fonctionnalités telles que la saisie semi-automatique, le sélecteur de date, le curseur, les menus, les grilles et la barre d'outils sont disponibles pour une utilisation avec des matériaux dans Angular 7.

Pour utiliser des matériaux, nous devons importer le package. Angular 2 possède également toutes les fonctionnalités ci-dessus, mais elles sont disponibles dans le cadre du@angular/core module. Depuis Angular 4, le module Materials a été rendu disponible avec un module séparé @ angular / Materials. Cela aide l'utilisateur à importer uniquement les matériaux requis dans son projet.

Pour commencer à utiliser des matériaux, vous devez installer deux packages: materials and cdk. Les composants matériels dépendent du module d'animation pour les fonctionnalités avancées. Par conséquent, vous avez besoin du package d'animation pour le même,@angular/animations. Le package a déjà été mis à jour dans le chapitre précédent. Nous avons déjà installé les packages @ angular / cdk dans les chapitres précédents pour le module virtuel et glisser-déposer.

Voici la commande pour ajouter des matériaux à votre projet -

npm install --save @angular/material

Voyons maintenant le package.json. @angular/material et @angular/cdk sont installés.

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

Nous avons mis en évidence les packages installés pour travailler avec des matériaux.

Nous allons maintenant importer les modules dans le module parent - app.module.ts comme indiqué ci-dessous.

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

Dans le fichier ci-dessus, nous avons importé les modules suivants de @angular/materials.

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

Et la même chose est utilisée dans le tableau des importations comme indiqué ci-dessous -

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

Le app.component.ts est comme indiqué ci-dessous -

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

Ajoutons maintenant le support material-css dans styles.css.

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

Ajoutons maintenant des matériaux dans app.component.html

Pour ajouter un menu, <mat-menu></mat-menu>est utilisé. lefile et Save Asles éléments sont ajoutés au bouton sous le menu tapis. Il y a un bouton principal ajoutéMenu. La référence de la même chose est donnée le<mat-menu> en utilisant [matMenuTriggerFor]="menu" et en utilisant le menu avec # 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>

L'image ci-dessous s'affiche dans le navigateur -

Cliquez sur Menu pour afficher les éléments à l'intérieur -

SideNav

Pour ajouter sidenav, nous avons besoin <mat-sidenav-container></mat-sidenav-container>. <mat-sidenav></mat-sidenav>est ajouté en tant qu'enfant au conteneur. Il y a un autre div ajouté, qui déclenche le sidenav en utilisant(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; 
}

Voici l'affichage du menu et du sidenav dans le navigateur -

Le panneau suivant s'ouvre sur le côté gauche si nous cliquons sur Ouvrir Sidenav -

Sélecteur de date

Ajoutons maintenant un datepicker en utilisant des matériaux. Pour ajouter un datepicker, nous devons importer les modules requis pour afficher le datepicker.

Dans app.module.ts, nous avons importé le module suivant comme indiqué ci-dessous pour 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 { }

Ici, nous avons importé des modules tels que MatDatepickerModule, MatInputModule et MatNativeDateModule.

Maintenant, le app.component.ts est comme indiqué ci-dessous -

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

le app.component.html est comme indiqué ci-dessous -

<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 ajouté dans style.css -

/* You can add global styles to this file, and also 
import other style files */ 
@import '[email protected]/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;
}

Le sélecteur de date est affiché dans le navigateur comme indiqué ci-dessous -

↰ Previous page Next page ↱

Angular7 - Matériaux

Menu

SideNav

Sélecteur de date

Tutoriel Angular7