Angular 6 - Guide rapide

Il existe cinq versions majeures d'Angular. La première version publiée est Angular 1, également appelée AngularJS. Angular 1 a été suivi par Angular 2, qui a subi de nombreux changements par rapport à Angular 1.

La structure d'Angular est basée sur l'architecture des composants / services. AngularJS était basé sur le contrôleur de vue modèle.Angular 6 publié en mai 2018 s'avère être une avancée majeure et est la dernière version de l'équipe Angular après Angular 5.

Angular 6 est presque identique à Angular 5. Il a une compatibilité descendante avec Angular 5. Les projets développés dans Angular 5 fonctionneront sans problème avec Angular 5.

Voyons maintenant les nouvelles fonctionnalités et les modifications apportées à Angular 5.

Angular 5 et ses caractéristiques

Angular 5 est sorti en novembre 2017. Conformément à son objectif de vitesse et de taille, il était beaucoup plus rapide et de taille plus petite que celui d'Angular 4. Voici les fonctionnalités introduites dans Angular 5.

• HTTPClient API- L'API HTTPClient a été introduite pour rendre obsolète la bibliothèque HTTP. L'API HTTPClient est beaucoup plus rapide, sécurisée et efficace que la bibliothèque HTTP.

• Multiple export aliases - Un composant peut être exporté à l'aide de plusieurs alias pour faciliter le processus de migration.

• Internationalized Pipes for Number, Date, and Currency - De nouveaux tuyaux sont introduits pour une meilleure standardisation.

• Lambda support - Les expressions lambda avec des noms propres peuvent être utilisées à la place des fonctions.

• Build Optimizer- Build Optimizer introduit. Il optimise la taille de la construction et améliore la vitesse de l'application. Angular CLI utilise automatiquement Build Optimizer.

• Improved Compiler- Le compilateur à partir d'Angular 5 prend en charge la compilation incrémentielle pour une compilation plus rapide. Le compilateur utilise les transformations TypeScript, une nouvelle fonctionnalité de TypeScript 2.3 disponible à partir de.

Voyons maintenant les nouvelles fonctionnalités ajoutées à Angular 6 -

• Updated Angular CLI, Command Line interface- Nouvelles commandes ajoutées, comme ng-update pour migrer de la version précédente vers la version actuelle. ng-add pour ajouter rapidement des fonctionnalités d'application pour faire de l'application une application Web progressive.

• Updated CDK, Component Development Kit- Prend en charge la création d'éléments d'interface utilisateur personnalisés sans avoir besoin d'une bibliothèque de matériaux angulaires. Prend en charge les mises en page de conception Web réactive. Prend en charge les packages de superposition pour créer des fenêtres contextuelles.

• Updated Angular Material - Nouveau composant Tree ajouté, mat-tree, une version stylisée et cdk-tree, une version sans style, pour représenter une structure hiérarchique comme tree.

• Usage of RxJS, a reactive JS library

• Angular Element- Permet aux composants angulaires d'être publiés en tant que composants Web qui peuvent ensuite être utilisés dans n'importe quelle page HTML. En utilisant le package Angular Element, des éléments personnalisés natifs peuvent être créés facilement.

• Plusieurs validateurs - Permet à plusieurs validateurs d'être applicables sur un générateur de formulaire.

• Tree Shaking on Services - Désormais, le tremblement d'arbre peut également être appliqué aux services pour supprimer le code mort.

Dans ce chapitre, nous aborderons la configuration de l'environnement requise pour Angular 6. Pour installer Angular 6, nous avons besoin des éléments suivants:

• Nodejs
• Npm
• CLI angulaire
• IDE pour écrire votre code

Nodejs doit être supérieur à 8,11 et npm doit être supérieur à 5,6.

Nodejs

Pour vérifier si nodejs est installé sur votre système, tapez node -vdans le terminal. Cela vous aidera à voir la version de nodejs actuellement installée sur votre système.

C:\>node -v
v8.11.3

S'il n'imprime rien, installez nodejs sur votre système. Pour installer nodejs, allez sur la page d'accueilhttps://nodejs.org/en/download/ de nodejs et installez le package en fonction de votre système d'exploitation.

La page d'accueil de nodejs ressemblera à ce qui suit -

En fonction de votre système d'exploitation, installez le package requis. Une fois nodejs installé, npm sera également installé avec lui. Pour vérifier si npm est installé ou non, tapez npm -v dans le terminal. Il devrait afficher la version du npm.

C:\>npm -v
5.6.0

Les installations angulaires 4 sont très simples à l'aide de la CLI angulaire. Visitez la page d'accueilhttps://cli.angular.io/ d'angle pour obtenir la référence de la commande.

Type npm install -g @angular/cli, pour installer angular cli sur votre système.

Vous obtiendrez l'installation ci-dessus dans votre terminal, une fois Angular CLI installé. Vous pouvez utiliser n'importe quel IDE de votre choix, c'est-à-dire WebStorm, Atom, Visual Studio Code, etc.

Les détails de la configuration du projet sont expliqués dans le chapitre suivant.

AngularJS est basé sur le contrôleur de vue modèle, tandis que Angular 4 est basé sur la structure des composants. Angular 6 fonctionne sur la même structure qu'Angular4 mais est plus rapide que Angular4.

Angular6 utilise la version TypeScript 2.9 tandis que Angular 4 utilise la version 2.2 de TypeScript. Cela apporte beaucoup de différence dans les performances.

Pour installer Angular 6, l'équipe Angular a proposé Angular CLI qui facilite l'installation. Vous devez exécuter quelques commandes pour installer Angular 6.

Aller sur ce site https://cli.angular.io pour installer Angular CLI.

Pour commencer l'installation, nous devons d'abord nous assurer que nodejs et npm sont installés avec la dernière version. Le package npm est installé avec nodejs.

Aller sur le site nodejs https://nodejs.org/en/.

La dernière version de Nodejs v8.11.3 est recommandée pour les utilisateurs. Les utilisateurs qui ont déjà nodejs supérieur à 8.11 peuvent ignorer le processus ci-dessus. Une fois nodejs installé, vous pouvez vérifier la version de node dans la ligne de commande à l'aide de la commande, node-v, comme indiqué ci-dessous -

node -v
v8.11.3

L'invite de commande affiche v8.11.3. Une fois nodejs installé, npm sera également installé avec lui.

Pour vérifier la version de npm, tapez commande npm -vdans le terminal. Il affichera la version de npm comme indiqué ci-dessous.

npm -v
v5.6.0

La version de npm est la 5.6.0. Maintenant que nodejs et npm sont installés, exécutons les commandes angular cli pour installer Angular 6. Vous verrez les commandes suivantes sur la page Web -

npm install -g @angular/cli //command to install angular 6
ng new Angular 6-app // name of the project
cd my-dream-app
ng serve

Commençons par la première commande de la ligne de commande et voyons comment cela fonctionne.

Pour commencer, nous allons créer un répertoire vide dans lequel nous exécuterons la commande Angular CLI.

npm install -g @angular/cli //command to install angular 6

Nous avons créé un dossier vide ProjectA4et installé la commande Angular CLI. Nous avons également utilisé-gpour installer Angular CLI globalement. Maintenant, vous pouvez créer votre projet Angular 4 dans n'importe quel répertoire ou dossier et vous n'avez pas à installer le projet Angular CLI, car il est installé sur votre système globalement et vous pouvez l'utiliser à partir de n'importe quel répertoire.

Vérifions maintenant si Angular CLI est installé ou non. Pour vérifier l'installation, exécutez la commande suivante dans le terminal -

ng -v
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.3
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.3
@angular-devkit/core         0.7.3
@angular-devkit/schematics   0.7.3
@schematics/angular          0.7.3
@schematics/update           0.7.3
rxjs                         6.2.2
typescript                   2.9.2

Nous obtenons la version @ angular / cli, qui est actuellement la version 6.1.3. La version du nœud en cours d'exécution est 8.11.3 ainsi que les détails du système d'exploitation. Les détails ci-dessus nous indiquent que nous avons installé angular cli avec succès et que nous sommes maintenant prêts à commencer notre projet.

Nous avons maintenant installé Angular 6. Créons maintenant notre premier projet dans Angular 6. Pour créer un projet dans Angular 6, nous allons utiliser la commande suivante -

ng new projectname

Nous nommerons le projet ng new Angular6App.

Exécutons maintenant la commande ci-dessus dans la ligne de commande.

