Yandex maps & Angular: Cannot read property 'offsetWidth' of null

30 Views Asked by At

I am using Yandex maps in Angular. I could use it in several places. But I have faced an issue with NG Zorro tabs: Cannot read property 'offsetWidth' of null. And The map is not shown. Could you share your solution(for eagrly loaded tabs)? Because I think that It is probable I face this kind of issue in other cases. Thank you for your answers!

<nz-tabset>
  <nz-tab nzTitle="Tab 1">Content of Tab Pane 1</nz-tab>
  <nz-tab nzTitle="Tab 2">
   <div style="height: 400px">
    <ya-map [center]="[44, 55]" [zoom]="12">
      <ya-placemark [geometry]="[44, 55]"></ya-placemark>
    </ya-map>
  </div>
  </nz-tab>
  <nz-tab nzTitle="Tab 3">Content of Tab Pane 3</nz-tab>
</nz-tabset>
1

There are 1 best solutions below

1
Odilbek Utamuratov On

I have found a solution. I used lazy load tabs, and it works.

<nz-tabset>
  <nz-tab nzTitle="Tab 1">Content of Tab Pane 1</nz-tab>
  <nz-tab nzTitle="Tab 2">
     <ng-template nz-tab>
        <div style="height: 400px">
           <ya-map [center]="[44, 55]" [zoom]="12">
             <ya-placemark [geometry]="[44, 55]"></ya-placemark>
           </ya-map>
        </div>
     </ng-template>
  </nz-tab>
  <nz-tab nzTitle="Tab 3">Content of Tab Pane 3</nz-tab>
</nz-tabset>

I have just wrapped inside of the tab with <ng-template nz-tab></ng-template>