I am a beginner and using version 18 of Angular but Event binding doesn’t work when i try it on my system.
Here is the code i was trying

product-list.component.html

<img [src]="product.pImage" alt="iphone device">
<p>Name: {{product.name}}</p>
<p>Price: {{'$'+product.price}}</p>
<p>Color: {{product.color}}</p>
<p>Discounted Price: {{'$'+ getDiscountedPrice().toFixed(2)}}</p>
<p>{{product.inStock>0 ? 'Only ' + product.inStock+ ' items left': 'Out of Stock'}}</p>
<button [disabled] ="!(product.inStock>0)">Buy Now</button>
<br>
<input type="text" (input)="onNameChange()">
<!-- <input id="name" [(ngModel)]="name" placeholder="Enter name">  -->
<p>{{name | uppercase}}</p>

product-list.component.ts

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

@Component({
  selector: 'product-list',
  templateUrl: './product-list.component.html',
  styleUrl: './product-list.component.css'
})
export class ProductListComponent {
  name: string = 'Yash Saxena';
 product = { 
  name: 'iPhone X',
  price: 999,
  color: 'Red',
  discount: 8.5,
  inStock: 10,
  pImage: '/assets/images/iphone.jpeg'
 };
 
 getDiscountedPrice() {
  return ((100-this.product.discount) * this.product.price)/100
 }

 onNameChange():void {
  
  this.name = 'Mark';
 }

}

It doesn’t work on my local system. What could be the possible reason and how do I resolve it?

Earlier I was using standalone compoents and had no app.module.ts file and thought it was some issue with it so then i create a new –no-standalone project and even created other events like button event or input event and neither works.