TP Angular Material CRUD 1 PDF [PDF]

Zitiervorschau

Angular Material – CRUD - 1 Form Design Create an Angular project named : Angular Material – CRUD 1- Taper la commande suivante : ng new AngularMaterial-CRUD 2- Installer Angular Material en utilisant la commande suivante : ng add @angular/material La commande ng add permmet d’installer le Kit de Développement des Composant (CDK) d’Angular Material, ainsi que Angular Animations. Par la suite, il vous invite à choisir un theme parmis 4: •

deeppurple-amber.css

•

indigo-pink.css

•

pink-bluegrey.css

•

purple-green.css

Puis installe HammerJS, librairie Javascript qui va vous permettre de détecter les événements liés aux écrans tactiles tel que le pinch, swipe, drag Puis installe browser animations for Angular Material.

La commande ng add va ajouter les configurations suivantes : Add project dependencies to package.json Add the Roboto font to your index.html Add the Material Design icon font to your index.html Add a few global CSS styles to: Remove margins from body Set height: 100% on html and body Set Roboto as the default application font You're done! Angular Material is now configured to be used in your application.

Dans le fichier styles.css, on va importer le thème choisie: @import '@angular/material/prebuilt-themes/deeppurple-amber.css';

Voici la structure de notre application Src +- - - - - src + - - - Users | - - -users.component.ts |.htm | .css + - - - - user | - - - user.component.ts | .html | .css +- - - - services | - - - user.service.ts (form group)

1- Génération des composants : users et user et du service : user Taper les commandes suivantes pour générer les composants users et user ainsi que le serive user. -

ng g c users ng g c users/user ng g s services / user ng serve –open

Dans le fichier : app.component.html, on va ajouter le selecteur :

2- Dans le fichier users.component.html,

Angular 8 Material



3- Dans le fichier style.css /* You can add global styles to this file, and also import other style files */ @import '@angular/material/prebuilt-themes/deeppurple-amber.css'; html, body { height: 100%; } body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } div.container{ margin: 0px 40px;

} .fill-remaining-space { /* This fills the remaining space, by using flexbox. Every toolbar row uses a flexbox row layout. */ flex: 1 1 auto; } form.normal-form{ margin: 10px; } .controles-container{ width: 100%; padding: 5%; } .controles-container > * { width: 100%; } .add-bottom-padding{ padding-bottom: 10px; } /* radio group */ mat-radio-group mat-radio-button{ margin-left: 5px; } .button-row button{ margin: 5px; }

Nous avons besoin d’importer les modules nécessaires aux contrôles Angular Material. Pour ce faire, on va générer un module : -

ng g m material

4- Dans le fichier material.module.ts -

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import * as Material from "@angular/material"; @NgModule({ imports: [ CommonModule, Material.MatToolbarModule, Material.MatGridListModule, Material.MatFormFieldModule, Material.MatInputModule, Material.MatRadioModule, Material.MatSelectModule, Material.MatCheckboxModule,

-

Material.MatDatepickerModule, Material.MatNativeDateModule, Material.MatButtonModule, ], exports: [ Material.MatToolbarModule, Material.MatGridListModule, Material.MatFormFieldModule, Material.MatInputModule, Material.MatRadioModule, Material.MatSelectModule, Material.MatCheckboxModule, Material.MatDatepickerModule, Material.MatNativeDateModule, Material.MatButtonModule, ], declarations: [] }) export class MaterialModule { }

Puis importer le module : MaterialModule dans le fichier app.module.ts

5- Dans le fichier app.component.html

Enregistrer les modifications puis voir l’affichage du toolbar avec le titre Angular 8 sur la page principale

6- Dans le fichier user.service.ts import { Injectable } from '@angular/core'; import { FormGroup, FormControl, Validators } from "@angular/forms"; @Injectable({ providedIn: 'root' }) export class UserService { constructor() { } form: FormGroup = new FormGroup({ $key: new FormControl(null), fullName: new FormControl('', Validators.required), email: new FormControl('', Validators.email), mobile: new FormControl('', [Validators.required, Validators.minLength(8)]), city: new FormControl(''), gender: new FormControl('1'), department: new FormControl(0), hireDate: new FormControl(''), isPermanent: new FormControl(false) }); initializeFormGroup() {

this.form.setValue({ $key: null, fullName: '', email: '', mobile: '', city: '', gender: '1', department: 0, hireDate: '', isPermanent: false }); } }

7- Dans le fichier app.module.ts Ajouter UserService au tableau Providers providers: [UserService],

8- Dans le fichier : user.component.ts import { Component, OnInit } from '@angular/core'; import { UserService } from 'src/app/services/user.service'; @Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.css'] }) export class UserComponent implements OnInit { constructor(private service: UserService) { } departments = [ { id: 3, value: 'Dep 1' }, { id: 2, value: 'Dep 2' }, { id: 3, value: 'Dep 3' }]; onClear(){ this.service.initializeFormGroup(); this.service.form.reset(); } ngOnInit() { } }

9- Dans le fichier user.component.html :





This field is mandatory.

Invalid email address.

This field is mandatory. Minimum 8 charactors neede d.







Male Female Other



None

{{department.value}}





Permanent Employee



Submit Clear



10- Dans le fichier app.module.ts Importer ReactiveFormsModule, Voici son code complet (app.module.ts) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import import import import import import import import

{ { { { { { { {

AppRoutingModule } from './app-routing.module'; AppComponent } from './app.component'; BrowserAnimationsModule } from '@angular/platform-browser/animations'; UsersComponent } from './users/users.component'; UserComponent } from './users/user/user.component'; MaterialModule } from './material/material.module'; UserService } from './services/user.service'; ReactiveFormsModule } from '@angular/forms';

@NgModule({ declarations: [ AppComponent, UsersComponent, UserComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MaterialModule, ReactiveFormsModule ], providers: [UserService], bootstrap: [AppComponent] }) export class AppModule { }