The event binding is not working on my system but works on an online compiler

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.

Continue reading...