diff --git a/components/collapse/nz-collapse-panel.component.ts b/components/collapse/collapse-panel.component.ts
similarity index 56%
rename from components/collapse/nz-collapse-panel.component.ts
rename to components/collapse/collapse-panel.component.ts
index dc4473b3c4f..3e5c212f0f5 100644
--- a/components/collapse/nz-collapse-panel.component.ts
+++ b/components/collapse/collapse-panel.component.ts
@@ -10,39 +10,51 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
- ElementRef,
EventEmitter,
Host,
Input,
OnDestroy,
OnInit,
Output,
- Renderer2,
TemplateRef,
ViewEncapsulation
} from '@angular/core';
import { collapseMotion, InputBoolean, NzConfigService, WithConfig } from 'ng-zorro-antd/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
-import { NzCollapseComponent } from './nz-collapse.component';
+import { NzCollapseComponent } from './collapse.component';
const NZ_CONFIG_COMPONENT_NAME = 'collapsePanel';
@Component({
selector: 'nz-collapse-panel',
exportAs: 'nzCollapsePanel',
- templateUrl: './nz-collapse-panel.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
animations: [collapseMotion],
- styles: [
- `
- nz-collapse-panel {
- display: block;
- }
- `
- ],
+ template: `
+
+
+ `,
+
host: {
+ '[class.ant-collapse-item]': 'true',
'[class.ant-collapse-no-arrow]': '!nzShowArrow',
'[class.ant-collapse-item-active]': 'nzActive',
'[class.ant-collapse-item-disabled]': 'nzDisabled'
@@ -56,7 +68,7 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
@Input() nzHeader: string | TemplateRef;
@Input() nzExpandedIcon: string | TemplateRef;
@Output() readonly nzActiveChange = new EventEmitter();
-
+ private destroy$ = new Subject();
clickHeader(): void {
if (!this.nzDisabled) {
this.nzCollapseComponent.click(this);
@@ -70,11 +82,14 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
constructor(
public nzConfigService: NzConfigService,
private cdr: ChangeDetectorRef,
- @Host() private nzCollapseComponent: NzCollapseComponent,
- elementRef: ElementRef,
- renderer: Renderer2
+ @Host() private nzCollapseComponent: NzCollapseComponent
) {
- renderer.addClass(elementRef.nativeElement, 'ant-collapse-item');
+ this.nzConfigService
+ .getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME)
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(() => {
+ this.cdr.markForCheck();
+ });
}
ngOnInit(): void {
@@ -82,6 +97,8 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
this.nzCollapseComponent.removePanel(this);
}
}
diff --git a/components/collapse/nz-collapse.component.ts b/components/collapse/collapse.component.ts
similarity index 58%
rename from components/collapse/nz-collapse.component.ts
rename to components/collapse/collapse.component.ts
index cbbee93fd1d..055ad16dd43 100644
--- a/components/collapse/nz-collapse.component.ts
+++ b/components/collapse/collapse.component.ts
@@ -6,34 +6,45 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
import { InputBoolean, NzConfigService, WithConfig } from 'ng-zorro-antd/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
-import { NzCollapsePanelComponent } from './nz-collapse-panel.component';
+import { NzCollapsePanelComponent } from './collapse-panel.component';
const NZ_CONFIG_COMPONENT_NAME = 'collapse';
@Component({
selector: 'nz-collapse',
exportAs: 'nzCollapse',
- templateUrl: './nz-collapse.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
- styles: [
- `
- nz-collapse {
- display: block;
- }
- `
- ]
+ template: `
+
+ `,
+ host: {
+ '[class.ant-collapse]': 'true',
+ '[class.ant-collapse-icon-position-left]': `nzExpandIconPosition === 'left'`,
+ '[class.ant-collapse-icon-position-right]': `nzExpandIconPosition === 'right'`,
+ '[class.ant-collapse-borderless]': '!nzBordered'
+ }
})
-export class NzCollapseComponent {
- private listOfNzCollapsePanelComponent: NzCollapsePanelComponent[] = [];
+export class NzCollapseComponent implements OnDestroy {
@Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) @InputBoolean() nzAccordion: boolean;
@Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) @InputBoolean() nzBordered: boolean;
-
- constructor(public nzConfigService: NzConfigService) {}
+ @Input() nzExpandIconPosition: 'left' | 'right' = 'left';
+ private listOfNzCollapsePanelComponent: NzCollapsePanelComponent[] = [];
+ private destroy$ = new Subject();
+ constructor(public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef) {
+ this.nzConfigService
+ .getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME)
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(() => {
+ this.cdr.markForCheck();
+ });
+ }
addPanel(value: NzCollapsePanelComponent): void {
this.listOfNzCollapsePanelComponent.push(value);
@@ -58,4 +69,8 @@ export class NzCollapseComponent {
collapse.nzActive = !collapse.nzActive;
collapse.nzActiveChange.emit(collapse.nzActive);
}
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
}
diff --git a/components/collapse/nz-collapse.module.ts b/components/collapse/collapse.module.ts
similarity index 82%
rename from components/collapse/nz-collapse.module.ts
rename to components/collapse/collapse.module.ts
index 8ff4a8c6411..dc24fffae14 100644
--- a/components/collapse/nz-collapse.module.ts
+++ b/components/collapse/collapse.module.ts
@@ -11,8 +11,8 @@ import { NgModule } from '@angular/core';
import { NzOutletModule } from 'ng-zorro-antd/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzCollapsePanelComponent } from './nz-collapse-panel.component';
-import { NzCollapseComponent } from './nz-collapse.component';
+import { NzCollapsePanelComponent } from './collapse-panel.component';
+import { NzCollapseComponent } from './collapse.component';
@NgModule({
declarations: [NzCollapsePanelComponent, NzCollapseComponent],
diff --git a/components/collapse/nz-collapse.spec.ts b/components/collapse/collapse.spec.ts
similarity index 95%
rename from components/collapse/nz-collapse.spec.ts
rename to components/collapse/collapse.spec.ts
index 0fa72119534..8c86b72b7e2 100644
--- a/components/collapse/nz-collapse.spec.ts
+++ b/components/collapse/collapse.spec.ts
@@ -3,9 +3,9 @@ import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { NzCollapsePanelComponent } from './nz-collapse-panel.component';
-import { NzCollapseComponent } from './nz-collapse.component';
-import { NzCollapseModule } from './nz-collapse.module';
+import { NzCollapsePanelComponent } from './collapse-panel.component';
+import { NzCollapseComponent } from './collapse.component';
+import { NzCollapseModule } from './collapse.module';
describe('collapse', () => {
beforeEach(fakeAsync(() => {
@@ -30,15 +30,15 @@ describe('collapse', () => {
});
it('should className correct', () => {
fixture.detectChanges();
- expect(collapse.nativeElement.firstElementChild!.classList).toContain('ant-collapse');
+ expect(collapse.nativeElement!.classList).toContain('ant-collapse');
expect(panels.every(panel => panel.nativeElement.classList.contains('ant-collapse-item'))).toBe(true);
});
it('should border work', () => {
fixture.detectChanges();
- expect(collapse.nativeElement.firstElementChild!.classList).not.toContain('ant-collapse-borderless');
+ expect(collapse.nativeElement!.classList).not.toContain('ant-collapse-borderless');
testComponent.bordered = false;
fixture.detectChanges();
- expect(collapse.nativeElement.firstElementChild!.classList).toContain('ant-collapse-borderless');
+ expect(collapse.nativeElement!.classList).toContain('ant-collapse-borderless');
});
it('should showArrow work', () => {
fixture.detectChanges();
diff --git a/components/collapse/doc/index.en-US.md b/components/collapse/doc/index.en-US.md
index 0483e6514f1..594c1c73faf 100755
--- a/components/collapse/doc/index.en-US.md
+++ b/components/collapse/doc/index.en-US.md
@@ -24,6 +24,7 @@ import { NzCollapseModule } from 'ng-zorro-antd/collapse';
| -------- | ----------- | ---- | ------- | ------------- |
| `[nzAccordion]` | Accordion mode | `boolean` | `false`| ✅ |
| `[nzBordered]` | Set border style | `boolean` | `true` | ✅ |
+| `[nzExpandIconPosition]` | Set expand icon position | `'left' \| 'right'` | `left` | - |
### nz-collapse-panel
diff --git a/components/collapse/doc/index.zh-CN.md b/components/collapse/doc/index.zh-CN.md
index defd041f4fd..8aa3ccd7d8b 100755
--- a/components/collapse/doc/index.zh-CN.md
+++ b/components/collapse/doc/index.zh-CN.md
@@ -25,6 +25,7 @@ import { NzCollapseModule } from 'ng-zorro-antd/collapse';
| --- | --- | --- | --- | --- |
| `[nzAccordion]` | 是否每次只打开一个tab | `boolean` | `false` | ✅ |
| `[nzBordered]` | 是否有边框 | `boolean` | `true` | ✅ |
+| `[nzExpandIconPosition]` | 设置图标位置 | `'left' \| 'right'` | `left` | - |
### nz-collapse-panel
diff --git a/components/collapse/nz-collapse-panel.component.html b/components/collapse/nz-collapse-panel.component.html
deleted file mode 100644
index 9b17d8e33a5..00000000000
--- a/components/collapse/nz-collapse-panel.component.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
diff --git a/components/collapse/nz-collapse.component.html b/components/collapse/nz-collapse.component.html
deleted file mode 100644
index a0a0d99ea94..00000000000
--- a/components/collapse/nz-collapse.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/components/collapse/public-api.ts b/components/collapse/public-api.ts
index 518faea2c5b..705887f3425 100644
--- a/components/collapse/public-api.ts
+++ b/components/collapse/public-api.ts
@@ -6,6 +6,6 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-export * from './nz-collapse-panel.component';
-export * from './nz-collapse.component';
-export * from './nz-collapse.module';
+export * from './collapse-panel.component';
+export * from './collapse.component';
+export * from './collapse.module';
diff --git a/components/collapse/style/entry.less b/components/collapse/style/entry.less
index 06547c43acd..96cebe33bff 100644
--- a/components/collapse/style/entry.less
+++ b/components/collapse/style/entry.less
@@ -1 +1,2 @@
@import './index.less';
+@import './patch.less';
diff --git a/components/collapse/style/patch.less b/components/collapse/style/patch.less
new file mode 100644
index 00000000000..1798a5aecac
--- /dev/null
+++ b/components/collapse/style/patch.less
@@ -0,0 +1,6 @@
+nz-collapse {
+ display: block;
+}
+nz-collapse-panel {
+ display: block;
+}