Angular: How to get object behind *ngFor DOM element without an event?

Question

How do I access the object behind a dom element based by the id of the dom element or something else that does not involve an event?

for example I have:

arr1 = [{a:1, b:2}, {a:5, b:10}, {a:20, b:50}];

<li *ngFor="let obj of arr1; let indexObj=index" id="{{indexObj}}">
    {{obj.a}}
</li>

document.getElementById("1");

But I want to be able to acces the properties a and b associated with the li DOM element

Edit: question was not clear enough so I'll try to expand. what you normally would do

<li *ngFor="let obj of arr1; let indexObj=index" id="{{indexObj}}" (click)="somefunc(obj)">
        {{obj.a}}
 </li>

and then I can acces obj in my function

somefunc(obj) {
    console.log(obj.a);
}

I want to achieve what i'm doing in somefunc without the click event or any other event. so for example I can acces the DOM element li by document.getElementById("1"); or by this.eleRef.nativeElement.querySelector('#1') but I want to have access to the obj associated with the DOM element so I want to be able to do something like this.

somefunc2() {
    let el = document.getElementById("1");
    console.log(obj.a associated with el);
}

Answer 1

If you know the id, then use the array find in your data source.

   const trgItem = arr1.find(item => return item.a === 1);

You should also change your html this way to setup the id properly:

<ul>
    <li *ngFor="let obj of arr1; let indexObj=index" id="{{indexObj}}">
        {{obj.a}}
    </li>
<ul>

If you know the index, use the indexOf(0) function of the array.

If you want to get it when something happens, then you can only do that with an event.

Answer 2

I created stackblitz working example for your use, modify your component code like this-

 arr1 = [{ a: 1, b: 2 }, { a: 5, b: 10 }, { a: 20, b: 50 }];

  ngAfterViewInit() {
    const val = Number(document.getElementById('1').innerHTML);
    console.log(this.arr1.find(ele => ele.a === val)); // you'll get the object here.
  }

Answer 3

You can achive to get the object of an element or getting all children by using @ViewChild and @ViewChildren

@ViewChildren:

@Component({
  selector: 'my-app',
  template: `
    <alert></alert>
    <alert type="danger"></alert>
    <alert type="info"></alert>
  `,
})
export class App {
  @ViewChildren(AlertComponent) alerts: QueryList<AlertComponent>

  ngAfterViewInit() {
    // Here you get all instances of the alert component
    this.alerts.forEach(alertInstance => console.log(alertInstance));
  }
}

For more information about that: https://angular.io/api/core/ViewChildren

Answer 4

It is not working because you are not interpolating the id...

Your html should be:

<li *ngFor="let obj of arr1; index as indexObj" id="{{indexObj}}">
  {{obj.a}} //also you had a typo here (ibj instead of obj)
</li>

EDIT FOR THE UPDATED QUESTION:

Since you know the id, to retrieve the item in array you can do this:

const arr1 = [{a:1, b:2}, {a:5, b:10}, {a:20, b:50}];


const id = 1;
const item = arr1[id];
console.log(item, item.a, item.b);