Creare un componente Angular manualmente

I componenti Angular come sappiamo possono essere generati facilmente tramite CLI usando il comando ng

$ ng g c [name]

g sta per generate, c sta per component e poi va specificato un nome, possiamo creare un componente Angular anche manualmente se per caso ne avessimo l'esigenza, di seguito vedremo come procedere.

Un'applicazione Angular ha una struttura come la seguente

per creare un componente manualmente senza fare uso del comando ng, innanzitutto bisogna creare una sottocartella nella cartella src/app col nome del nostro componente, se per esempio vogliamo creare un componente denominato hello avremo una struttura simile a questa

per convenzione il nome di un componente Angular deve essere così composto [name].component.ts, .component indica che si tratta di un componente e .ts che è un file typescript, quindi nella cartella hello che abbiamo creato in precedenza creiamo un file hello.component.ts così composto

hello.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<h3>Hello World</h3>`
})
export class HelloComponent {}

la prima cosa che andiamo a mettere è il decoratore @Component che è una funzione che va ad aggiungere delle funzionalità ad una classe, quindi in Angular per poter avere un componente dobbiamo avere una classe ed esportare questa classe per poter utilizzare il componente, per convenzione la classe si chiama HelloComponent cioè il nome del componente Hello più la parola chiave Component, essendo @Component una funzione che riceve in ingresso un oggetto di configurazione, questo oggetto deve avere come minimo la proprietà template che è il codice html, e la proprietà selector che indica il tag da utilizzare per poter mettere questo componente nell'html, in questo caso è app-hello.

Creato il nostro componente il passo successivo è di registrarlo nel app.module.ts in modo da poterlo utilizzare

app.module.ts

..................
..................

import { HelloComponent } from './hello/hello.component';

@NgModule({
  declarations: [
    AppComponent, 
    HelloComponent
  ],

..................
..................

aggiungiamo HelloComponent all'oggetto declarations.

Adesso possiamo utilizzare il componente hello inserendo nel codice html il seguente tag

<app-hello></app-hello>

e in questo esempio vedremo la scritta

Hello World

Questo è un semplice caso d'uso di un componente Angular creato manualmente, che come visto abbiamo inserito il codice html all'interno del componente stesso, possiamo creare un file separato per inserire il codice html che il componente dovrà mostrare, per fare ciò creiamo sempre nella cartella hello un file hello.component.html

hello.component.html

<h3>Hello World</h3>

e invece di usare la proprietà template usiamo la proprietà templateUrl per indicare dove si trova il template, quindi modifichiamo hello.component.ts specificando il percorso

hello.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: 'hello.component.html'
})
export class HelloComponent {}

avremo lo stesso risultato di prima.

Possiamo anche aggiungere del codice css personalizzato per questo componente, basta creare sempre nella cartella hello un file hello.component.css dove inserire le proprietà css per personalizzare il componente, alla fine il nostro componente sarà così strutturato