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 :
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>
Sur le site de Materialize, ils nous indique que nous devons avoir deux parties Html distinctes :
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 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>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>.
Pour s’assurer sur Materialize initialise bien la Modal, nous devons l’activer via le javascript.
Voici les étapes à suivre :
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.
@ViewChild(‘modal’) modal: ElementRef;
Ici, nous indiquons qu’il y aura un objet Html qui aura un identifiant Angular #modal.
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>
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.
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.com/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.com/wp-content/uploads/2018/12/tour-of-heroes-modal-et-materialize4-1.gif?ssl=1 "tour of heroes - modal et materialize[4]")