IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Masquer un composant avec ngIf ou hidden


Sujet :

Angular

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Homme Profil pro
    Reconversion
    Inscrit en
    Novembre 2018
    Messages
    503
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : Novembre 2018
    Messages : 503
    Par défaut Masquer un composant avec ngIf ou hidden
    Bonjour,

    J'ai dans un composant parent 2 boutons btn1 et btn2 qui appellent un même composant enfant qui contient respectivement dans son html :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    -<app-composantA></app-composantA>
    -<app-composantB></app-composantB>
    -<app-composantC></app-composantC>

    Losrque je clique surbtn1, j'aimerais afficher :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    -<app-composantA></app-composantA>
    -<app-composantB></app-composantB>

    quand je clique sur btn2, je souhaiterais afficher seulement
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    -<app-composantC></app-composantC>

    J'ai pensais faire ça avec la directive ngIf et un boolean (test ds l'exemple) passé en Input()

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <app-composantA *ngIf="!test"></appcomposantA>
    <app-composantB *ngIf="!test"></<app-composantB>
    <app-composantC *ngIf="test"></app-composantC>
     
    <button label="btn1" (click)="test= false">btn1</button>
    <button label="btn2"  (click)="test= true">btn2</button>
    est ce que ça vous parait correct ? vaudrait-il mieux utiliser hidden ? merci

  2. #2
    Membre extrêmement actif
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Par défaut
    Faut partir de ce principe: Quand on fait de l'angular, on exploite sa technologie.
    ngIf est fait exprès pour répondre à ce besoin


    ** pour info: Comment fonctionne Angular ?
    Angular travaille sur le DOM (à travers un DOM virtuel)
    Il insère des bouts de DOM, il en supprime.

    si je prends cet exemple:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <app-composantC *ngIf="test"></app-composantC>

    si test == true alors Angular insère le DOM qui représente le composant dans le DOM général de la page. le composant apparait !
    si faux alors Angular ne fait rien! donc à l'écran tu n'as rien !


    ** pour info, qu'est ce que le DOM ?
    1ere couche: tu as les balises html
    c'est une représentation simple, le navigateur en réalité ne le comprends pas.

    Le navigateur va convertir les balises html en classes objets. Ainsi une balise HTML <....> devient un élément HTML sous la forme d'un objet avec ses propriétés et ses fonctions.
    D'ailleurs la plupart des instructions des balises HTML ressemblent pas mal à son équivalent DOM. par exemple, "value" d'une balise <input , on le retrouve dans le DOM comme propriété avec le même nom: value de l'élément input en objet
    C'est ça le DOM et c'est ce qu'exécute le navigateur !

    ** d'ailleurs, si tu vas plus loin dans Angular
    sache qu'on peux manipuler directement le DOM. En modifiant ses éléments en objet, modifier des propriétés de ce que l'on veut.. le css (color, background...) et accéder à ses fonctions.. les évènements de click, ou mousenter etc....

  3. #3
    Membre éprouvé
    Homme Profil pro
    Reconversion
    Inscrit en
    Novembre 2018
    Messages
    503
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : Novembre 2018
    Messages : 503
    Par défaut
    ok merci pour ta réponse complète, du coup je pars sur du ngIf alors

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [C#] Déplacer un composant avec la souris
    Par GéniuS77 dans le forum Windows Forms
    Réponses: 8
    Dernier message: 07/04/2011, 23h12
  2. Comment utiliser masquer une checkbox avec hidden
    Par sebac dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 02/06/2009, 10h47
  3. Comment initialiser une liste de composants avec une boucle ?
    Par EricSid dans le forum Composants VCL
    Réponses: 5
    Dernier message: 06/04/2005, 18h46
  4. Créer composant avec TQuery->pb suppression a la concepti
    Par marghett dans le forum Bases de données
    Réponses: 12
    Dernier message: 24/07/2004, 07h42
  5. Réponses: 1
    Dernier message: 02/01/2003, 12h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo