如何获取li标签内的属性值？

Question

I am using angular 6 application where i am passing data through attribute,

First i have given [attr.parent_id] in ul tag like,

<ul class="list-unstyled" id="1" [attr.parent_id]="123"></ul>

For which i have used, console.log(target.getAttribute('parent_id'));

And the result displays 123 .

Like same thing i need to get a index number from li tag like of the same ul ,

<ul class="list-unstyled" id="1" [attr.parent_id]="123">
      <li class="media p-2 column" *ngFor="let item of items;let i = index;" [attr.child_id]="i"></li>
</ul>

Here i have given [attr.child_id] to retrieve the index position and i have used console.log(target.getAttribute('child_id')); .

This console of getting child_id displays the value as null .

The ul tag gives me the value of attribute but li tag is returning null as result.

The StackBlitz link was https://stackblitz.com/edit/angular-oaghq3

Kindly help me to set and get the attribute to li tag and to retrieve data.

Answer 1

You can query the elements by using the ViewChildren decorator as showcased in this blitz

<ul class="list-unstyled" id="list" [attr.parent_id]="123">
    <li #li class="media p-2 column" *ngFor="let item of items;let i = index;" [attr.child_id]="i"> {{item.name}} </li>
</ul>

@ViewChildren("li") listElements: QueryList<ElementRef<HTMLLIElement>>;

private printElements() {
    const elements = this.listElements.toArray();
    elements.forEach(element => {
      const isLiElemenet = element.nativeElement instanceof HTMLLIElement;
      const child_id = element.nativeElement.getAttribute('child_id');
      console.log({ isLiElemenet, child_id });
    })
  }