ng new Angular6App
CREATE Angular6App/angular.json (3593 bytes)
CREATE Angular6App/package.json (1317 bytes)
CREATE Angular6App/README.md (1028 bytes)
CREATE Angular6App/tsconfig.json (408 bytes)
CREATE Angular6App/tslint.json (2805 bytes)
CREATE Angular6App/.editorconfig (245 bytes)
CREATE Angular6App/.gitignore (503 bytes)
CREATE Angular6App/src/favicon.ico (5430 bytes)
CREATE Angular6App/src/index.html (298 bytes)
CREATE Angular6App/src/main.ts (370 bytes)
CREATE Angular6App/src/polyfills.ts (3194 bytes)
CREATE Angular6App/src/test.ts (642 bytes)
CREATE Angular6App/src/styles.css (80 bytes)
CREATE Angular6App/src/browserslist (375 bytes)
CREATE Angular6App/src/karma.conf.js (964 bytes)
CREATE Angular6App/src/tsconfig.app.json (170 bytes)
CREATE Angular6App/src/tsconfig.spec.json (256 bytes)
CREATE Angular6App/src/tslint.json (314 bytes)
CREATE Angular6App/src/assets/.gitkeep (0 bytes)
CREATE Angular6App/src/environments/environment.prod.ts (51 bytes)
CREATE Angular6App/src/environments/environment.ts (642 bytes)
CREATE Angular6App/src/app/app.module.ts (314 bytes)
CREATE Angular6App/src/app/app.component.html (1141 bytes)
CREATE Angular6App/src/app/app.component.spec.ts (1010 bytes)
CREATE Angular6App/src/app/app.component.ts (215 bytes)
CREATE Angular6App/src/app/app.component.css (0 bytes)
CREATE Angular6App/e2e/protractor.conf.js (752 bytes)
CREATE Angular6App/e2e/tsconfig.e2e.json (213 bytes)
CREATE Angular6App/e2e/src/app.e2e-spec.ts (307 bytes)
CREATE Angular6App/e2e/src/app.po.ts (208 bytes)

Le projet Angular6Appest créé avec succès. Il installe tous les packages nécessaires à l'exécution de notre projet dans Angular 6. Passons maintenant au projet créé, qui se trouve dans le répertoireAngular6App. Changez le répertoire dans la ligne de commande -cd Angular 6-app.

Nous utiliserons Visual Studio Code IDE pour travailler avec Angular 6; vous pouvez utiliser n'importe quel IDE, c'est-à-dire Atom, WebStorm, etc.

Pour télécharger Visual Studio Code, accédez à https://code.visualstudio.com/ et cliquez Download for Windows.

Cliquez sur Download for Windows pour installer l'IDE et exécutez la configuration pour commencer à utiliser l'IDE.

L'éditeur ressemble à ceci -

Nous n'avons démarré aucun projet dedans. Prenons maintenant le projet que nous avons créé en utilisant angular-cli.

Maintenant que nous avons la structure de fichiers pour notre projet, compilons notre projet avec la commande suivante -

ng serve

le ng serve La commande crée l'application et démarre le serveur Web.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
...
Date: 2018-08-18T11:17:54.745Z
Hash: 0ace6c8a055c58d1734c
Time: 20490ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.27 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

Le serveur Web démarre sur le port 4200. Tapez l'url http://localhost:4200/dans le navigateur et voir la sortie. Vous serez dirigé vers l'écran suivant -

Faisons maintenant quelques modifications pour afficher le contenu suivant -

"Welcome to Angular 6 project"

Nous avons apporté des modifications aux fichiers - app.component.html et app.component.ts. Nous en discuterons plus en détail dans nos chapitres suivants.

Laissez-nous terminer la configuration du projet. Si vous voyez que nous avons utilisé le port 4200, qui est le port par défaut utilisé par angular-cli lors de la compilation. Vous pouvez changer le port si vous le souhaitez en utilisant la commande suivante -

ng serve --host 0.0.0.0 -port 4205

Le dossier de l'application Angular 6 contient les éléments suivants folder structure -

• e2e- dossier de test de bout en bout. Principalement e2e est utilisé pour les tests d'intégration et permet de garantir que l'application fonctionne correctement.

• node_modules- Le package npm installé est node_modules. Vous pouvez ouvrir le dossier et voir les packages disponibles.

• src - Ce dossier est l'endroit où nous travaillerons sur le projet en utilisant Angular 4.

Le dossier de l'application Angular 6 contient les éléments suivants file structure -

• .angular-cli.json - Il contient essentiellement le nom du projet, la version de cli, etc.

• .editorconfig - Ceci est le fichier de configuration de l'éditeur.

• .gitignore - Un fichier .gitignore doit être validé dans le référentiel, afin de partager les règles d'ignorance avec tous les autres utilisateurs qui clonent le référentiel.

• karma.conf.js- Ceci est utilisé pour les tests unitaires via le rapporteur. Toutes les informations nécessaires au projet sont fournies dans le fichier karma.conf.js.

• package.json - Le fichier package.json indique quelles bibliothèques seront installées dans node_modules lorsque vous exécutez npm install.

À l'heure actuelle, si vous ouvrez le fichier dans l'éditeur, vous y ajouterez les modules suivants.

"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"

Au cas où vous auriez besoin d'ajouter plus de bibliothèques, vous pouvez les ajouter ici et exécuter la commande npm install.

• protractor.conf.js - Il s'agit de la configuration de test requise pour l'application.

• tsconfig.json - Ceci contient essentiellement les options du compilateur requises lors de la compilation.

• tslint.json - Ceci est le fichier de configuration avec les règles à prendre en compte lors de la compilation.

le src folder est le dossier principal, qui internally has a different file structure.

app

Il contient les fichiers décrits ci-dessous. Ces fichiers sont installés par défaut par angular-cli.

• app.module.ts- Si vous ouvrez le fichier, vous verrez que le code fait référence à différentes bibliothèques, qui sont importées. Angular-cli a utilisé ces bibliothèques par défaut pour l'importation - angular / core, platform-browser. Les noms eux-mêmes expliquent l'utilisation des bibliothèques.

Ils sont importés et enregistrés dans des variables telles que declarations, imports, providers, et bootstrap.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

declarations- Dans les déclarations, la référence aux composants est stockée. Le composant App est le composant par défaut qui est créé chaque fois qu'un nouveau projet est lancé. Nous en apprendrons davantage sur la création de nouveaux composants dans une section différente.

imports- Cela aura les modules importés comme indiqué ci-dessus. À l'heure actuelle, BrowserModule fait partie des importations qui sont importées de @ angular / platform-browser.

providers- Cela fera référence aux services créés. Le service sera discuté dans un chapitre suivant.

bootstrap - Cela fait référence au composant par défaut créé, c'est-à-dire AppComponent.

• app.component.css- Vous pouvez écrire votre structure css ici. Pour le moment, nous avons ajouté la couleur d'arrière-plan au div comme indiqué ci-dessous.

.divdetails{
   background-color: #ccc;
}

• app.component.html - Le code html sera disponible dans ce fichier.

<!--The content below is only a placeholder and can be replaced.-->
<div class = "divdetails">
   <div style = "text-align:center">
      <h1>
         Welcome to {{title}}!
      </h1>
      <img width = "300" src =    "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNv
         ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3Ry
         YXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9
         uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i
         TGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4b
         Wxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB
         4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hY
         mxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmV
         zZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojR
         EQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZ
         GRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBva
         W50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjM
         gMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMi
         AJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1L
         DUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwy
         MzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGN
         sYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLj
         ctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuM
         UwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4b
         DE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
   </div>
   <h2>Here are some links to help you start: </h2>
   <ul>
      <li>
         <h2>
            <a target = "_blank" href="https://angular.io/tutorial">Tour of Heroes</a>
         </h2>
      </li>
      <li>
         <h2>
            <a target = "_blank" href = "https://github.com/angular/angular-cli/wiki">
               CLI Documentation
            </a>
         </h2>
      </li>
      <li>
         <h2>
            <a target = "_blank" href="http://angularjs.blogspot.ca/">Angular blog</a>
         </h2>
      </li>
   </ul>
</div>

Il s'agit du code html par défaut actuellement disponible avec la création du projet.

• app.component.spec.ts - Ce sont des fichiers générés automatiquement qui contiennent des tests unitaires pour le composant source.

• app.component.ts- La classe du composant est définie ici. Vous pouvez effectuer le traitement de la structure html dans le fichier .ts. Le traitement comprendra des activités telles que la connexion à la base de données, l'interaction avec d'autres composants, le routage, les services, etc.

La structure du fichier est la suivante -

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

Les atouts

Vous pouvez enregistrer vos images, fichiers js dans ce dossier.

Environnement

Ce dossier contient les détails de l'environnement de production ou de développement. Le dossier contient deux fichiers.

• environment.prod.ts
• environment.ts

Les deux fichiers indiquent si le fichier final doit être compilé dans l'environnement de production ou dans l'environnement de développement.

La structure de fichiers supplémentaire du dossier d'application Angular 4 comprend les éléments suivants:

favicon.ico

Il s'agit d'un fichier qui se trouve généralement dans le répertoire racine d'un site Web.

index.html

C'est le fichier qui s'affiche dans le navigateur.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>HTTP Search Param</title>
      <base href = "/">
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
      <link href = "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel = "stylesheet">
      <link href = "styles.c7c7b8bf22964ff954d3.bundle.css" rel = "stylesheet">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

Le corps a <app-root></app-root>. C'est le sélecteur qui est utilisé dansapp.component.ts et affichera les détails du fichier app.component.html.

main.ts

main.ts est le fichier à partir duquel nous commençons le développement de notre projet. Cela commence par l'importation du module de base dont nous avons besoin. À l'heure actuelle, si vous voyez angular / core, angular / platform-browser-dynamic, app.module et l'environnement sont importés par défaut lors de l'installation angular-cli et de la configuration du projet.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

