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 :
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]](https://i0.wp.com/devtobecurious.fr/wp-content/uploads/2018/12/tour-of-heroes-modal-et-materialize4_thumb.gif?resize=1383%2C921&ssl=1 "tour of heroes - modal et materialize[4]")
![tour of heroes - modal et materialize[4]](https://i1.wp.com/devtobecurious.fr/wp-content/uploads/2018/12/tour-of-heroes-modal-et-materialize4-1.gif?ssl=1 "tour of heroes - modal et materialize[4]")
