nz-avatar scale is incorredct

[HaidarVladyslav]

Reproduction link

[https://stackblitz.com/edit/stackblitz-starters-t4ldds?file=sample-application%2Fsrc%2Fapp%2Fapp.component.ts][(https://stackblitz.com/edit/stackblitz-starters-t4ldds?file=sample-application%2Fsrc%2Fapp%2Fapp.component.ts)](https://stackblitz.com/edit/stackblitz-starters-4pyxwh?description=An%20angular-cli%20project%20based%20on%20@angular/animations,%20@angular/common,%20@angular/compiler,%20@angular/core,%20@angular/forms,%20@angular/platform-browser,%20@angular/platform-browser-dynamic,%20@angular/router,%20core-js,%20rxjs,%20tslib%20and%20zone.js&file=angular.json,src%2Fbutton%2Fbutton.component.ts,src%2Fmain.ts,src%2Fglobal_styles.css&title=Angular%20Starter)

Steps to reproduce

https://postimg.cc/HV3qc4Hq I have nz-avatar and its size is incorrect. Scale is zero. Actually I don't know why. I migrated v14 to v16 and worked directly with components in storybook and didn't see any issues. But once I just started to work with previously existing app, I can see this issue. It also happens if I have sidemenu that is closed by default (that's regular Angular component that uses nz-avatar). And interesting thing that if I have sidebar as default nz-sider, its size is correct, but once I reduce screensize, I operate with closed/opened states and can see this issue. But, if I firstly was on large screen, then reduced it to tablet, so the size of Text inside nz-avatar is correct, but if I reload page as tablet view, can see this issue...

What is expected?

Expected - size is set correctly

What is actually happening?

https://postimg.cc/HV3qc4Hq

Environment	Info
ng-zorro-antd	16.0.0
Browser	Chrome

[HaidarVladyslav]

Actually I just reproduced this on Stakblitz with v17. I think it can be common issue. But I think this issue doesn't exist on v14, because we have stable project on v14 and use ng-zorro v14 and don't have any issue with that. @hsuanxyz what do you think about it?

[ParsaArvanehPA]

Hi @HaidarVladyslav, This is a possible fix for your issue #8365.

[ParsaArvanehPA]

@HaidarVladyslav In the meantime, you can use this hack to get your problem solved:

component.html:

<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="The first Modal"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()"
  (nzAfterOpen)="reScaleAvatar()"
>
  <ng-container *nzModalContent>
    <nz-avatar nzText="U S" #avatarComponent></nz-avatar>
  </ng-container>
</nz-modal>

component.ts:

@ViewChild('avatarComponent')
public avatarComponent!: NzAvatarComponent;

public reScaleAvatar(): void {
  this.avatarComponent['notifyCalc']();
}

Note that I am bracket syntax to call notifyCalc because it is a private property inside the Avatar component and cannot be accessed from outside.

[HaidarVladyslav]

Hi @HaidarVladyslav, This is a possible fix for your issue #8365.

I also tried that. But then other examples are broken. You can check existing 'Change Text' example, its position is incorrect. I also tried to make 'setTimeout' with bigger value (50ms), but it works for my case. But in general we don't have to do like this.

Calling private method to rerender avatar-component also looks for me non-proper way

But thanks for your quick response!

[HaidarVladyslav]

@ParsaArvanehPA and about your temporary solution. Let's imagine I have avatar-component inside my custom component. My custom component is inside another component. And only then I have modal. This nesting to call 'nzAfterOpen' is strange. And if I have different usages of avatar-component across the app or across multiple apps, I need to call this method everywhere..

[ParsaArvanehPA]

Hi @HaidarVladyslav, This is a possible fix for your issue #8365.

I also tried that. But then other examples are broken. You can check existing 'Change Text' example, its position is incorrect. I also tried to make 'setTimeout' with bigger value (50ms), but it works for my case. But in general we don't have to do like this.

Calling private method to rerender avatar-component also looks for me non-proper way

But thanks for your quick response!

So you are saying you checked out my branch and there were some parts not working properly? because that change text part seems to be working fine in #8365

[ParsaArvanehPA]

@ParsaArvanehPA and about your temporary solution. Let's imagine I have avatar-component inside my custom component. My custom component is inside another component. And only then I have modal. This nesting to call 'nzAfterOpen' is strange. And if I have different usages of avatar-component across the app or across multiple apps, I need to call this method everywhere..

Yeah it is just a hack, best to wait for the solution to be merged.

[HaidarVladyslav]

Hi @HaidarVladyslav, This is a possible fix for your issue #8365.

I also tried that. But then other examples are broken. You can check existing 'Change Text' example, its position is incorrect. I also tried to make 'setTimeout' with bigger value (50ms), but it works for my case. But in general we don't have to do like this. Calling private method to rerender avatar-component also looks for me non-proper way But thanks for your quick response!

So you are saying you checked out my branch and there were some parts not working properly? because that change text part seems to be working fine in #8365

yes, please, look here - I just was spamming 'Change Text', and it's out of container