Event binding not working when I use the click property

I am trying to test event binding but it is not working when i use the click event, i'll attach code

This is my html template which works for the property binding

<!-- <h1 [innerHTML]="title"></h1> -->
<!-- Above is another way but its normally easier if you just want to write out a value to use interpolation, like the one below -->

<h1 [hidden]="isVisible">{{title}}</h1>
<button type="button" (click)="changeVisibility()">show/hide</button>
<!-- '!' basically means check the opposite, [hidden] is a property to hide an element using property binding in the DOM -->

<app-customers-list></app-customers-list>
<br>


This is mycomponent, the isVisible property binding works just fine but trying the event binding does not work, I even tried adding a console statement for each time I click but I received no log in my console

import { Component, OnInit } from '@angular/core'; // first import the component decorator from angular
import { ICustomer } from '../shared/interfaces';
import { kMaxLength } from 'buffer';
@Component({
selector: 'app-customers',
standalone: false,
templateUrl: './customers.component.html',
styleUrl: './customers.component.css'
})
export class CustomersComponent implements OnInit {
title: string = "";
people: ICustomer[] = [];
isVisible: boolean = false;

changeVisibility() {
this.isVisible = !this.isVisible;
console.log("clicked", "false");
}
constructor() { }

ngOnInit() {
this.title = 'Customers';
this.people = [
{ id: 1, name: 'john Doe', city: 'Phoenix', orderTotal: 9.99, customerSince: new Date(2014, 7, 10) },
{ id: 2, name: 'Jane Doe', city: 'Chandler', orderTotal: 19.99, customerSince: new Date(2017, 2, 22) },
{ id: 3, name: 'Michelle Thomas', city: 'Seattle', orderTotal: 99.99, customerSince: new Date(2002, 10, 31) },
{ id: 4, name: 'Jim Thomas', city: 'New York', orderTotal: 599.99, customerSince: new Date(2002, 10, 31) },
];
}
}



I tried to click the button so that it would toggle the visibility as you can see in my code, the property binding works if i change it between true and false but the click event does not work, I received no error and I'm stumped (please ignore my comments, im still practicing )

Continue reading...