Uygulamaları dinamik hale getirmenin temel yönlerinden biri, kullanıcı etkileşimini yönetme yeteneğidir. Bu kılavuzda, kullanıcı etkileşiminin iki temel kategorisine bakacağız: olay işleme ve formlar.
Event İşleme #
Bir öğeye olay işleyici ekleyebilirsiniz:
- Parantez içinde etkinlik adıyla bir öznitelik ekleniyor.
- Belirtilen JavaScript ifadesini çalıştırmak istediğinizi belirtin.
<button (click)="save()">Save</button>
Örneğin, tıklama etkinliği gerçekleştiğinde transformText işlevini çalıştıran bir düğme oluşturmak isteseydik, aşağıdaki gibi görünecekti:
// text-transformer.component.ts
@Component({
standalone: true,
selector: 'text-transformer',
template: `
<p>{{ announcement }}</p>
<button (click)="transformText()">Abracadabra!</button>
`,
})
export class TextTransformer {
announcement = 'Hello again Angular!';
transformText() {
this.announcement = this.announcement.toUpperCase();
}
}
Diğer yaygın olay dinleyicileri örnekleri şunlardır:
<input (keyup)="validateInput()" />
<input (keydown)="updateInput()" />
$event #
Angular, bir işlevine iletebileceğiniz örtülü bir $event değişkeni sağlar.