diff --git a/components/badge/nz-badge.component.html b/components/badge/nz-badge.component.html
index b46f5bbd8ec..e003296cbef 100644
--- a/components/badge/nz-badge.component.html
+++ b/components/badge/nz-badge.component.html
@@ -1,18 +1,21 @@
-
+
{{ nzText }}
+ *ngIf="showSup"
+ @zoomBadgeMotion
+ [ngStyle]="nzStyle"
+ [class.ant-badge-count]="!nzDot"
+ [class.ant-badge-dot]="nzDot"
+ [class.ant-badge-multiple-words]="countArray.length>=2">
+ *ngIf="count <= nzOverflowCount"
+ [style.transform]="'translateY(' + (-countArray[i] * 100) + '%)'">
{{ p }}
diff --git a/components/button/nz-button.component.html b/components/button/nz-button.component.html
index edd53fe9b9f..4da14696cef 100644
--- a/components/button/nz-button.component.html
+++ b/components/button/nz-button.component.html
@@ -1,2 +1,2 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/components/button/nz-button.component.ts b/components/button/nz-button.component.ts
index eab1818ed06..ef532068ba1 100644
--- a/components/button/nz-button.component.ts
+++ b/components/button/nz-button.component.ts
@@ -6,6 +6,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
+import { ContentObserver } from '@angular/cdk/observers';
import {
AfterContentInit,
ChangeDetectionStrategy,
@@ -25,7 +26,8 @@ import {
Renderer2,
SimpleChanges,
ViewChild,
- ViewEncapsulation
+ ViewEncapsulation,
+ ViewRef
} from '@angular/core';
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
@@ -42,6 +44,8 @@ import {
NZ_WAVE_GLOBAL_CONFIG
} from 'ng-zorro-antd/core';
import { NzIconDirective } from 'ng-zorro-antd/icon';
+import { Subject } from 'rxjs';
+import { startWith, takeUntil } from 'rxjs/operators';
export type NzButtonType = 'primary' | 'dashed' | 'danger' | 'default' | 'link';
export type NzButtonShape = 'circle' | 'round' | null;
@@ -59,6 +63,7 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O
readonly el: HTMLElement = this.elementRef.nativeElement;
private iconElement: HTMLElement;
private iconOnly = false;
+ private destroy$ = new Subject();
@ViewChild('contentElement', { static: true }) contentElement: ElementRef;
@ContentChildren(NzIconDirective, { read: ElementRef }) listOfIconElement: QueryList;
@HostBinding('attr.nz-wave') nzWave = new NzWaveDirective(
@@ -113,7 +118,9 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O
}
this.setClassMap();
this.updateIconDisplay(this.nzLoading);
- this.cdr.detectChanges();
+ if (!(this.cdr as ViewRef).destroyed) {
+ this.cdr.detectChanges();
+ }
}
moveIcon(): void {
@@ -133,6 +140,7 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O
private elementRef: ElementRef,
private cdr: ChangeDetectorRef,
private renderer: Renderer2,
+ private contentObserver: ContentObserver,
private nzUpdateHostClassService: NzUpdateHostClassService,
private ngZone: NgZone,
@Optional() @Inject(NZ_WAVE_GLOBAL_CONFIG) private waveConfig: NzWaveConfig,
@@ -142,7 +150,16 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O
}
ngAfterContentInit(): void {
- this.checkContent();
+ this.contentObserver
+ .observe(this.contentElement)
+ .pipe(
+ startWith(true),
+ takeUntil(this.destroy$)
+ )
+ .subscribe(() => {
+ // https://github.com/NG-ZORRO/ng-zorro-antd/issues/3079
+ Promise.resolve().then(() => this.checkContent());
+ });
}
ngOnInit(): void {
@@ -151,6 +168,8 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O
}
ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
this.nzWave.ngOnDestroy();
}
diff --git a/components/button/nz-button.spec.ts b/components/button/nz-button.spec.ts
index b04b0de0e37..6486a63f0d9 100644
--- a/components/button/nz-button.spec.ts
+++ b/components/button/nz-button.spec.ts
@@ -137,14 +137,16 @@ describe('button', () => {
buttons = fixture.debugElement.queryAll(By.directive(NzButtonComponent));
});
- it('should have correct style', () => {
+ it('should have correct style', fakeAsync(() => {
+ fixture.detectChanges();
+ tick();
fixture.detectChanges();
expect(buttons[0].nativeElement.classList.contains('ant-btn-icon-only')).toBe(true);
expect(buttons[0].nativeElement.classList.contains('ant-btn-circle')).toBe(true);
expect(buttons[1].nativeElement.classList.contains('ant-btn-icon-only')).toBe(false);
expect(buttons[1].nativeElement.firstElementChild!.classList.contains('anticon-search')).toBe(true);
expect(buttons[1].nativeElement.firstElementChild.style.cssText).toBe('display: inline-block;');
- });
+ }));
});
describe('loading', () => {
@@ -191,6 +193,8 @@ describe('button', () => {
it('should loading when click with icon', fakeAsync(() => {
const button = buttons[3];
fixture.detectChanges();
+ tick();
+ fixture.detectChanges();
expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(false);
expect(button.nativeElement.firstElementChild.querySelector('svg')).not.toBe(null);
expect(button.nativeElement.firstElementChild!.classList.contains('anticon-loading')).toBe(false);
@@ -342,10 +346,33 @@ describe('button', () => {
expect(button.nativeElement.querySelector('.anticon-poweroff').style.cssText).toBe('display: inline-block;');
}));
});
+ describe('with icon', () => {
+ let fixture: ComponentFixture;
+ let button: DebugElement;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [NzButtonModule],
+ declarations: [NzTestButtonWithIconComponent],
+ providers: []
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NzTestButtonWithIconComponent);
+ button = fixture.debugElement.query(By.directive(NzButtonComponent));
+ });
+
+ it('should have correct style', fakeAsync(() => {
+ fixture.detectChanges();
+ tick();
+ fixture.detectChanges();
+ expect(button.nativeElement.firstElementChild.tagName).toBe('SPAN');
+ }));
+ });
});
@Component({
- selector: 'nz-test-button-search',
template: `
`
@@ -354,7 +381,6 @@ export class NzTestButtonSearchComponent {}
// https://github.com/NG-ZORRO/ng-zorro-antd/issues/2191
@Component({
- selector: 'nz-test-button-binding',
template: `