Angular: Parser Error: Private identifiers are not supported. Unexpected private identifier

Question

I am prototyping a functionality I am just doing things simple here. I know the benefits of FormArray but I want to be simple here.

I am getting this:

Parser Error: Private identifiers are not supported. Unexpected private identifier

<div class="row" *ngFor="let marca of marcas">

    <div class="col-md-3">
        <span> {{ marca.nome }} </span>
    </div>

    <div class="col-md-1">
       
        <input #searchBar placeholder="categoria ML" class="form form-control" > 
       
    </div>
    <div class="col-md-1">

    <button (click)="salvarCategoria(marca, #searchBar.value)" class="btn btn-primary" >salvar</button>
    </div>
</div>

It's the #searchBar that is causing it. I think it's a valid syntax isn't it?

Answer 1

You are using #searchBar to reference the template variable of the <input> element. The # (hash) is unescessary here. You should just use searchbar instead of #searchbar. see: https://angular.io/guide/template-reference-variables

corrected code:

<div class="row" *ngFor="let marca of marcas">

    <div class="col-md-3">
        <span> {{ marca.nome }} </span>
    </div>

    <div class="col-md-1">
       
        <input #searchBar placeholder="categoria ML" class="form form-control" > 
       
    </div>
    <div class="col-md-1">

    #This line changed (seachBar.value instead of #searchBar.value)
    <button (click)="salvarCategoria(marca, searchBar.value)" class="btn btn-primary" >salvar</button>
    </div>
</div>