Как collapse раскрывать каждый свой?

В Angular можно легко реализовать раскрытие каждого collapse-блока по отдельности. Для этого используются директивы, условные операторы и переменные состояния.

1. В начале, создайте новый компонент collapse-item.component.ts, который будет представлять отдельный collapse-блок:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-collapse-item',
  template: `
    <div (click)="toggle()">
      <h3>{{ title }}</h3>
      <div [hidden]="!expanded">
        <ng-content></ng-content>
      </div>
    </div>
  `,
})
export class CollapseItemComponent {
  @Input() title: string;
  expanded = false;

  toggle() {
    this.expanded = !this.expanded;
  }
}

2. В основном компоненте, где вы хотите использовать collapse, добавьте CollapseItemComponent в шаблон:

<app-collapse-item title="Item 1">
  <!-- Содержимое collapse-блока 1 -->
</app-collapse-item>

<app-collapse-item title="Item 2">
  <!-- Содержимое collapse-блока 2 -->
</app-collapse-item>

<app-collapse-item title="Item 3">
  <!-- Содержимое collapse-блока 3 -->
</app-collapse-item>

3. Теперь каждый collapse-блок будет иметь свой заголовок и содержимое, а также будет раскрываться при клике на заголовок блока.

В этом примере мы используем директиву [hidden], чтобы скрывать или отображать содержимое блока в зависимости от значения переменной expanded в компоненте CollapseItemComponent. Когда пользователь нажимает на заголовок блока, происходит переключение значения переменной expanded с помощью метода toggle().

Вы можете дополнить этот пример, добавив дополнительные параметры и функциональность в отдельный collapse-блок, в зависимости от ваших потребностей.