Angular 17 click event not firing?

I am starting with angular and I have the below code,

app.component.html =>

<div (click)="myFunction()" >{{ title }}</div>
<div>Count is: {{ count }}</div>
<button (click)="updateCount();" type="button">Button</button>


app.component.ts =>

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

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
title = 'Angular Learn';

count = 1;

updateCount() {
this.count++;
}

myFunction() {
console.log('Title Clicked');
alert('Title Clicked');
}
}


These functions defined in the ts file are not firing. No idea what is wrong here. I created my app using npm init @angular angular-learn command.

Continue reading...