le platformBrowserDynamic().bootstrapModule(AppModule) a la référence du module parent AppModule. Par conséquent, lorsqu'il s'exécute dans le navigateur, le fichier appelé est index.html. Index.html fait référence en interne à main.ts qui appelle le module parent, c'est-à-dire AppModule lorsque le code suivant s'exécute -

platformBrowserDynamic().bootstrapModule(AppModule);

Lorsque AppModule est appelé, il appelle app.module.ts qui appelle en outre AppComponent en fonction du boostrap comme suit -

bootstrap: [AppComponent]

Dans app.component.ts, il y a un selector: app-rootqui est utilisé dans le fichier index.html. Cela affichera le contenu présent dans app.component.html.

Les éléments suivants seront affichés dans le navigateur -

polyfill.ts

Ceci est principalement utilisé pour la compatibilité descendante.

styles.css

Il s'agit du fichier de style requis pour le projet.

test.ts

Ici, les cas de test unitaires pour tester le projet seront traités.

tsconfig.app.json

Ceci est utilisé lors de la compilation, il a les détails de configuration qui doivent être utilisés pour exécuter l'application.

tsconfig.spec.json

Cela permet de conserver les détails pour les tests.

typings.d.ts

Il est utilisé pour gérer la définition TypeScript.

La majeure partie du développement avec Angular 6 se fait dans les composants. Les composants sont essentiellement des classes qui interagissent avec le fichier .html du composant, qui s'affiche dans le navigateur. Nous avons vu la structure des fichiers dans l'un de nos chapitres précédents. La structure de fichier a le composant d'application et se compose des fichiers suivants -

• app.component.css

• app.component.html

• app.component.spec.ts

• app.component.ts

• app.module.ts

Les fichiers ci-dessus ont été créés par défaut lorsque nous avons créé un nouveau projet à l'aide de la commande angular-cli.

Si vous ouvrez le app.module.ts fichier, il a des bibliothèques qui sont importées et aussi un déclaratif auquel le composant app est attribué comme suit -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Les déclarations incluent la variable AppComponent, que nous avons déjà importée. Cela devient le composant parent.

Maintenant, angular-cli a une commande pour créer votre propre composant. Cependant, le composant d'application qui est créé par défaut restera toujours le parent et les composants suivants créés formeront les composants enfants.

Exécutons maintenant la commande pour créer le composant.

ng generate component new-cmp

Lorsque vous exécutez la commande ci-dessus dans la ligne de commande, vous recevrez la sortie suivante -

D:\Node\Angular6App>ng generate component new-cmp
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes)
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes)
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes)
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes)
UPDATE src/app/app.module.ts (398 bytes)

Maintenant, si nous vérifions la structure des fichiers, nous obtiendrons le nouveau dossier new-cmp créé sous le dossier src / app.

Les fichiers suivants sont créés dans le dossier new-cmp -

• new-cmp.component.css - Le fichier css du nouveau composant est créé.

• new-cmp.component.html - le fichier html est créé.

• new-cmp.component.spec.ts - cela peut être utilisé pour les tests unitaires.

• new-cmp.component.ts - ici, nous pouvons définir le module, les propriétés, etc.

Les modifications sont ajoutées au fichier app.module.ts comme suit -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
// includes the new-cmp component we created
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent // here it is added in declarations and will behave as a child component
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.
})

export class AppModule { }

le new-cmp.component.ts le fichier est généré comme suit -

import { Component, OnInit } from '@angular/core'; // here angular/core is imported .
@Component({
   // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
   selector: 'app-new-cmp', //
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component.
   styleUrls: ['./new-cmp.component.css'] // reference to the style file.
})
export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

Si vous voyez le fichier new-cmp.component.ts ci-dessus, il crée une nouvelle classe appelée NewCmpComponent, qui implémente OnInit.In, qui a un constructeur et une méthode appelée ngOnInit (). ngOnInit est appelé par défaut lorsque la classe est exécutée.

Voyons comment fonctionne le flux. Désormais, le composant d'application, qui est créé par défaut, devient le composant parent. Tout composant ajouté ultérieurement devient le composant enfant.

Lorsque nous avons frappé l'url dans le http://localhost:4200/ navigateur, il exécute d'abord le fichier index.html qui est affiché ci-dessous -

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 6 Application</title>
      <base href = "/">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

Ce qui précède est le fichier html normal et nous ne voyons rien qui soit imprimé dans le navigateur. Jetez un œil à l'étiquette dans la section corps.

<app-root></app-root>

Il s'agit de la balise racine créée par défaut par Angular. Cette balise a la référence dans lemain.ts fichier.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

AppModule est importé de l'application du module parent principal, et la même chose est donnée au module d'amorçage, qui charge le module d'application.

Voyons maintenant le app.module.ts fichier -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

Ici, l'AppComponent est le nom donné, c'est-à-dire la variable pour stocker la référence du app. Component.tset la même chose est donnée au bootstrap. Voyons maintenant leapp.component.ts fichier.

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

Le noyau angulaire est importé et appelé le composant et le même est utilisé dans le déclarateur comme -

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

Dans la référence du déclarateur au sélecteur, templateUrl et styleUrlsont donnés. Le sélecteur ici n'est rien d'autre que la balise qui est placée dans le fichier index.html que nous avons vu ci-dessus.

La classe AppComponent a une variable appelée title, qui s'affiche dans le navigateur.

le @Component utilise le templateUrl appelé app.component.html qui se présente comme suit -

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

Il a juste le code html et le titre de la variable entre accolades. Il est remplacé par la valeur, qui est présente dans leapp.component.tsfichier. C'est ce qu'on appelle la liaison. Nous discuterons du concept de liaison dans un chapitre suivant.

Maintenant que nous avons créé un nouveau composant appelé new-cmp. La même chose est incluse dans leapp.module.ts fichier, lorsque la commande est exécutée pour créer un nouveau composant.

app.module.ts a une référence au nouveau composant créé.

Voyons maintenant les nouveaux fichiers créés dans new-cmp.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

Ici, nous devons également importer le noyau. La référence du composant est utilisée dans le déclarateur.

Le déclarateur a le sélecteur appelé app-new-cmp et le templateUrl et styleUrl.

Le .html appelé new-cmp.component.html est comme suit -

<p>
   new-cmp works!
</p>

Comme vu ci-dessus, nous avons le code html, c'est-à-dire la balise p. Le fichier de style est vide car nous n'avons actuellement besoin d'aucun style. Mais lorsque nous exécutons le projet, nous ne voyons rien concernant le nouveau composant s'afficher dans le navigateur. Ajoutons maintenant quelque chose et la même chose peut être vue dans le navigateur plus tard.

Le sélecteur, c'est-à-dire app-new-cmp doit être ajouté dans le app.component .html fichier comme suit -

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<app-new-cmp></app-new-cmp>

Quand le <app-new-cmp></app-new-cmp> est ajoutée, tout ce qui est présent dans le fichier .html du nouveau composant créé sera affiché sur le navigateur avec les données du composant parent.

Voyons le new component .html fichier et le new-cmp.component.ts fichier.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

Dans la classe, nous avons ajouté une variable appelée nouveau composant et la valeur est "Entered in new component created".

La variable ci-dessus est liée dans le .new-cmp.component.html fichier comme suit -

<p>
   {{newcomponent}}
</p>
<p>
   new-cmp works!
</p>

Maintenant que nous avons inclus le <app-new-cmp></app-new-cmp> sélecteur dans le app. component .html qui est le .html du composant parent, le contenu présent dans le nouveau fichier .html du composant (new-cmp.component.html) est affiché sur le navigateur comme suit -

De même, nous pouvons créer des composants et les lier à l'aide du sélecteur dans le app.component.html fichier selon nos exigences.

Module dans Angular fait référence à un endroit où vous pouvez regrouper les composants, les directives, les canaux et les services, qui sont liés à l'application.

Dans le cas où vous développez un site Web, l'en-tête, le pied de page, la gauche, le centre et la section droite font partie d'un module.

Pour définir le module, nous pouvons utiliser le NgModule. Lorsque vous créez un nouveau projet à l'aide de la commande Angular -cli, le ngmodule est créé par défaut dans le fichier app.module.ts et se présente comme suit:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Le NgModule doit être importé comme suit -

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

La structure du ngmodule est la suivante:

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

Cela commence par @NgModule et contient un objet qui a des déclarations, des importations, des fournisseurs et des bootstrap.

Déclaration

C'est un tableau de composants créés. Si un nouveau composant est créé, il sera d'abord importé et la référence sera incluse dans les déclarations comme indiqué ci-dessous -

declarations: [
   AppComponent,
   NewCmpComponent
]

Importer

Il s'agit d'un ensemble de modules devant être utilisés dans l'application. Il peut également être utilisé par les composants du tableau Déclaration. Par exemple, en ce moment dans @NgModule, nous voyons le module de navigateur importé. Si votre candidature a besoin de formulaires, vous pouvez inclure le module comme suit -

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

