Angular Component

Sei agli inizi con Angular e non è ancora chiaro cosa sia un Component?

Perfetto, sei sull’articolo giusto per capire cosa è un Component, come crearlo e a cosa serve in una applicazione Angular!

Prima di iniziare a scrivere codice, capiamo cosa è un Component Angular:

Un Component Angular è sostanzialmente costituito da 3 parti:

  • Template che corrisponde alla view in HTML5
  • Class scritta in typescript con i suoi dati e metodi
  • Metadata informazioni che fanno capire ad Angular che si parla di un component e non una banale classe, per fare ciò si usa il Decorator
    @Component
    sopra la classe.

Partiamo dal progetto base, per crearlo puoi seguire questo articolo.

Andiamo a vedere come è formato il Component principale cioè app.component.ts:

Possiamo subito vedere la class AppComponent composta da una unica proprietà che è title con valore iniziale my-app.

A questa classe abbiamo alcuni Metadata all’interno del Decorator @Component questo fa capire ad Angular che non parliamo di una normale class ma bensì di un Component.

All’interno del Decorator abbiamo alcuni metadata:

  • selector: selettore dove il template sarà renderizzato (nell’index.html file troveremo <app-root></app-root>)
  • templateUrl: path del file html dove recuperare il template
  • styleUrls: array di path dove recuperare i fogli di stile

Ma vediamo come creare un nuovo component con la Angular CLI, semplicemente aprendo il terminale e spostandoci nella cartella dove vogliamo generarlo possiamo utilizzare il comando:

ng g c test

dove g sta per generate, c per component e test è semplicemente il nome che vogliamo dare al nostro nuovo Component.

La cartella test verrà creata dalla Angular CLI, con al suo interno quattro files:

  • test.component.html: il template (di default <p>test works!</p>)
  • test.component.scss: il foglio di stile
  • test.component.ts: il typescript con al suo interno la classe
  • test.component.spec.ts: lo spec che al momento non ci interessa e possiamo anche cancellarlo

Automaticamente anche il file app.module.ts è stato aggiornato includendo questo nuovo component nell’array Declaration.

Andremo quindi a modificare il template di app.component e cioè: app.component.html in modo da aggiungere il selettore del nostro test.component che sarà app-test

A questo punto spostandoci dal terminale nella root e lanciando l’applicazione con il comando:

ng serve –open

potremo verificare che il nuovo component è funzionante e correttamente visualizzato all’interno dell’applicazione!

Lascia una risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *