Allow the collapse component to have different content

[duxard]

What problem does this feature solve?

Hi Team,

I've been playing around with a collapse component https://ng.ant.design/components/collapse/en

According to official documentation I can provide an individual content for each of tabs as follows:

<nz-collapse>
      <nz-collapse-panel   *ngFor="let panel of panels" >
         <p>{{ panel.content }}</p>
      </nz-collapse-panel>
    </nz-collapse>

...

panels = [
    {
      content: 'content 1'
    },
    {
       content: 'content 2'
    },
    {
       content: 'content 3'
    }
  ];

So, basically, I can provide text only. But what if I would like to add some other components to each individual panel? E.g. for the first one - some checkboxes, to the second one - radio buttons, to the third one - some html mark-up. Basically, each panel should have smth like ng-content to provide mark-up from "outer" world.

Is there a way to achieve this?

Thanks, Aleksandr

What does the proposed API look like?

N/A

[232650413]

刚做完这么个功能，也是准备html写进去，结果只能循环进去，我用ng-template 加判断进去

[duxard]

@232650413 你能提供一个代码示例吗？

Thank you

[232650413]

@232650413 你能提供一个代码示例吗？

Thank you

collapseTypes = [
  { title: 'menu', type: 'menu', active: true},
  { title: 'carousel', type: 'carousel', active: false, pictureSize: [702, 298], pictureQuality: 100},
  { title: 'grid', type: 'grid', active: false, pictureSize: [128, 128], pictureQuality: 10},
  { title: 'banner', type: 'banner', active: false, pictureSize: [702, 162], pictureQuality: 80},
];

<nz-collapse-panel [nzHeader]="TT" [(nzActive)]="item.active" [nzExtra]="extraTpl" *ngFor="let item of h5pcs.collapseTypes; let i = index">
....
<ng-template [ngIf]="item.type === 'banner'">
// banner

我就这么写的

[duxard]

@232650413 Thank you man!