Scambiare dati tra componenti in Angular 18

Nelle varie nuove versioni Angular ci sta mettendo a disposizione sempre più strumenti che facilitano diverse operazioni.

In questo articolo vediamo come usare @Input per scambiare dati tra due componenti nella versione 18.

Cominciamo con il creare il componente child:

ng g c dettaglio

Questo il file Typescript:

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

@Component({
  selector: 'app-dettaglio',
  standalone: true,
  imports: [],
  templateUrl: './dettaglio.component.html',
  styleUrl: './dettaglio.component.css'
})

export class DettaglioComponent {
  @Input() inputString: string = "";
}

Questo il file HTML:

<h1>Il tuo testo: {{ inputString }}</h1>

EQuesto invece il codice Typescript del padre:

import {Component} from '@angular/core';
import {RouterOutlet} from '@angular/router';
import {FormsModule} from "@angular/forms";
import {DettaglioComponent} from "./dettaglio/dettaglio.component";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, FormsModule, DettaglioComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {
  myString!: 'CIAO';

  submit(form: any) {
    this.myString = form.txt;
    console.log(form);
    console.log(this.myString);
  }
}

E questo l'HTML:

<router-outlet></router-outlet>

<form #myForm="ngForm" (ngSubmit)="submit(myForm.value)">
  Scrivi un testo
  <br>
  <input type="text" id="txtFullname" name="txt" ngModel #txt="ngModel">
  <br>
  <button type="submit">Submit</button>
</form>

<app-dettaglio [inputString]="myString"></app-dettaglio>

Enjoy!