Autour des @Input

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

exemple

ok

Pour le composant parent :

Code:

---

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:

---

1 2 3 4 5 6

export class searchForToto { ......... @Input toto: boolean; ......... }

---

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

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:

---

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

---

app-parent.ts

Code:

---

1 2 3 4 5 6 7 8 9

... ... @Input() toto;   doSometnuing() { console.log(this.toto); } ...

---

** utilisation:

app.component.html

Code:

---

1 2 3 4

<app-parent [toto]="true"></app-parent>   <app-parent [toto]="myBool"></app-parent>

---

app.component.ts

Code:

---

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

j'aurais dû écrire

pour mon comosant parent :
Au niveau du HTML:

Code:

---

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

.html

Code:

---

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:

---

1 2 3 4 5 6 7 8

... myval; ... fnClick(value) { this.myVal = value; } ...

---

app-enfant.ts

Code:

---

1 2 3 4

@Input() toto; // <--- myVal ... ...

---

app-enfant.html

Code:

---

1 2 3 4

<ng-container *ngIf="toto"> {{ toto }} </ng-container>

---

super, merci