Usare @Input per leggere i parametri di routing in Angular 16

Dalla versione 16 di Angular possiamo leggere i parametri di routing attraverso @Input.

E sinceramente la trovo una bella comodità.

In questo articolo vediamo come usarlo e quali modifiche adottare.

Partiamo dall'esempio classico.

Partiamo dal routing:

import {NgModule} from '@angular/core';
import {RouterModule} from "@angular/router";
import {PaginaComponent} from "./pagina/pagina.component";
import {HomeComponent} from "./home/home.component";

@NgModule({
    declarations: [],
    imports: [
        RouterModule.forRoot([
            {path: '', component: HomeComponent},
            {path: 'pagina/:nome', component: PaginaComponent},
        ])
    ],
    exports: [RouterModule]
})

export class AppRoutingModule {
}

Abbiamo solo due pagine.

Nella home abbiamo solo un link che riporta all'altra pagina:

<a [routerLink]="['/pagina/matteo']" routerLinkActive="active">Vai alla pagina</a>

Invece nella seconda pagina abbiamo questo:

import {Component, inject, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";

@Component({
    selector: 'app-pagina',
    templateUrl: './pagina.component.html',
    styleUrls: ['./pagina.component.css']
})

export class PaginaComponent implements OnInit{
    private route = inject(ActivatedRoute);

    ngOnInit(): void {
        const nome = this.route.snapshot.paramMap.get('nome');
        if (nome) {
            console.log(nome);
        }
    }
}

Se vogliamo usare @Input, dobbiamo fare una modifica alle routes:

import {NgModule} from '@angular/core';
import {RouterModule} from "@angular/router";
import {PaginaComponent} from "./pagina/pagina.component";
import {HomeComponent} from "./home/home.component";

@NgModule({
    declarations: [],
    imports: [
        RouterModule.forRoot([
                {path: '', component: HomeComponent},
                {path: 'pagina/:nome', component: PaginaComponent},
                {path: '**', redirectTo: '/notfound'},
            ],
            {
                bindToComponentInputs: true
            }
        )
    ],
    exports: [RouterModule]
})

export class AppRoutingModule {
}

Abbiamo aggiunto l'opzione bindToComponentInputs.

Poi nella nostra pagina:

import {Component, inject, Input, OnInit} from '@angular/core';

@Component({
    selector: 'app-pagina',
    templateUrl: './pagina.component.html',
    styleUrls: ['./pagina.component.css']
})

export class PaginaComponent implements OnInit {
    @Input() nome? = '';

    ngOnInit(): void {
        console.log(this.nome);
    }
}

Non ci sono altre modifiche da effettuare!

Enjoy!