CODEWITHSUNDEEP
javascriptangulartypescriptdata-bindingevent-binding
Maduka Samuel
Maduka Samuel

Reputation: 75

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 :) )

Upvotes: 1

Views: 140

Answers (1)

Naren Murali
Naren Murali

Reputation: 56054

I can't replicate the issue, here is a stackblitz where its working, do compare your code with this, please update the question with the reproducible issue!

ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { CustomersListComponent } from './customers-list/customers-list.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CustomersListComponent],
  template: `
    <!-- <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>
  `,
})
export class App {
  title: string = '';
  people: any[] = [];
  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),
      },
    ];
  }
}

bootstrapApplication(App);

Stackblitz Demo

Upvotes: 3

Related Questions