[Angular 4] Récupérer une valeur d'attribut pour le composant

Bonjour,

je souhaite récupérer une valeur d'un attribut html depuis la vu pour la traiter dans le composant
voici ce que j'ai testé:
page.component.html

Code:

---

1 2 3 4 5 6 7

<p > <span (leprix)="trois euro">   </span> </p>

---

voici le composant:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

import { Component, OnInit } from '@angular/core';   @Component({ selector: 'app-prix', templateUrl: './prix.component.html', styleUrls: ['./prix.component.css'] })   export class PrixComponent implements OnInit { public prix:string ='je suis le prix';     constructor() { console.log(leprix); }       ngOnInit() { }       }

---

comment je dois faire pour afficher dans ma console "trois euros" ?
je souhaite que "trois euro" une chaine qui provient seulement du fichier html (pour le moment je souhaite pas le générer depuis un modèle).
merci de vos réponse

Il manque la déclaration de ton paramètre leprix cf doc.

Mais ton composant n'est pas utilisé dans le template que tu as fourni.

Tu devrais faire les tutoriels.

merci de ta réponse, tu veux dire déclarer en @input ?

@input c'est bien la variable qui part du template au composant et
@output c'est la variable qui part du composant en template ?

sinon c'est bien les parenthèse qu'il faut mettre pour transmettre de la vue au composant ?

Code:

---

1 2 3

(depuisHTML)="abc" // je transmet depuis html au composant [depuisHTML]="abc" // la vue html va récupérer dans le composant l'attribut qui s'appelle depuisHTML

---

voici ce que j'ai testé:

Code:

---

1 2 3 4 5 6

<div (depuisHTML)="abc" class="menu four wide" *ngFor="let prix of tarif"> <h1> numéro: {{prix.id}} * le produit: {{prix.produit}} * le prix: {{prix.prix}} </h1> </div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import { Component, OnInit, Input, Output } from '@angular/core'; import {HttpModule,Http, Response,RequestOptions,Headers} from '@angular/http';   @Component({ selector: 'app-prix', templateUrl: './prix.component.html', styleUrls: ['./prix.component.css'] })   export class PrixComponent implements OnInit {   @Input() depuisHTML:any;     tarif: Object;   constructor(public http:Http) { console.log(this.depuisHTML); }

---

Code:

---

1 2

indefined

---

est ce que depuis HTML doit être situé obligatoirement situé à l'intérieur de la balise <app-prix> ?
ou peut être mis dans le composant app-prix comme je l'ai codé dans prix.component.html .

Dans ton template à aucun moment je ne vois d'appel au composant. Il n'est donc pas invoqué.

Ne le prends pas mal mais tes questions sont vraiment de l'ordre des tutoriels, je t'invite à les faire plutôt que de partir à l'aveuglette.

Merci de ta réponse, mais je ne comprend pas du premier coup comment réussir à récupérer la valeur voulu ...,

j'ai essayer ceci:

Code:

---

1 2	<article #art (click)="donneArticle(art)" class="recupe_moi_ce_qui_est_ici" >

---

dans le composant j'ai ma méthode:

Code:

---

1 2 3 4

donneArticle(art){ console.log(art); }

---

en cliquant sur la zone article, j'arrive à avoir tout le html il suffira de le décomposer pour récupérer .
par contre j'ai du faire un clique pour avoir toute la balise, comment on s'y prend pour faire un clique automatique.

Comme dit Marco, revois tranquillement les tutoriels. Je te conseille cette tram :

- Déclaration d'un composant
- Utilisation d'un composant
- Passer un paramètre dans le composant (avec @Input)
- Faire appel à un event depuis ton composant (avec @Output)

Source des tutoriels : Anglais , Français

Est-ce que tu pourrais poster au fur et à mesure que tu avances dans le tutoriel pour qu'on puisse t'aider?

En espérant d'avoir aidé :)

merci du tip,
j'ai saisi qu'il faut un événement pour pouvoir récupérer une valeur d'un attribut