Discussion :

[keokaz]

Bonjour,

je souhaite transmettre lors d'un clique d'un menu une valeur d'attribut dans un composant enfant.

voici ma structure angular:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

app.componement.ts => contact.componement.ts

dans le décorateur contact.componement.html j'ai mis le formulaire de contact:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<form class="ui form contact" [class.cacher]="isHideContact">

isHideContact à true, le formulaire est caché à false le fomulaire est présent:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.cacher{
    display:none;
}

voici mon contact.componment.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Component, OnInit,Input } from '@angular/core';
 
@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
 
export class ContactComponent implements OnInit {
 
 
 
isHideContact = true; //à false  formulaire de contact apparaît
  constructor() { }
 
  ngOnInit() {
  }
 
  afficheContact(){
     this.isHideContact= false; //affiche le formulaire de contact dès qu'on clique sur contact
  }
}

Jusqu'a là cela fonctionne assez bien, dans le composant parent j'ai mis un lien "contact" à cliquer,
je souhaite que si je clique dessus, l'attribut isHideContact soit initialisé à false

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li class="column" (click)=afficheContact()>Contactez-moi</li>

l'attribut idHideContact n'est accéssible qu'en local, comment s'y prendre pour initialiser cette attribut pour afficher mon formulaire ?

merci de vos réponses

[pterrat]

Tu dois utiliser l'attribut @Input dans ton composant enfant et le transmettre depuis ton composant parent
Dans ton cas, tu peux utiliser @Input pour ta variable isHideContact

Je peux te rediriger vers un article qui explique en détails comment cela fonctionne : ici

[keokaz]

merci du tuto j'ai pu transmettre mon input et output à travers les composantes.