L'importation dans le @NgModule sera comme ce qui suit -

imports: [
   BrowserModule,
   FormsModule
]

Fournisseurs

Cela inclura les services créés.

Amorcer

Cela inclut le composant principal de l'application pour démarrer l'exécution.

La liaison de données est disponible directement à partir d'AngularJS, Angular 2,4 et est désormais également disponible dans Angular 6. Nous utilisons des accolades pour la liaison de données - {{}}; ce processus est appelé interpolation. Nous avons déjà vu dans nos exemples précédents comment nous avons déclaré la valeur du titre de la variable et que la même chose est imprimée dans le navigateur.

La variable dans le app.component.html le fichier est appelé {{title}} et la valeur de title est initialisée dans le app.component.ts fichier et dans app.component.html, la valeur s'affiche.

Créons maintenant une liste déroulante des mois dans le navigateur. Pour ce faire, nous avons créé une série de mois enapp.component.ts comme suit -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   // declared array of months.
   months = ["January", "Feburary", "March", "April", "May", 
            "June", "July", "August", "September",
            "October", "November", "December"];
}

Le tableau du mois indiqué ci-dessus doit être affiché dans une liste déroulante du navigateur. Pour cela, nous utiliserons la ligne de code suivante -

<!--The content below is only a placeholder and can be replaced. -->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>

Nous avons créé la balise de sélection normale avec option. En option, nous avons utilisé lefor loop. lefor loop est utilisé pour parcourir le tableau des mois, ce qui créera à son tour la balise d'option avec la valeur présente dans les mois.

La syntaxe for dans Angular est *ngFor = "let I of months" et pour obtenir la valeur des mois, nous l'afficherons en {{i}}.

Les deux accolades facilitent la liaison de données. Vous déclarez les variables dans votreapp.component.ts fichier et le même sera remplacé en utilisant les accolades.

Voyons la sortie du tableau du mois ci-dessus dans le navigateur

La variable définie dans le app.component.ts peut être lié avec le app.component.htmlen utilisant les accolades; par exemple,{{}}.

Affichons maintenant les données dans le navigateur en fonction des conditions. Ici, nous avons ajouté une variable et attribué la valeur true. En utilisant l'instruction if, nous pouvons masquer / afficher le contenu à afficher.

Exemple

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;   //variable is set to true
}

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable">Condition is valid.</span> 
  <!--over here based on if condition the text condition is valid is displayed. 
  If the value of isavailable is set to false it will not display the text.-->
</div>

Production

Essayons l'exemple ci-dessus en utilisant le IF THEN ELSE état.

Exemple

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = false;
}

Dans ce cas, nous avons fait le isavailablevariable comme faux. Pour imprimer leelse condition, nous devrons créer le ng-template comme suit -

<ng-template #condition1>Condition is invalid</ng-template>

Le code complet ressemble à ceci -

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable; else condition1">Condition is valid.</span>
   <ng-template #condition1>Condition is invalid</ng-template>
</div>

If est utilisé avec la condition else et la variable utilisée est condition1. Le même est attribué comme unid à la ng-template, et lorsque la variable disponible est définie sur false, le texte Condition is invalid est affiché.

La capture d'écran suivante montre l'affichage dans le navigateur.

Utilisons maintenant le if then else état.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
}

Maintenant, nous allons rendre la variable isavailablecomme vrai. Dans le html, la condition s'écrit de la manière suivante -

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
   Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable; then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>

Si la variable est vraie, alors condition1, autre condition2. Maintenant, deux modèles sont créés avec id#condition1 et #condition2.

L'affichage dans le navigateur est le suivant -

Dans ce chapitre, nous allons discuter du fonctionnement de la liaison d'événements dans Angular 6. Lorsqu'un utilisateur interagit avec une application sous la forme d'un mouvement du clavier, d'un clic de souris ou d'un survol de la souris, il génère un événement. Ces événements doivent être gérés pour effectuer une sorte d'action. C'est là que la liaison d'événement entre en scène.

Prenons un exemple pour mieux comprendre cela.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>
<button (click)="myClickFunction($event)">
   Click Me
</button>

dans le app.component.html fichier, nous avons défini un bouton et y avons ajouté une fonction à l'aide de l'événement click.

Voici la syntaxe pour définir un bouton et y ajouter une fonction.

(click)="myClickFunction($event)"

La fonction est définie dans le .ts fichier: app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   //array of months.
   months = ["January", "Feburary", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
   myClickFunction(event) { 
      //just added console.log which will display the event details in browser on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
}

En cliquant sur le bouton, le contrôle viendra à la fonction myClickFunction et une boîte de dialogue apparaîtra, qui affiche the Button is clicked comme indiqué dans la capture d'écran suivante -

Ajoutons maintenant l'événement de modification à la liste déroulante.

La ligne de code suivante vous aidera à ajouter l'événement de modification à la liste déroulante -

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select (change) = "changemonths($event)">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>

La fonction est déclarée dans le app.component.ts fichier -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   //array of months.
   months = ["January", "Feburary", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
   myClickFunction(event) {
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      console.log("Changed month from the Dropdown");
      console.log(event);
   }
}

Le message de la console "Changed month from the Dropdown"s'affiche dans la console avec l'événement.

Ajoutons un message d'alerte dans app.component.ts lorsque la valeur de la liste déroulante est modifiée comme indiqué ci-dessous -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   
   isavailable = true;
   myClickFunction(event) { 
      //just added console.log which will display the event details in browser 
      on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
   }
}

Lorsque la valeur de la liste déroulante est modifiée, une boîte de dialogue apparaît et le message suivant s'affiche - "Changed month from the Dropdown".

Angular 6 utilise le <ng-template> comme balise similaire à Angular 4 au lieu de <template>qui est utilisé dans Angular2. La raison pour laquelle Angular 4 a changé<template> à <ng-template> est parce qu'il y a un conflit de nom entre le <template> tag et le html <template>étiquette standard. Cela deviendra complètement obsolète.

Utilisons maintenant le modèle avec le if else condition et voir la sortie.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable;then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>

Pour la balise Span, nous avons ajouté le if déclaration avec le else condition et appellera le modèle condition1, sinon condition2.

Les modèles doivent être appelés comme suit -

<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>

Si la condition est vraie, le modèle condition1 est appelé, sinon condition2.

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
      "May", "June", "July", "August", "September",
      "October", "November", "December"];
   isavailable = false;
   myClickFunction(event) {
      this.isavailable = false;
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
      console.log(event);
   }
}

La sortie dans le navigateur est la suivante -

La variable isavailableest faux, le modèle condition2 est donc imprimé. Si vous cliquez sur le bouton, le modèle correspondant sera appelé. Si vous inspectez le navigateur, vous verrez que vous n'obtenez jamais la balise span dans le dom. L'exemple suivant vous aidera à comprendre la même chose.

Si vous inspectez le navigateur, vous verrez que le dom n'a pas la balise span. Il a lesCondition is invalid from template dans le dom.

La ligne de code suivante en html nous aidera à obtenir la balise span dans le dom.

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable; else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click)="myClickFunction($event)">Click Me</button>

Si nous supprimons la condition then, nous obtenons le "Condition is valid"message dans le navigateur et la balise span est également disponible dans le dom. Par exemple, dansapp.component.ts, nous avons fait le isavailable variable comme vrai.

Directives dans Angular est un js class, qui est déclarée comme @directive. Nous avons 3 directives en Angular. Les directives sont énumérées ci-dessous -

Directives de composants

Ceux-ci forment la classe principale ayant des détails sur la façon dont le composant doit être traité, instancié et utilisé lors de l'exécution.

Directives structurelles

Une directive de structure traite essentiellement de la manipulation des éléments dom. Les directives structurelles ont un signe * avant la directive. Par exemple,*ngIf et *ngFor.

Directives d'attribut

Les directives d'attribut traitent de la modification de l'aspect et du comportement de l'élément dom. Vous pouvez créer vos propres directives comme indiqué ci-dessous.

Comment créer des directives personnalisées?

Dans cette section, nous discuterons des directives personnalisées à utiliser dans les composants. Les directives personnalisées sont créées par nos soins et ne sont pas standard.

Voyons comment créer la directive personnalisée. Nous allons créer la directive en utilisant la ligne de commande. La commande pour créer la directive en utilisant la ligne de commande est -

ng g directive nameofthedirective
e.g
ng g directive changeText

Voici comment il apparaît dans la ligne de commande

C:\projectA6\Angular6App>ng g directive changeText
CREATE src/app/change-text.directive.spec.ts (241 bytes)
CREATE src/app/change-text.directive.ts (149 bytes)
UPDATE src/app/app.module.ts (486 bytes)

Les fichiers ci-dessus, c'est-à-dire change-text.directive.spec.ts et change-text.directive.ts être créé et le app.module.ts le fichier est mis à jour.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

le ChangeTextDirectiveclass est inclus dans les déclarations du fichier ci-dessus. La classe est également importée du fichier ci-dessous.

change-texte. directif

import { Directive } from '@angular/core';
@Directive({
   selector: '[appChangeText]'
})
export class ChangeTextDirective {
   constructor() { }
}

Le fichier ci-dessus a une directive et il a également une propriété de sélecteur. Tout ce que nous définissons dans le sélecteur, il doit correspondre dans la vue, où nous affectons la directive personnalisée.

dans le app.component.html vue, ajoutons la directive comme suit -

<div style = "text-align:center">
   <span appChangeText >Welcome to {{title}}.</span>
</div>

Nous écrirons les changements dans change-text.directive.ts fichier comme suit -

change-text.directive.ts

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[appChangeText]'
})
export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText = "Text is changed by changeText Directive. ";
   }
}

Dans le fichier ci-dessus, il y a une classe appelée ChangeTextDirective et un constructeur, qui prend l'élément de type ElementRef, qui est obligatoire. L'élément a tous les détails auxquels leChange Text directive est appliquée.

Nous avons ajouté le console.logélément. La sortie de la même chose peut être vue dans la console du navigateur. Le texte de l'élément est également modifié comme indiqué ci-dessus.

Maintenant, le navigateur affichera ce qui suit.

Dans ce chapitre, nous discuterons de ce que sont les tuyaux dans Angular 6. Les tuyaux étaient auparavant appelés filtres dans Angular1 et appelés tuyaux dans Angular 2 et les versions ultérieures.

Le | Le caractère est utilisé pour transformer les données. Voici la syntaxe pour le même

{{ Welcome to Angular 6 | lowercase}}

Il prend les entiers, les chaînes, les tableaux et la date comme entrée séparés par | à convertir au format requis et à afficher le même dans le navigateur.

Considérons quelques exemples utilisant des tuyaux.

Ici, nous voulons afficher le texte donné en majuscules. Cela peut être fait en utilisant des tuyaux comme suit -

dans le app.component.ts fichier, nous avons défini la variable title -

app.component.ts

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

La ligne de code suivante entre dans le app.component.html fichier.

<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>

Le navigateur apparaît comme indiqué dans la capture d'écran suivante -

Angular 6 fournit des tuyaux intégrés. Les tuyaux sont énumérés ci-dessous -

• Lowercasepipe
• Uppercasepipe
• Datepipe
• Currencypipe
• Jsonpipe
• Percentpipe
• Decimalpipe
• Slicepipe

Nous avons déjà vu les tuyaux minuscules et majuscules. Voyons maintenant comment fonctionnent les autres tuyaux.

La ligne de code suivante nous aidera à définir les variables requises dans app.component.ts fichier -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   todaydate = new Date();
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
            "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}

Nous utiliserons les tuyaux dans le app.component.html fichier.

<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Uppercase Pipe</h1>
      <b>{{title | uppercase}}</b><br/>
      <h1>Lowercase Pipe</h1>
      <b>{{title | lowercase}}</b>
      <h1>Currency Pipe</h1>
      <b>{{6589.23 | currency:"USD"}}</b><br/>
      <b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.
      <h1>Date pipe</h1>
      <b>{{todaydate | date:'d/M/y'}}</b><br/>
      <b>{{todaydate | date:'shortTime'}}</b>
      <h1>Decimal Pipe</h1>
      <b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.
   </div>
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Json Pipe</h1>
      <b>{{ jsonval | json }}</b>
      <h1>Percent Pipe</h1>
      <b>{{00.54565 | percent}}</b>
      <h1>Slice Pipe</h1>
      <b>{{months | slice:2:6}}</b> 
      // here 2 and 6 refers to the start and the end index
   </div>
</div>

Les captures d'écran suivantes montrent la sortie pour chaque tube -

Comment créer un tuyau personnalisé?

Pour créer un tuyau personnalisé, nous avons créé un nouveau tsfichier. Ici, nous voulons créer lesqrttuyau personnalisé. Nous avons donné le même nom au fichier et il ressemble à ceci -

app.sqrt.ts

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

Pour créer un tuyau personnalisé, nous devons importer la transformation de tuyau et de tuyau à partir de Angular / core. Dans la directive @Pipe, nous devons donner le nom à notre pipe, qui sera utilisé dans notre fichier .html. Puisque nous créons le tube sqrt, nous le nommerons sqrt.

Au fur et à mesure que nous progressons, nous devons créer la classe et le nom de la classe est SqrtPipe. Cette classe implémentera lePipeTransform.

La méthode de transformation définie dans la classe prendra l'argument comme nombre et renverra le nombre après avoir pris la racine carrée.

Puisque nous avons créé un nouveau fichier, nous devons ajouter le même dans app.module.ts. Cela se fait comme suit -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Nous avons créé le app.sqrt.tsclasse. Nous devons importer la même chose dansapp.module.tset spécifiez le chemin du fichier. Il doit également être inclus dans les déclarations comme indiqué ci-dessus.

Voyons maintenant l'appel effectué au tube sqrt dans le app.component.html fichier.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

La sortie ressemble à ceci -

Le routage signifie essentiellement naviguer entre les pages. Vous avez vu de nombreux sites avec des liens qui vous dirigent vers une nouvelle page. Ceci peut être réalisé en utilisant le routage. Ici, les pages auxquelles nous nous référons seront sous forme de composants. Nous avons déjà vu comment créer un composant. Créons maintenant un composant et voyons comment utiliser le routage avec lui.

Dans le composant parent principal app.module.ts, nous devons maintenant inclure le module du routeur comme indiqué ci-dessous -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

importer {RouterModule} depuis '@ angular / router'

Ici, le RouterModule est importé depuis angular / router. Le module est inclus dans les importations comme indiqué ci-dessous -

RouterModule.forRoot([
   {
      path: 'new-cmp',
      component: NewCmpComponent
   }
])

RouterModule fait référence au forRootqui prend une entrée comme un tableau, qui à son tour a l'objet du chemin et le composant. Path est le nom du routeur et le composant est le nom de la classe, c'est-à-dire le composant créé.

Voyons maintenant le fichier créé par le composant -

Nouveau-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

La classe en surbrillance est mentionnée dans les importations du module principal.

Nouveau-cmp.component.html

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

Maintenant, nous avons besoin que le contenu ci-dessus du fichier html soit affiché chaque fois que nécessaire ou cliqué dans le module principal. Pour cela, nous devons ajouter les détails du routeur dans leapp.component.html.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>
<br />
<br/>
<router-outlet></router-outlet>

Dans le code ci-dessus, nous avons créé la balise de lien d'ancrage et donné routerLink comme "new-cmp". Ceci est mentionné dansapp.module.ts comme chemin.

Lorsqu'un utilisateur clique new component, la page doit afficher le contenu. Pour cela, nous avons besoin de la balise suivante -<router-outlet> </router-outlet>.

La balise ci-dessus garantit que le contenu du new-cmp.component.html sera affiché sur la page lorsqu'un utilisateur clique new component.

Voyons maintenant comment la sortie est affichée sur le navigateur.

Lorsqu'un utilisateur clique sur Nouveau composant, vous verrez ce qui suit dans le navigateur.

L'URL contient http://localhost:4200/new-cmp. Ici, le new-cmp est ajouté à l'url d'origine, qui est le chemin indiqué dans leapp.module.ts et le lien routeur dans le app.component.html.

Lorsqu'un utilisateur clique sur Nouveau composant, la page n'est pas actualisée et le contenu est affiché à l'utilisateur sans aucun rechargement. Seule une partie particulière du code du site sera rechargée lorsque vous cliquez dessus. Cette fonctionnalité est utile lorsque nous avons un contenu lourd sur la page et doit être chargé en fonction de l'interaction de l'utilisateur. La fonctionnalité offre également une bonne expérience utilisateur car la page n'est pas rechargée.

Dans ce chapitre, nous discuterons des services dans Angular 6.

Nous pouvons rencontrer une situation où nous avons besoin d'un code à utiliser partout sur la page. Il peut s'agir d'une connexion de données qui doit être partagée entre les composants, etc. Les services nous aident à atteindre cet objectif. Avec les services, nous pouvons accéder aux méthodes et aux propriétés des autres composants de l'ensemble du projet.

Pour créer un service, nous devons utiliser la ligne de commande. La commande pour le même est -

C:\projectA6\Angular6App>ng g service myservice
CREATE src/app/myservice.service.spec.ts (392 bytes)
CREATE src/app/myservice.service.ts (138 bytes)

Les fichiers sont créés dans le dossier de l'application comme suit -

Voici les fichiers créés en bas - myservice.service.specs.ts et myservice.service.ts.

myservice.service.ts

import { Injectable } from '@angular/core';
@Injectable()
export class MyserviceService {
   constructor() { }
}

Ici, le module injectable est importé depuis le @angular/core. Il contient le@Injectable méthode et une classe appelée MyserviceService. Nous allons créer notre fonction de service dans cette classe.

Avant de créer un nouveau service, nous devons inclure le service créé dans le parent principal app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Nous avons importé le service avec le nom de la classe et la même classe est utilisée dans les fournisseurs. Revenons maintenant à la classe de service et créons une fonction de service.

Dans la classe de service, nous allons créer une fonction qui affichera la date du jour. Nous pouvons utiliser la même fonction dans le composant parent principalapp.component.ts et aussi dans le nouveau composant new-cmp.component.ts que nous avons créé dans le chapitre précédent.

