Angular7 - Composants

La majeure partie du développement avec Angular 7 se fait dans les composants. Les composants sont essentiellement des classes qui interagissent avec le fichier .html du composant, qui est affiché sur 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

Et si vous avez sélectionné le routage angulaire lors de la configuration de votre projet, les fichiers liés au routage seront également ajoutés et les fichiers sont les suivants -

app-routing.module.ts

Les fichiers ci-dessus sont 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 { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component';

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   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 avec la ligne de code ci-dessous -

ng g component new-cmp

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

C:\projectA7\angular7-app>ng g 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 (477 bytes)

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

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 app.modulefichier .ts comme suit -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
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,
      AppRoutingModule 
   ], 
   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', // selector to be used inside .html file. 
   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 dans lequel il y 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 -

<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>Angular7App</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. Nous allons jeter 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).catch(err => console.error(err));

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 { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule '
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

Ici le 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 7'; 
}

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 styleUrl sont indiqué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 le 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 templateUrl et styleUrl.

Le .html appelé new-cmp.component.html est le suivant:

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

Le navigateur affiche l'écran suivant -

Nous ne voyons rien concernant le nouveau composant affiché. Le nouveau composant créé a un fichier .html avec les détails suivants -

<p>
   new-cmp works!
<p>

Mais nous n'obtenons pas la même chose dans le navigateur. Voyons maintenant les modifications nécessaires pour afficher le contenu des nouveaux composants dans le navigateur.

Le sélecteur 'app-new-cmp'est créé pour un nouveau composant à partir de new-cmp.component.ts comme indiqué ci-dessous -

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

Le sélecteur, c'est-à-dire, app-new-cmp doit être ajouté dans app.component.html, c'est-à-dire que le parent principal créé par défaut 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-cmp7></app-new-cmp>

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

Ajoutons quelques détails supplémentaires au nouveau composant créé et voyons l'affichage dans le navigateur.

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 newcomponent et la valeur est «Entré dans le nouveau composant créé».

La variable ci-dessus est ajouté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 new-cmp.component.htmlLe fichier s'affiche sur le navigateur. Nous ajouterons également du CSS pour le nouveau composant dans le fichier new-cmp.component.css comme suit -

p { 
   color: blue; 
   font-size: 25px; 
}

Nous avons donc ajouté une couleur bleue et une taille de police de 25 pixels pour les balises p.

L'écran suivant sera affiché dans le navigateur -

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.