Ouvrir une modale Materialize - Découvrir Angular–Mon premier projet - Formations informatiques, nouvelles technologies et NTIC | Dev to be curious

  • Home
  • Angular
  • Ouvrir une modale Materialize – Découvrir Angular–Mon premier projet
By: Evan Boissonnot    30 décembre 2018  

Maintenant que nous avons mis en place notre application, il est temps de s’amuser un peu, vous ne pensez pas ?
Et si, lors de l’édition, au lieu de la visualiser en bas de page, on pouvait l’observer en modal, avec un bel effet css ?

Enfin de cet article, nous obtiendrons ainsi cet effet :

tour of heroes - modal et materialize

Utilisation du framework Materialize

Avant, tout rendez-vous sur le site Materialize pour récupérer le css et le javascript dédié.

Puis appelons-les depuis notre page index.html :

<!doctype html>

<html lang= »en »>

<head>

<meta charset= »utf-8″>

<title>My website</title>

<base href= »/ »>

<meta name= »viewport » content= »width=device-width, initial-scale=1″>

<link rel= »stylesheet » href= »https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css »>

<link rel= »icon » type= »image/x-icon » href= »favicon.ico »>

</head>

<body>

<app-root></app-root>

<script src= »https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js »></script>

</body>

</html>

Utilisons le Modal proposé par Materialize

Sur le site de Materialize, ils nous indique que nous devons avoir deux parties Html distinctes :

Le lien pour ouvrir la Modal

Ce lien va faire référence sur la même page au bloc Html de la Modal.

 <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

Le bloc html de la Modal

Le bloc Html avec identifiant modal1 représente la Modal.

  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

S’assurer de l’initialisation, depuis le Component Angular

Or, lorsque l’on clique sur le lien Modal, rien ne fonctionne.

Il s’agit ici d’une subtilité liée à Angular lui-même. Chaque component ne va être chargé qu’au bon moment. Donc lorsque le javascript de l’api Materialize va tenter d’initialiser le html, pour lui, il n’y aura rien !

En effet, au chargement de la page : on n’a qu’un seul bloc html : <app-root></app-root>.


Initialisation depuis un Component

Pour s’assurer sur Materialize initialise bien la Modal, nous devons l’activer via le javascript.

Voici les étapes à suivre :

1. Déclarer une variable de type any avant le Component

Avant la déclaration du Component, déclarez une variable ainsi :

declare var M: any;

Pourquoi M ?
Lorsque l’on regarde l’api sur le site Materialize, on note qu’ils nous invitent à initialiser la Modal ainsi : 

var instances = M.Modal.init(elems, options);

Ainsi, nous anticipons un late-binding javascript du framework javascript Materialize avec le M.

2.  Déclarer une variable qui représentera un objet Html dans la Vue

@ViewChild(‘modal’) modal: ElementRef;

Ici, nous indiquons qu’il y aura un objet Html qui aura un identifiant Angular #modal.

3. Modifier le bloc html du Modal pour avoir l’identifiant Angular

Nous avons ici à ajouter #modal dans le bloc Html de la Modal :

<div id= »modal1″ #modal class= »modal » >

<div *ngIf= »hero »>

<div class= »modal-content »>

<h4>{{ hero.name | uppercase }}</h4>

<label for= »name »>Name : </label>

<input type= »text » [(ngModel)]= »hero.name »>

</div>

<div class= »modal-footer »>

<a href= »#! » (click)= »save() » class= »modal-close waves-effect waves-green btn-flat »>Enregistrer</a>

<a href= »#! » class= »modal-close waves-effect waves-green btn-flat »>Fermer</a>

</div>

</div>

</div>

4. Initialiser la Modal depuis le Component

Après s’être assuré que la Vue est bien chargée, on va demander à Materialize d’initialiser la Modal.

ngAfterViewInit(): void {

  M.Modal.init(this.modal.nativeElement);

}

Notons ici que la variable modal permet d’accéder au nativeElement qui est le vrai objet Html.

5. Déclencher l’ouverture de la Modal, via un click depuis le Component

Ici, rien à faire ! Une fois initialisée, la Modal va s’ouvrir toute seule grâce au déclencheur (donc au clic sur le anchor):

<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

NOTE: Si vraiment ça ne se déclenche pas chez vous, vous pouvez le faire via un click dans le Component : instance.open();


And voilà : 
tour of heroes - modal et materialize[4]