Voyons maintenant à quoi ressemble la fonction dans le service et comment l'utiliser dans les composants.

import { Injectable } from '@angular/core';
@Injectable()
export class MyserviceService {
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

Dans le fichier de service ci-dessus, nous avons créé une fonction showTodayDate. Nous allons maintenant renvoyer la nouvelle Date () créée. Voyons comment nous pouvons accéder à cette fonction dans la classe de composant.

app.component.ts

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

le ngOnInitLa fonction est appelée par défaut dans tout composant créé. La date est extraite du service comme indiqué ci-dessus. Pour récupérer plus de détails sur le service, nous devons d'abord inclure le service dans le composantts fichier.

Nous afficherons la date dans le .html fichier comme indiqué ci-dessous -

{{todaydate}}
<app-new-cmp></app-new-cmp> 
// data to be displayed to user from the new component class.

Voyons maintenant comment utiliser le service dans le nouveau composant créé.

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponent = "Entered in new component created";
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

Dans le nouveau composant que nous avons créé, nous devons d'abord importer le service que nous voulons et accéder aux méthodes et propriétés de celui-ci. Veuillez voir le code en surbrillance. La date d'aujourd'hui est affichée dans le html du composant comme suit -

<p>
   {{newcomponent}}
</p>
<p>
   Today's Date : {{todaydate}}
</p>

Le sélecteur du nouveau composant est utilisé dans le app.component.htmlfichier. Le contenu du fichier html ci-dessus sera affiché dans le navigateur comme indiqué ci-dessous -

Si vous modifiez la propriété du service dans un composant, la même chose est également modifiée dans d'autres composants. Voyons maintenant comment cela fonctionne.

Nous allons définir une variable dans le service et l'utiliser dans le parent et le nouveau composant. Nous modifierons à nouveau la propriété dans le composant parent et verrons si la même chose est modifiée dans le nouveau composant ou non.

Dans myservice.service.ts, nous avons créé une propriété et utilisé la même chose dans un autre parent et un nouveau composant.

import { Injectable } from '@angular/core';
@Injectable()
export class MyserviceService {
   serviceproperty = "Service Created";
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

Utilisons maintenant le servicepropertyvariable dans d'autres composants. Dansapp.component.ts, nous accédons à la variable comme suit -

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      console.log(this.myservice.serviceproperty);
      this.myservice.serviceproperty = "component created"; // value is changed.
      this.componentproperty = this.myservice.serviceproperty;
   }
}

Nous allons maintenant récupérer la variable et travailler sur console.log. Dans la ligne suivante, nous changerons la valeur de la variable en"component created". Nous ferons de même dansnew-cmp.component.ts.

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponentproperty;
   newcomponent = "Entered in newcomponent";
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.newcomponentproperty = this.myservice.serviceproperty;
   }
}

Dans le composant ci-dessus, nous ne changeons rien mais affectons directement la propriété à la propriété du composant.

Désormais, lorsque vous l'exécutez dans le navigateur, la propriété du service sera modifiée puisque sa valeur est modifiée dans app.component.ts et le même sera affiché pour le new-cmp.component.ts.

Vérifiez également la valeur dans la console avant de la modifier.

Le service Http nous aidera à récupérer des données externes, à les publier, etc. Nous devons importer le module http pour utiliser le service http. Prenons un exemple pour comprendre comment utiliser le service http.

Pour commencer à utiliser le service http, nous devons importer le module dans app.module.ts comme indiqué ci-dessous -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Si vous voyez le code en surbrillance, nous avons importé le HttpModule de @ angular / http et le même est également ajouté dans le tableau des importations.

Utilisons maintenant le service http dans le app.component.ts.

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map((response) ⇒ response.json()).
      subscribe((data) ⇒ console.log(data))
   }
}

Comprenons le code mis en évidence ci-dessus. Nous devons importer http pour utiliser le service, ce qui se fait comme suit -

import { Http } from '@angular/http';

Dans la classe AppComponent, un constructeur est créé et la variable privée http de type Http. Pour récupérer les données, nous devons utiliser leget API disponible avec http comme suit

this.http.get();

Il faut que l'URL soit récupérée en tant que paramètre comme indiqué dans le code.

Nous utiliserons l'url de test - https://jsonplaceholder.typicode.com/userspour récupérer les données json. Deux opérations sont effectuées sur la carte de données d'url récupérée et s'abonner. La méthode Map permet de convertir les données au format json. Pour utiliser la carte, nous devons importer la même chose que celle indiquée ci-dessous -

import {map} from 'rxjs/operators';

Une fois la carte terminée, l'abonnement enregistrera la sortie dans la console comme indiqué dans le navigateur -

Si vous voyez, les objets json sont affichés dans la console. Les objets peuvent également être affichés dans le navigateur.

Pour les objets à afficher dans le navigateur, mettez à jour les codes dans app.component.html et app.component.ts comme suit -

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { map} from 'rxjs/operators';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users")
      .pipe(map((response) => response.json()))
      .subscribe((data) => this.displaydata(data));     
   }
   displaydata(data) {this.httpdata = data;}
}

Dans app.component.ts, en utilisant la méthode subscribe, nous allons appeler la méthode d'affichage des données et lui transmettre les données récupérées en tant que paramètre.

Dans la méthode d'affichage des données, nous stockerons les données dans une variable httpdata. Les données sont affichées dans le navigateur en utilisantfor sur cette variable httpdata, ce qui est fait dans le app.component.html fichier.

<ul *ngFor = "let data of httpdata">
   <li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>

L'objet json est le suivant -

{
   "id": 1,
   "name": "Leanne Graham",
   "username": "Bret",
   "email": "[email protected]",
   
   "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
         "lat": "-37.3159",
         "lng": "81.1496"
      }
   },
   
   "phone": "1-770-736-8031 x56442",
   "website": "hildegard.org",
   "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
   }
}

L'objet a des propriétés telles que l'identifiant, le nom, le nom d'utilisateur, l'e-mail et l'adresse qui ont en interne la rue, la ville, etc. et d'autres détails liés au téléphone, au site Web et à l'entreprise. En utilisant lefor boucle, nous afficherons le nom et les détails de la ville dans le navigateur comme indiqué dans le app.component.html fichier.

Voici comment l'affichage est affiché dans le navigateur -

Ajoutons maintenant le paramètre de recherche, qui filtrera en fonction de données spécifiques. Nous devons récupérer les données en fonction du paramètre de recherche passé.

Voici les changements effectués dans app.component.html et app.component.ts fichiers -

app.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { map} from 'rxjs/operators';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   httpdata;
   name;
   searchparam = 2;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam)
      .pipe(map((response) => response.json()))
      .subscribe((data) => this.displaydata(data));     
   }
   displaydata(data) {this.httpdata = data;}
}

Pour le get api, nous ajouterons le paramètre de recherche id = this.searchparam. Le paramètre de recherche est égal à 2. Nous avons besoin des détails deid = 2 à partir du fichier json.

Voici comment le navigateur s'affiche -

Nous avons consolidé les données du navigateur, qui sont reçues du http. La même chose est affichée dans la console du navigateur. Le nom du json avecid = 2 s'affiche dans le navigateur.

HttpClient est introduit dans Angular 6 et il nous aidera à récupérer des données externes, à y publier, etc. Nous devons importer le module http pour utiliser le service http. Prenons un exemple pour comprendre comment utiliser le service http.

Pour commencer à utiliser le service http, nous devons importer le module dans app.module.ts comme indiqué ci-dessous -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Si vous voyez le code en surbrillance, nous avons importé le HttpClientModule de @ angular / common / http et le même est également ajouté dans le tableau des importations.

Utilisons maintenant le client http dans le app.component.ts.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: HttpClient) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      subscribe((data) ⇒ console.log(data))
   }
}

Comprenons le code mis en évidence ci-dessus. Nous devons importer http pour utiliser le service, ce qui se fait comme suit -

import { HttpClient } from '@angular/common/http';

Dans la classe AppComponent, un constructeur est créé et la variable privée http de type Http. Pour récupérer les données, nous devons utiliser leget API disponible avec http comme suit

this.http.get();

Il faut que l'URL soit récupérée en tant que paramètre comme indiqué dans le code.

Nous utiliserons l'url de test - https://jsonplaceholder.typicode.com/userspour récupérer les données json. L'abonné enregistrera la sortie dans la console comme indiqué dans le navigateur -

Si vous voyez, les objets json sont affichés dans la console. Les objets peuvent également être affichés dans le navigateur.

Pour les objets à afficher dans le navigateur, mettez à jour les codes dans app.component.html et app.component.ts comme suit -

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: HttpClient) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users")
      .subscribe((data) => this.displaydata(data));     
   }
   displaydata(data) {this.httpdata = data;}
}

Dans app.component.ts, en utilisant la méthode subscribe, nous allons appeler la méthode d'affichage des données et lui transmettre les données récupérées en tant que paramètre.

