How to get width of all elements of dropdown menu in Angular?

Question

I have this dropdown menu and I need to get the width of all items, compare it and get the biggest one. How we can do this in Angular ?

I tried with offsetWidth but I get only one width of this 4 elements and every time it's changing .

      <div class="container">
                <div class="departments_link_container" [ngStyle]="{'width': megaMenuWidthContainer + 'px'}">
                    <a (click)="toggleActive(item, itemEl, i)" class="departments_link_item"
                       [routerLink]="itemEl.link | localize"
                       *ngFor="let itemEl of item.submenu">
                        <div class="icon" (click)="addActiveClass(itemEl, i)">
                            <img
                                [src]="itemEl?.icon?.path"
                                [transform]="['resize:fit:20:20', 'q:100']"
                                class="inactive"
                            />
                            <img
                                [src]="itemEl?.activeIcon?.path"
                                [transform]="['resize:fit:20:20', 'q:100']"
                                class="active"
                            />
                        </div>

                        <span id="megaMenuContainer" #megaMenuContainer (click)="addActiveClass(itemEl, i)" class="label"> {{ itemEl.title }}</span>
                    </a>
                </div>
            </div>

score 0 · Answer 1 · answered Mar 30 '22 at 15:55

Many ways to do this, either directly in template or querying the elements. Not knowing why you need this I'm going to pick the latter option and query all the elements and then find the widest one of them. And I'm exactly not sure which item we're looking for so lets find the <a> tag elements, for example.

Let's add #findElem tag to we know we will query these elements.

<a #findElem (click)="toggleActive(item, itemEl, i)" class="departments_link_item"
[routerLink]="itemEl.link | localize"
*ngFor="let itemEl of item.submenu">

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {

  @ViewChildren('findElem') findElemList: QueryList<ElementRef>;

  ngAfterViewInit() {
    if (this.findElemList) {
      let widestElem;
      for (let item of this.findElemList) {
        if (!widestElem) {
          widestElem = item.nativeElement;
        } else if (widestElem.offsetWidth < item.nativeElement.offsetWidth) {
          widestElem = item.nativeElement;
        }
      }
      if (widestElem) {
        console.log('widest elem is: ', widestElem, ' width px is: ', widestElem.offsetWidth)
      }
    }
  }
}

Feel free to refactor this here and there to find your elements.

Working example: https://stackblitz.com/edit/angular-ivy-vuk3h7?file=src%2Fapp%2Fapp.component.ts

``` On ngAfterViewInit I get only first item from NgFor but I need all items This Element Ref Return only first element from this list — BlackProgNight, Mar 31 '22 at 08:03
That is not possible. `#findElem` is attached to each `` elements the `*ngFor` generates. And `@ViewChildren` will query all such elements with `#findElem` tag. Only other option is, that `*ngFor` doesn't generate as many items as you think, or it does not do that on `AfterViewInit` cycle. That could happen if `item.submenu` is populated at a later time. — Joosep Parts, Mar 31 '22 at 08:09

score 0 · Answer 2 · answered Mar 30 '22 at 16:00

0

this line of code show you the size of a div

<div #container>Container's width is {{ container.offsetWidth }}</div>

as explained here

answered Mar 30 '22 at 16:00

Mohammed

171
2
11

How to get width of all elements of dropdown menu in Angular?

2 Answers2