Cannot read property 'getBoundingClientRect' of null in Angular

Question

I am trying to get pixel height of this <div class="bundles-wrap enterprise" element using getBoundingClientRect().height or this.elementView.nativeElement.offsetHeight.

This is my HTML:

<div class="row d-flex align-items-end" *ngFor="let value of valueList">
        <!--        start-->
          <div class="bundles-wrap enterprise" id="card-id" #card>
            <div class="hdr">
              <h2>{{value.Name}}</h2>
              <span>What you’ll get</span>
            </div>
</div>
</div>

This is my component class:

 valueList: Model[];
 @ViewChild('card', {read: ElementRef, static:false}) elementView: ElementRef;
    ngAfterViewInit(): void{
     this.loaderService.showLoader("shell-content-loader", "Processing…");
     this.getValueList();
    
    }
    
    getValueList(){
    this.service.getvalueDetails().subscribe(res => {
           this.valueList = res;
              if (this.valueList.length != 0) {
                this.loaderService.hideLoader("shell-content-loader");
                const height1 = document.getElementById('card-id').getBoundingClientRect().height;
                const height2 = this.elementView.nativeElement.offsetHeight;
                console.log(height1);
              }
            });
        
        }

And I am trying to get height1, height2 but it says Cannot read property 'getBoundingClientRect' of null in Angular. None works.

You try to get an element by its id and this element is inside a loop so it won't be unique. Isn't it a problem ? — archelite, Jul 15 '21 at 08:26

score 1 · Answer 1 · answered Jul 15 '21 at 08:29

You are trying to get element with ID card-id.

You also are creating element with this ID in an *ngFor, so multiple element will have same ID.

In your code, you set values which will be used in ngFor, and just after searching for element. So, Angular will not find element because they are not loaded yet.

I suggest you to identify all element differently. You can do it with specific CSS class, or like that:

<div class="row d-flex align-items-end" *ngFor="let value of valueList">
    <div class="bundles-wrap enterprise" id="card-id-{{ value.ID }}" #card>
        <div class="hdr">
            <h2>{{value.Name}}</h2>
            <span>What you’ll get</span>
        </div>
    </div>
</div>

And in the angular side:

valueList: Model[];

@ViewChild('card', {read: ElementRef, static:false}) elementView: ElementRef;
ngAfterViewInit(): void{
    this.loaderService.showLoader("shell-content-loader", "Processing…");
    this.getValueList();
}
    
getValueList(){
    this.service.getvalueDetails().subscribe(res => {
        this.valueList = res;
        this.loaderService.hideLoader("shell-content-loader");
        for(let vl of res) {
            const height1 = document.getElementById('card-id-' + vl.ID).getBoundingClientRect().height;
            const height2 = this.elementView.nativeElement.offsetHeight;
            console.log(height1);
        }
   });
}

You solve the problem for height1 but i think height2 will throw now because of the same reason. He uses ViewChild on multiple element too. — archelite, Jul 15 '21 at 08:50
Oh yes, you are right... but height1 and height2 will be the same ? — Elikill58, Jul 15 '21 at 08:53
Indeed, if height1 is solved, he won't need height2 anymore i guess, so it's ok — archelite, Jul 15 '21 at 09:01

score 1 · Answer 2 · answered Jul 15 '21 at 08:45

You can append index of each step to your id:

<div class="row d-flex align-items-end" *ngFor="let value of valueList; let i = index">
          <div class="bundles-wrap enterprise" [attr.id]="'card-id' + i" #card>
            <div class="hdr">
              <h2>{{value.Name}}</h2>
              <span>What you’ll get</span>
            </div>
          </div>
</div>

And in your component:

this.service.getvalueDetails().subscribe(res => {
            this.valueList = res;
            if (this.valueList.length != 0) {
                this.loaderService.hideLoader("shell-content-loader");

                for (var i = 0; i < res.length; i++)  {
                    const height1 = document.getElementById('card-id' + i).getBoundingClientRect().height;
                    const height2 = this.elementView.nativeElement.offsetHeight;
                    console.log(height1);
                }
            }
        });

Cannot read property 'getBoundingClientRect' of null in Angular

2 Answers2