⭐ What Are Template Statements in Angular?

A template statement is the code you write inside ()` parentheses to respond to user events in HTML.

For example:

• (click) → event binding

• "onClick()" → template statement

Template statements:

• Call component methods

• Change component properties

• Use operators, expressions

• Respond to user actions

🎯 What You Can Do in Template Statements

✔ Call a method

✔ Set a property

✔ Call multiple operations

✔ Access $event value

(more on this below)

❌ What You Cannot Do

Template statements cannot:

• Declare new variables

• Use loops (for, while)

• Use complex logic

• Use assignments outside context

They must stay simple and fast.

⭐ What Is $event in Angular?

$event is a special variable that holds event data when an event occurs.

Examples of events:

• click

• keyup

• input

• submit

• change

Whenever you listen to any event, Angular gives you the event object in $event.

🧩 Example 1: Get Input Value

TS:

Here:

• $event = Input event object

• $event.target.value → current text inside input

🧩 Example 2: Key Press Event

TS:

🧩 Example 3: Passing $event Directly as Value

🧩 Example 4: Button Click Event

TS:

🧩 Example 5: ngModelChange + $event

TS:

⭐ $event for Different Events

⭐ Example: Restrict Input to Numbers Only

TS:

🎉 Summary

Template Statements

• Code executed on UI events

• Short and simple expressions

• Used inside (event)="statement"

$event

• Special Angular variable

• Holds event details (value, key, mouse data, etc.)

• Used to pass event data to components

🧠 One-Line Summary

👉 Template statements let you react to events, and $event gives you the event data needed to handle them.