Dans la méthode d'affichage des données, nous stockerons les données dans une variable httpdata. Les données sont affichées dans le navigateur en utilisantfor sur cette variable httpdata, ce qui est fait dans le app.component.html fichier.

<ul *ngFor = "let data of httpdata">
   <li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>

L'objet json est le suivant -

{
   "id": 1,
   "name": "Leanne Graham",
   "username": "Bret",
   "email": "[email protected]",
   
   "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
         "lat": "-37.3159",
         "lng": "81.1496"
      }
   },
   
   "phone": "1-770-736-8031 x56442",
   "website": "hildegard.org",
   "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
   }
}

L'objet a des propriétés telles que l'identifiant, le nom, le nom d'utilisateur, l'e-mail et l'adresse qui ont en interne la rue, la ville, etc. et d'autres détails liés au téléphone, au site Web et à l'entreprise. En utilisant lefor boucle, nous afficherons le nom et les détails de la ville dans le navigateur comme indiqué dans le app.component.html fichier.

Voici comment l'affichage est affiché dans le navigateur -

Ajoutons maintenant le paramètre de recherche, qui filtrera en fonction de données spécifiques. Nous devons récupérer les données en fonction du paramètre de recherche passé.

Voici les changements effectués dans app.component.html et app.component.ts fichiers -

app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: HttpClient) { }
   httpdata;
   name;
   searchparam = 2;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam)
      .subscribe((data) => this.displaydata(data));     
   }
   displaydata(data) {this.httpdata = data;}
}

Pour le get api, nous ajouterons le paramètre de recherche id = this.searchparam. Le paramètre de recherche est égal à 2. Nous avons besoin des détails deid = 2 à partir du fichier json.

Voici comment le navigateur s'affiche -

Nous avons consolidé les données du navigateur, qui sont reçues du http. La même chose est affichée dans la console du navigateur. Le nom du json avecid = 2 s'affiche dans le navigateur.

Dans ce chapitre, nous verrons comment les formulaires sont utilisés dans Angular 6. Nous discuterons de deux façons de travailler avec des formulaires - formulaire piloté par modèle et formulaires pilotés par modèle.

Formulaire piloté par modèle

Avec un formulaire piloté par modèle, la plupart du travail est effectué dans le modèle; et avec la forme pilotée par modèle, la plupart du travail est effectué dans la classe de composant.

Considérons maintenant de travailler sur le formulaire piloté par modèle. Nous allons créer un formulaire de connexion simple et ajouter l'identifiant de messagerie, le mot de passe et soumettre le bouton dans le formulaire. Pour commencer, nous devons importer dans FormsModule à partir de@angular/core ce qui se fait en app.module.ts comme suit -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot([
         {path: 'new-cmp',component: NewCmpComponent}
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Donc dans app.module.ts, nous avons importé le FormsModule et le même est ajouté dans le tableau des importations comme indiqué dans le code en surbrillance.

Créons maintenant notre forme dans le app.component.html fichier.

<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" >
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel>
   <br/>
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel>
   <br/>
   <input type = "submit" value = "submit">
</form>

Nous avons créé un formulaire simple avec des balises d'entrée ayant un identifiant de messagerie, un mot de passe et le bouton d'envoi. Nous lui avons attribué un type, un nom et un espace réservé.

Dans les formulaires pilotés par modèle, nous devons créer les contrôles de formulaire modèle en ajoutant le ngModel directive et la nameattribut. Ainsi, partout où nous voulons qu'Angular accède à nos données à partir de formulaires, ajoutez ngModel à cette balise comme indiqué ci-dessus. Maintenant, si nous devons lire l'emailid et le passwd, nous devons ajouter le ngModel dessus.

Si vous voyez, nous avons également ajouté le ngForm au #userlogin. lengFormLa directive doit être ajoutée au modèle de formulaire que nous avons créé. Nous avons également ajouté une fonctiononClickSubmit et assigné userlogin.value à lui.

Créons maintenant la fonction dans le app.component.ts et récupérez les valeurs saisies dans le formulaire.

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid);
   }
}

Au dessus app.component.tsfile, nous avons défini la fonction onClickSubmit. Lorsque vous cliquez sur le bouton d'envoi du formulaire, le contrôle accède à la fonction ci-dessus.

Voici comment le navigateur s'affiche -

Le formulaire ressemble à celui ci-dessous. Entrons les données dedans et dans la fonction de soumission, l'identifiant de l'e-mail est déjà entré.

L'identifiant de messagerie est affiché en bas, comme indiqué dans la capture d'écran ci-dessus.

Forme pilotée par modèle

Dans le formulaire piloté par modèle, nous devons importer le ReactiveFormsModule de @ angular / forms et l'utiliser dans le tableau des importations.

Il y a un changement qui entre app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      ReactiveFormsModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Dans app.component.ts, nous devons importer quelques modules pour le formulaire piloté par modèle. Par exemple,import { FormGroup, FormControl } from '@angular/forms'.

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.formdata = new FormGroup({
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

La variable formdata est initialisée au début de la classe et la même chose est initialisée avec FormGroup comme indiqué ci-dessus. Les variables emailid et passwd sont initialisées avec des valeurs par défaut à afficher dans le formulaire. Vous pouvez le laisser vide au cas où vous le souhaiteriez.

C'est ainsi que les valeurs seront vues dans l'interface utilisateur du formulaire.

Nous avons utilisé formdata pour initialiser les valeurs du formulaire; nous devons utiliser la même chose dans le formulaire UIapp.component.html.

<div>
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid" 
         formControlName="emailid">
      <br/>
      
      <input type = "password" class = "fortextbox" name="passwd" 
         placeholder = "passwd" formControlName = "passwd">
      <br/>
      
      <input type = "submit" class = "forsubmit" value = "Log In">
   </form>
</div>
<p>
   Email entered is : {{emailid}}
</p>

Dans le fichier .html, nous avons utilisé formGroup entre crochets pour le formulaire; par exemple, [formGroup] = "formdata". Lors de la soumission, la fonction est appeléeonClickSubmit Pour qui formdata.value est passé.

La balise d'entrée formControlNameest utilisé. On lui attribue une valeur que nous avons utilisée dans leapp.component.ts fichier.

En cliquant sur soumettre, le contrôle passera à la fonction onClickSubmit, qui est défini dans le app.component.ts fichier.

En cliquant sur Connexion, la valeur sera affichée comme indiqué dans la capture d'écran ci-dessus.

Validation du formulaire

Parlons maintenant de la validation de formulaire à l'aide d'un formulaire piloté par un modèle. Vous pouvez utiliser la validation de formulaire intégrée ou également utiliser l'approche de validation personnalisée. Nous utiliserons les deux approches dans le formulaire. Nous continuerons avec le même exemple que nous avons créé dans l'une de nos sections précédentes. Avec Angular 4, nous devons importer des validateurs depuis@angular/forms comme indiqué ci-dessous -

import { FormGroup, FormControl, Validators} from '@angular/forms'

Angular a des validateurs intégrés tels que mandatory field, minlength, maxlength, et pattern. Celles-ci sont accessibles à l'aide du module Validateurs.

Vous pouvez simplement ajouter des validateurs ou un tableau de validateurs requis pour indiquer à Angular si un champ particulier est obligatoire.

Essayons maintenant la même chose sur l'une des zones de texte d'entrée, c'est-à-dire, l'adresse e-mail. Pour l'ID de messagerie, nous avons ajouté les paramètres de validation suivants -

• Required
• Correspondance de motif

C'est ainsi qu'un code subit une validation dans app.component.ts.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

Dans Validators.compose, vous pouvez ajouter la liste des éléments que vous souhaitez valider dans le champ de saisie. En ce moment, nous avons ajouté lerequired et le pattern matching paramètres pour prendre uniquement des e-mails valides.

dans le app.component.html, le bouton d'envoi est désactivé si l'une des entrées du formulaire n'est pas valide. Cela se fait comme suit -

<div>
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid" 
         formControlName = "emailid">
      <br/>
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd">
      <br/>
      <input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit" 
         value = "Log In">
   </form>
</div>
<p>
   Email entered is : {{emailid}}
</p>

Pour le bouton d'envoi, nous avons ajouté désactivé dans le crochet carré, qui a une valeur - !formdata.valid. Ainsi, si le formdata.valid n'est pas valide, le bouton restera désactivé et l'utilisateur ne pourra pas le soumettre.

Voyons comment cela fonctionne dans le navigateur -

Dans le cas ci-dessus, l'identifiant de messagerie entré n'est pas valide, par conséquent le bouton de connexion est désactivé. Essayons maintenant de saisir l'identifiant de messagerie valide et voyons la différence.

Maintenant, l'identifiant de messagerie entré est valide. Ainsi, nous pouvons voir que le bouton de connexion est activé et que l'utilisateur pourra le soumettre. Avec cela, l'identifiant de messagerie entré est affiché en bas.

Essayons maintenant la validation personnalisée avec le même formulaire. Pour une validation personnalisée, nous pouvons définir notre propre fonction personnalisée et y ajouter les détails requis. Nous allons maintenant voir un exemple pour le même.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

Dans l'exemple ci-dessus, nous avons créé une fonction password validation et la même chose est utilisée dans une section précédente du formcontrol - passwd: new FormControl("", this.passwordvalidation).

Dans la fonction que nous avons créée, nous vérifierons si la longueur des caractères saisis est appropriée. Si les caractères sont inférieurs à cinq, il retournera avec le passwd true comme indiqué ci-dessus -return {"passwd" : true};. Si les caractères sont plus de cinq, il le considérera comme valide et la connexion sera activée.

Voyons maintenant comment cela s'affiche dans le navigateur -

Nous n'avons entré que trois caractères dans le mot de passe et la connexion est désactivée. Pour activer la connexion, nous avons besoin de plus de cinq caractères. Entrons maintenant une longueur valide de caractères et vérifions.

La connexion est activée car l'ID de messagerie et le mot de passe sont valides. L'e-mail s'affiche en bas lorsque nous nous connectons.

Les animations ajoutent beaucoup d'interaction entre les éléments html. L'animation était également disponible avec Angular2. La différence avec Angular 6 est que l'animation ne fait plus partie du@angular/core bibliothèque, mais est un package distinct qui doit être importé dans app.module.ts.

Pour commencer, nous devons importer la bibliothèque comme suit -

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

le BrowserAnimationsModule doit être ajouté au tableau d'importation dans app.module.ts comme indiqué ci-dessous -

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Dans app.component.html, nous avons ajouté les éléments html, qui doivent être animés.

<div>
   <button (click) = "animate()">Click Me</button>
   <div [@myanimation] = "state" class = "rotate">
      <img src = "assets/images/img.png" width = "100" height = "100">
   </div>
</div>

Pour le div principal, nous avons ajouté un bouton et un div avec une image. Il existe un événement de clic pour lequel la fonction d'animation est appelée. Et pour le div, le@myanimation La directive est ajoutée et reçoit la valeur comme état.

Voyons maintenant le app.component.ts où l'animation est définie.

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div{
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate{
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})
export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

Nous devons importer la fonction d'animation qui doit être utilisée dans le fichier .ts comme indiqué ci-dessus.

import { trigger, state, style, transition, animate } from '@angular/animations';

Ici, nous avons importé le déclencheur, l'état, le style, la transition et l'animation à partir de @ angular / animations.

Maintenant, nous allons ajouter la propriété animations au décorateur @Component () -

animations: [
   trigger('myanimation',[
      state('smaller',style({
         transform : 'translateY(100px)'
      })),
      state('larger',style({
         transform : 'translateY(0px)'
      })),
      transition('smaller <=> larger',animate('300ms ease-in'))
   ])
]

Le déclencheur définit le début de l'animation. Le premier paramètre est le nom de l'animation à donner à la balise html à laquelle l'animation doit être appliquée. Le deuxième paramètre sont les fonctions que nous avons importées - état, transition, etc.

le stateLa fonction implique les étapes d'animation entre lesquelles l'élément fera la transition. À l'heure actuelle, nous avons défini deux états, plus petit et plus grand. Pour les petits états, nous avons donné le styletransform:translateY(100px) et transform:translateY(100px).

La fonction de transition ajoute une animation à l'élément html. Le premier argument prend les états, c'est-à-dire le début et la fin; le deuxième argument accepte la fonction animée. La fonction d'animation vous permet de définir la durée, le délai et l'accélération d'une transition.

Voyons maintenant le fichier .html pour voir comment fonctionne la fonction de transition

<div>
   <button (click) = "animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src = "assets/images/img.png" width = "100" height = "100">
   </div>
</div>

Une propriété de style a été ajoutée dans le @componentdirective, qui aligne le div. Prenons l'exemple suivant pour comprendre la même chose -

styles:[`
   div{
      margin: 0 auto;
      text-align: center;
      width:200px;
   }
   .rotate{
      width:100px;
      height:100px;
      border:solid 1px red;
   }
`],

Ici, un caractère spécial [``] est utilisé pour ajouter des styles à l'élément html, le cas échéant. Pour le div, nous avons donné le nom de l'animation défini dans le fichier app.component.ts.

En cliquant sur un bouton, il appelle la fonction animer, qui est définie dans le fichier app.component.ts comme suit -

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == ‘larger’? 'smaller' : 'larger';
   }
}

