Discussion :

[olivier252]

Bonjour,

Je cherche à savoir si il est possible par les Input de récupérer une variable déclarée dans une balise d'un élément du HTML d'un parent. J'espère être clair, sinon je posterai un exemple de ce que je veux formuler.
merci encore

[krakatoa]

exemple

[olivier252]

ok

Pour le composant parent :

Code :

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

1
2
3
4
 
<app-parent>
  <button (click)="doSometnuing(); [toto]=true"<button>
</app-parent>

Je voudrais récupérer "toto dans mon iput...
Composant enfant :

Code :

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

1
2
3
4
5
6
 
export class searchForToto {
.........
@Input toto: boolean;
.........
}

... afin de l'utiliser dans le HTML de mon enfant

[krakatoa]

ce n'est pas comme ça qu'on crée et utilise un composant web



** création du composant app-parent

ng g c parent


app-parent.html

Code :

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

1
2
 
  <button (click)="doSometnuing();">  click ici <button>

app-parent.ts

Code :

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

1
2
3
4
5
6
7
8
9
 
...
...
@Input() toto;
 
doSometnuing() {
  console.log(this.toto);
}
...

** utilisation:

app.component.html

Code :

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

1
2
3
4
 
<app-parent [toto]="true"></app-parent>
 
<app-parent [toto]="myBool"></app-parent>

app.component.ts

Code :

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

1
2
3
4
5
 
...
...
  myBool = false;
...

ça fait partie des bases d'Angular qu'il faut acquérir. il existe de nombreux tutos sur internet

[olivier252]

j'aurais dû écrire

pour mon comosant parent :
Au niveau du HTML:

Code :

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

1
2
3
4
 
<button (click)="[toto]=true">cliquez ici<button>
D'autres balises......
<app-enfant></enfant>

Est-il possible de récupérer "toto" en @Input dans app-enfant.ts dès lors que le bouton est cliqué ?
Vu ta réponse, je pense que non

[krakatoa]

.html

Code :

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

1
2
3
4
5
6
7
8
 
<button (click)="myVal=true">cliquez ici<button>
ou
<button (click)="fnClick(true)">cliquez ici<button>
 
Dautres balises......
 
<app-enfant  [toto]="myVal"></enfant>

.ts

Code :

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

1
2
3
4
5
6
7
8
 
...
  myval;
...
  fnClick(value) {
     this.myVal = value;
  }
...

app-enfant.ts

Code :

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

1
2
3
4
 
@Input() toto;           //    <---  myVal
...
...

app-enfant.html

Code :

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

1
2
3
4
 
<ng-container *ngIf="toto">
  {{ toto }}
</ng-container>

[olivier252]

super, merci