Creare un component che prende dati in input in Angular 2

di Stefano Mostarda, in HTML5, Angular 2,

In Angular 2 un component è una classe che gestisce un frammento di HTML. da questa definizione ne deriva che in una pagina possiamo avere uno o più component. Possiamo anche avere component annidati all'interno di un altro component. Ad esempio possiamo avere un component che gestisce una textbox con un datepicker.
In questi casi spesso capita di dover passare dati in input al component (la data iniziale nel caso del datepicker). Per fare questo dobbiamo creare nel component una o più proprietà che rappresentano i dati in input e poi marcarle con il decorator @input.
Una volta fatto questo, nel codice HTML di chi usa il component basta aggiungere al tag del component un attributo con il nome della proprietà e mettere come valore dell'attributo il valore che si vuole passare.

public class NameComponent {
  ...
  // inner component
  @Input('Name') name: string;
  ...
}

//utilizzatore component
<name-component name="stefano mostarda"></name-component>

A questo punto la view del component può visualizzare la proprietà name nella sua view.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi