Popup simple en utilisant AngularJS

1. Installation de dépendances dans Angular
2. Installation de Bootstrap en utilisant npm install bootstrap jquery popper.js dans Angular
3. Installation de matériel Angular sur notre projet en Angular
4. Erreur susceptible d’être rencontrée lors de la création d’une fenêtre contextuelle dans Angular

La beauté d’activer le popup sur une page Web est un excellent moyen d’afficher une courte information sur un élément.

Popup est également un moyen idéal pour donner une invite sur l’action, de telle sorte que lorsqu’un utilisateur clique sur un élément, il ouvre une fenêtre contextuelle pour indiquer que l’action est enregistrée.

L’Angular étant un framework qui sert à de nombreuses fins, nous devrons installer quelques dépendances avant de faire fonctionner le modal popup.

Installation de dépendances dans Angular

Il est idéal d’utiliser Visual Studio Code pour travailler sur des projets Angular car il crée un environnement où vous pouvez tout faire au même endroit.

Installation de Bootstrap en utilisant npm install bootstrap jquery popper.js dans Angular

Après avoir créé un nouveau projet Angular, nous nous dirigeons ensuite vers le terminal et installons Bootstrap en utilisant npm install bootstrap jquery popper.js.

Après une installation réussie, on ouvre le dossier du projet sur VS Code, on se dirige vers angular.json, sous architect > build key, on fait les ajouts suivants :

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Installation de matériel Angular sur notre projet en Angular

La prochaine consiste à installer Angular Material sur notre projet. Le matériel Angular permet d’ajouter une nouvelle peau / un nouveau thème qui embellit notre page Web.

Pourtant, dans le dossier de projet du terminal, nous exécutons la commande suivante, ng add @angular/material, pour installer le matériau Angular.

Nous recevrons une liste de skins parmi lesquels choisir. Après avoir sélectionné, nous avons simplement choisi Yes pour les autres options.

Maintenant que les dépendances ont été installées avec succès, nous allons maintenant procéder au codage approprié.

En plus des composants créés lors de la création d’un projet, nous aurons besoin de fabriquer des composants supplémentaires.

Nous allons le faire en allant dans le terminal, dans le dossier du projet, et en tapant ng g component popup dans le terminal. Après l’installation, nous devrions voir des composants supplémentaires installés.

À l’avenir, nous nous dirigeons vers app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { PopUpComponent } from './pop-up/pop-up.component';

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

Notez que nous avons effectué quelques importations supplémentaires ci-dessus, importé le BrowserAnimationsModule, MatDialogModule et le PopUpComponent, et ajouté le BrowserAnimationsModule, MatDialogModule au tableau des importations.

Ensuite on travaille sur popup.component.html et on fait quelques entrées :

<h2> Welcome {{firstName}} </h2>

<button class="btn btn-primary">
    Press
</button>

Passons maintenant au app.component.ts, ici nous importons le MatDialog et le PopUpComponent. Ici, nous avons également mis en place un code qui décide quelles données sont affichées lorsque vous cliquez sur un bouton.

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { PopUpComponent } from './pop-up/pop-up.component';


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

  constructor(private dialogRef : MatDialog){}

  openDialog(){
    this.dialogRef.open(PopUpComponent,{
      data : {
        name : 'Samuel'
      }
    });
  }
}

Le app.component.html reçoit également quelques codes mineurs ajoutés ; nous concevons le bouton sur lequel le message contextuel s’affiche lorsqu’il est cliqué.

<button class="btn btn-primary" (click)="openDialog()">
  Click to open pop up
</button>

Ensuite, nous passons au pop-up.component.ts et effectuons un peu de codage. Ce qui se passe ici, c’est que nous importons d’abord Inject et MAT_DIALOG_DATA dans notre composant, puis nous utilisons ces importations ensemble pour ajouter un nom au message contextuel.

import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-pop-up',
  templateUrl: './pop-up.component.html',
  styleUrls: ['./pop-up.component.css']
})
export class PopUpComponent implements OnInit {

  firstName;
  constructor(@Inject(MAT_DIALOG_DATA) public data) {
    this.firstName = data.name
  }

  ngOnInit(): void {
  }
}

Nous avons tous terminé, exécutons le projet et le compilons avec succès.

Erreur susceptible d’être rencontrée lors de la création d’une fenêtre contextuelle dans Angular

Juste au cas où vous rencontrez cette erreur, un argument de type any[] n’est pas assignable au paramètre de type lors de la tentative d’exécution du projet.

Tout ce que nous avons à faire est d’aller dans tsconfig.json, d’ajouter cet extrait, *noImplicitAny*: true et de remplacer strict: true par strict: false.