angular13

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


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?


Solution

  • 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>