web-dev-qa-db-fra.com

angular 6 popup modal avec contenu dynamique

Dans mon projet, j'ai une liste d'utilisateurs d'environ 50 utilisateurs. En cliquant sur chaque nom d'utilisateur, les informations de l'utilisateur correspondant doivent s'afficher dans la fenêtre contextuelle modale.

Je ne sais pas comment charger le contenu par ID dans la fenêtre contextuelle de mon code.

J'ai 2 composants. Liste d'utilisateurs et détails de l'utilisateur.

<li><a href="javascript:void()" data-toggle="modal" data-target="#personal-details">user 1</a></li>
<li><a href="javascript:void()" data-toggle="modal" data-target="#personal-details">user 2</a></li>...

 <!-- POPUP PERSONAL DETAILS START HERE -->
<div class="modal fade" id="personal-details" role="dialog">
    <div class="modal-dialog">        
      <!-- Modal content-->
      <div class="modal-content">           
        <div class="modal-body">             
            <app-userdetails></app-userdetails> 
        </div>
      </div>
    </div>
  </div>
<!-- POPUP PERSONAL DETAILS END HERE -->

Le sélecteur <app-userdetails></app-userdetails> récupéré à partir d'un autre composant (composant de détails utilisateur).

Ceci est ma structure de conception HTML. De cette façon, la fenêtre contextuelle modale s'affiche avec le même contenu. Maintenant, je veux personnaliser cette section avec mes données en temps réel de DB. Si c'est le cas, comment transmettre l'ID utilisateur à un autre composant.

S'il vous plaît, aidez-moi à résoudre ce problème

typescriptangular6
5
Sam Hanson

Je recommanderais fortement de regarder la bibliothèque [ng-bootstrap] [1] pour leur modèle. L'avantage immédiat de cela est qu'il supprime la dépendance à jQuery de votre application, ce qui peut être pénible à utiliser dans Angular (selon mon expérience)!

En utilisant la bibliothèque ng-bootstrap, vous passerez autant de paramètres d'entrée que vous le souhaitez

const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.user = myUserObject;
modalRef.componentInstance.title = 'My First ng-bootstrap Model';

En rassemblant tout cela, je suggérerais ce qui suit:

  1. Créez un service qui communique avec la base de données, contenant une méthode pour obtenir tous les noms d'utilisateur, identifiants, etc. (informations de haut niveau pour afficher l'écran).
  2. Sur votre premier écran, appelez le service ci-dessus pour obtenir les informations de haut niveau nécessaires et les rendre à l'utilisateur. (Essayez de travailler avec des observables et le tuyau asynchrone si possible, Todd Moto a un excellent [tutoriel] [2] à ce sujet)
  3. Lorsqu'un utilisateur clique sur un identifiant, utilisez à nouveau le service, mais cette fois en transmettant l'identifiant de l'utilisateur et récupérez un objet utilisateur qui à son tour peut être transmis au modèle et rendu comme vous le souhaitez :)

J'espère que cela répond à votre question, faites-le moi savoir si non. Adam

[1]:!) https://ng-bootstrap.github.io/#/components/modal/examples

[2]:!) https://toddmotto.com/angular-ngif-async-pipe

4
adamturner
 The working Modal with content .I hope this is very helpful

 Angular 6 Modal Directive Component. The custom modal directive is used for 
 adding  modals anywhere in your angular application.

https://stackblitz.com/edit/angular-iybx4hangular6-custom-popup

0
Vijay Chauhan