La variable d'état est définie et la valeur par défaut est plus petite. La fonction d'animation change l'état au clic. Si l'état est plus grand, il sera converti en plus petit; et s'il est plus petit, il sera converti en plus grand.

C'est ainsi que la sortie dans le navigateur (http://localhost:4200/) ressemblera à -

En cliquant sur le Click Me bouton, la position de l'image est modifiée comme indiqué dans la capture d'écran suivante -

La fonction de transformation est appliquée dans le ydirection, qui passe de 0 à 100 px lorsque l'utilisateur clique sur le bouton Cliquez sur moi. L'image est stockée dans leassets/images dossier.

Materialspropose 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 6.

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 module @ angular / core. Angular 6 a mis au point un module séparé@angular/materials.. Cela aide l'utilisateur à importer les matériaux requis.

Pour commencer à utiliser des matériaux, vous devez installer deux packages - matériaux et cdk. Les composants matériels dépendent du module d'animation pour les fonctionnalités avancées, vous avez donc besoin du package d'animation pour le même, c'est-à-dire @ angular / animations. Le package a déjà été mis à jour dans le chapitre précédent.

npm install --save @angular/material @angular/cdk

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

{
  "name": "angular6-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": "^6.1.0",
      "@angular/cdk": "^6.4.7",
      "@angular/common": "^6.1.0",
      "@angular/compiler": "^6.1.0",
      "@angular/core": "^6.1.0",
      "@angular/forms": "^6.1.0",
      "@angular/http": "^6.1.0",
      "@angular/material": "^6.4.7",
      "@angular/platform-browser": "^6.1.0",
      "@angular/platform-browser-dynamic": "^6.1.0",
      "@angular/router": "^6.1.0",
      "core-js": "^2.5.4",
      "rxjs": "^6.0.0",
      "zone.js": "~0.8.26"
   },
   "devDependencies": {
      "@angular-devkit/build-angular": "~0.7.0",
      "@angular/cli": "~6.1.3",
      "@angular/compiler-cli": "^6.1.0",
      "@angular/language-service": "^6.1.0",
      "@types/jasmine": "~2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.2.1",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.0",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.3.0",
      "ts-node": "~5.0.1",
      "tslint": "~5.9.1",
      "typescript": "~2.7.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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatButtonModule,
      MatMenuModule,
      FormsModule,
      MatSidenavModule
   ],
   providers: [],
   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,
   BrowserAnimationsModule,
   MatButtonModule,
   MatMenuModule,
   FormsModule,
   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 {
   myData: Array<any>;
   constructor() {}
}

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

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

Ajoutons maintenant le matériel dans 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>
<mat-sidenav-container class = "example-container">
   <mat-sidenav #sidenav class = "example-sidenav">
      Angular 6
   </mat-sidenav>
   <div class = "example-sidenav-content">
      <button type = "button" mat-button  (click) = "sidenav.open()">
         Open sidenav
      </button>
   </div>
</mat-sidenav-container>

Dans le fichier ci-dessus, nous avons ajouté Menu et SideNav.

Menu

Pour ajouter un menu, <mat-menu></mat-menu>est utilisé. lefile et Save As les éléments sont ajoutés au bouton sous mat-menu. 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>.

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()". Voici l'affichage du menu et du sidenav dans le navigateur -

En cliquant opensidenav, il montre la barre latérale comme indiqué ci-dessous -

En cliquant sur Menu, vous obtiendrez deux éléments File et Save As comme indiqué ci-dessous -

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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      MatDatepickerModule,
      MatInputModule,
      MatNativeDateModule
   ],
   providers: [],
   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',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   myData: Array<any>;
   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>

C'est ainsi que le sélecteur de date s'affiche dans le navigateur.

Angular CLI facilite le démarrage de tout projet Angular. Angular CLI est livré avec des commandes qui nous aident à créer et démarrer notre projet très rapidement. Passons maintenant en revue les commandes disponibles pour créer un projet, un composant et des services, changer le port, etc.

Pour travailler avec Angular CLI, nous devons l'avoir installé sur notre système. Utilisons la commande suivante pour la même chose -

npm install -g @angular/cli

Pour créer un nouveau projet, nous pouvons exécuter la commande suivante dans la ligne de commande et le projet sera créé.

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve //

ng serve // ​​va compiler et vous pouvez voir la sortie de votre projet dans le navigateur -

http://localhost:4200/

4200 est le port par défaut utilisé lors de la création d'un nouveau projet. Vous pouvez changer le port avec la commande suivante -

ng serve --host 0.0.0.0 --port 4201

Le tableau suivant répertorie quelques commandes importantes requises lors de l'utilisation de projets Angular 4.

Composant	ng g composant nouveau-composant
Directif	ng g directive nouvelle directive
Tuyau	ng g pipe new-pipe
Un service	ng g service nouveau-service
Module	module ng g mon-module

Chaque fois qu'un nouveau module, un composant ou un service est créé, la référence de celui-ci est mise à jour dans le module parent app.module.ts.