Cannot assign value "undefined" to template variable "buttonName". Template variables are read-only. Angular/TypeScript

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?

You should handle the shange of status of todoText in the component (Even though I don't see any use of it), not the template. So I'm guessing you want to clear the content, so you can handle it in the function you execute. I rewrote the component a bit.

If you keep getting the error, please share app.component, since it isn't that clear if it is well defined.

app.component.ts

export class AppComponent {
  todoText = '';
  model = new Model();

  public addItem(value: string) {
    if (value != '') {
      this.todoText = ''; //Manages the todoText here
      this.model.items.push(new TodoItems(value,false));
    }
  }
}

app.component.html

<input type="text" #buttonName class="form-control" />
<div class="input-group-append">
  <button
    class="btn btn-primary"
    (click)="addItem(buttonName.value);"
  >
    Add
  </button>
</div>