Event binding with parentheses in Angular - Mini Project: Build & Apply

Event binding with parentheses in Angular

📖 Scenario: You are building a simple Angular app where a button click changes a message shown on the page. This is like pressing a button on a remote control to change the channel.

🎯 Goal: Create an Angular standalone component that shows a message and a button. When the button is clicked, the message changes using event binding with parentheses.

📋 What You'll Learn

Create a standalone Angular component named ClickMessageComponent

Add a string variable message initialized to 'Hello, Angular!'

Add a method changeMessage() that changes message to 'You clicked the button!'

Use event binding with parentheses (click) on a button to call changeMessage()

Display the message variable in the template inside a <p> tag

💡 Why This Matters

🌍 Real World

Event binding is how Angular apps respond to user actions like clicks, taps, or key presses. This is essential for interactive web pages.

💼 Career

Understanding event binding is a core skill for Angular developers. It helps build responsive user interfaces that react to user input.

1

Create the component and message variable

Create a standalone Angular component named ClickMessageComponent with a string variable message set to 'Hello, Angular!'.

Angular

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

@Component({
  selector: 'app-click-message',
  standalone: true,
  template: ``,
})
export class ClickMessageComponent {
  // Your code here
}

Need a hint?

Use message = 'Hello, Angular!'; inside the component class.

2

Add the changeMessage() method

Add a method named changeMessage() inside ClickMessageComponent that sets message to 'You clicked the button!'.

Angular

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

@Component({
  selector: 'app-click-message',
  standalone: true,
  template: ``,
})
export class ClickMessageComponent {
  message = 'Hello, Angular!';

  // Your code here
}

Need a hint?

Define changeMessage() method that updates this.message.

3

Add the button with event binding

In the component's template, add a <button> with event binding (click) that calls changeMessage() when clicked.

Angular

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

@Component({
  selector: 'app-click-message',
  standalone: true,
  template: `
    
  `,
})
export class ClickMessageComponent {
  message = 'Hello, Angular!';

  changeMessage() {
    this.message = 'You clicked the button!';
  }
}

Need a hint?

Use (click)="changeMessage()" inside the <button> tag.

4

Display the message in the template

Add a <p> tag in the template that shows the message variable using Angular interpolation {{ message }}.

Angular

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

@Component({
  selector: 'app-click-message',
  standalone: true,
  template: `
    Click me
    
  `,
})
export class ClickMessageComponent {
  message = 'Hello, Angular!';

  changeMessage() {
    this.message = 'You clicked the button!';
  }
}

Need a hint?

Use {{ message }} inside a <p> tag to show the message.