So I want to say Im new for Angular.
app.component.ts;
model = new Model();
addItem(value:string){
if(value!="")
{this.model.items.push(new TodoItems(value,false));}
model.ts;
export class TodoItems{
description;
action;
constructor(description: string,action: boolean){
this.description= description;
this.action = action;
}
}
app.component.html;
<input type="text" #buttonName class="form-control">
<div class="input-group-append">
<button class="btn btn-primary" (click)="addItem(buttonName.value); buttonName='';">Add</button>
</div>
How I can solve this error?
Based on the code you provided, it seems like you are trying to assign a value to the template variable buttonName in your (click) event handler. As template variables are read-only and cannot be directly assigned a value.
To fix the error, you can modify your code as follows:
buttonName in the (click) event handler.<button class="btn btn-primary" (click)="addItem(); todoText='';">Add</button>
addItem method in your component TypeScript file to retrieve the value from the buttonName template variable.addItem() {
const inputValue = this.buttonName.nativeElement.value;
if (inputValue !== "") {
this.model.items.push(new TodoItems(inputValue, false));
}
}
Make sure to import the ViewChild decorator from @angular/core and add it to your component class.
import { Component, ViewChild, ElementRef } from '@angular/core';
// ...
export class YourComponent {
@ViewChild('buttonName') buttonName: ElementRef;
// Rest of your code
}
By using the ViewChild decorator and ElementRef, you can access the value of the buttonName input element in the addItem method and add it to your model accordingly.
Hpoe It helps else you can comment back for clarifications. If it helps please consider accepting.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments