Angular: differenze tra le versioni

Versione delle 15:16, 25 feb 2025

Versione delle 08:51, 26 giu 2025

Riga 173:

=== Componente ===

Di seguito un componente ''Counter'' che permette di visualizzare un contatore e di agire sul suo stato. Il componente e definito in tre file diversi: <code>counter.component.ts</code>, <code>counter.component.html</code>, <code>counter.component.css</code>.<syntaxhighlight lang="typescript" line="1">

// File: counter.component.ts

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

import { CommonModule } from '@angular/common';

@Component({

selector: 'app-counter', // Selettore

standalone: true,

templateUrl: './counter.component.html', // File del template

imports: [CommonModule],

styleUrls: ['./counter.component.css'] // File degli stili

templateUrl: './counter.component.html', // File del template

styleUrl: './counter.css'

})

export class CounterComponentCounter {

count = signal(0);

increment() {

this.count.update(c => c ++ 1);

}

decrement() {

this.count.update(c => c -- 1);

}

}

// File: counter.component.html

<div class="counter-container">

<h2>Counter: {{ count() }}</h2> <!-- binding in lettura: il valore di count è mostrato nel template -->

<div class="button-container">

<button (click)="increment()">+</button>

Riga 202 ⟶ 206:

</div>

</div>

// File: counter.component.css