pass value from HTML to TS from an ngFor Angular

Issue

I have this HTML with value i am getting from an Array in my Component

//myComponent.html
   <p class="m_a"> 
       <a routerLink="informe" class="nav-link px-sm-0 px-2">
          <strong>{{info.resolucion}} | {{info.ano}}</strong> 
       {{info.titulo}}
       </a>
    </p>

But I want to get value of selected item and pass to the component.ts, but the problem is that i got the values from this function

//myComponent.ts
showNodes() {
this.loader = true;
this.buscadorService.getNodes()
  .subscribe((data: InformesCounter) => {
    this.loader = false;
    this.data = data;
    this.informesNode = data.data;
    this.nid = this.informesNode.map((data: { id: any;}) => data.id);
    this.nodeList = this.informesNode.map((data: { attributes:any;}) => data.attributes);
  });
}

But i do not want to get the entire array, i only want to get the title/titulo i selected from the HTML so i can pass it to the component or another component. AFAIK it's possible to do with two-way databinding, but couldn't get it to work.

Ex: i want to retrieve the info.titulo of clicked item and console.log in ts.

Solution

you should use the button instead and use the (click) to pass the value to component's class from the template:

<button (click)="navigate(info.titulo)">
  <strong>{{info.resolucion}} | {{info.ano}}</strong> 
  {{info.titulo}}
</button>

then in component:

navigate(titulo){
   console.log(titulo);
   this.router.navigate(['informe']);
}

Answered By - Maciej Wojcik