每天都會發現bug

先弄一個手風琴元件

<section class="bg-neutral-100">
  <div class="flex justify-end mb-16 gap-[20px]">
    <button class="btn-text" (click)="accordion().openAll()">全部展開</button>
    <button class="btn-text" (click)="accordion().closeAll()">全部閉合</button>
  </div>

  <mat-accordion multi>

    @for (item of arrayList(); track $index) {

      <mat-expansion-panel>
        <mat-expansion-panel-header >
          這裡是標題
        </mat-expansion-panel-header>
        <div class="grid grid-cols-4  grid-rows-1 gap-[10px] m-16">
          這裡是內容
        </div
      </mat-expansion-panel>

    }

  </mat-accordion>

</section>

從設計師那邊拿到稿件
只想要顯示兩個手風琴、其他項目下面隱藏

順便歪樓練model用法
isExpanded = model.required()
在手風琴下面放一個div
偵測手風琴長度，需不需要這個div放入文字( 收合/展開 )
click 時 isExpanded 往外帶資料
送進另外一個directive 算出是否需要顯示

import { Directive, effect, ElementRef, HostListener, inject, input, model, Renderer2 } from '@angular/core';
import { isShowToggleCollapseBtn } from '../accordion.constants';

@Directive({
  selector: '[toggleCollapseDirective]',
  standalone: true
})
export class ToggleCollapseDirective {
  length = input<number>(1)
  isExpanded = model<boolean>(false)

  el = inject(ElementRef);
  renderer = inject(Renderer2)
  constructor() {
    effect(() => {
      const element = this.el.nativeElement;
      const text = this.isExpanded() ? '收合' : '展開'

      if (isShowToggleCollapseBtn(this.length())) {
        this.renderer.addClass(element, 'btn-outline')
        this.renderer.setProperty(element, 'innerHTML', text);
      } else {
        this.renderer.removeClass(element, 'btn-outline')
        this.renderer.setProperty(element, 'innerHTML', '');
      }
    })
  }

  @HostListener('click')
  onClick(): void {
    this.isExpanded.update(current => !current)
  }
}

import { Directive, effect, ElementRef, inject, input, model, Renderer2 } from '@angular/core';
import { isShowToggleCollapseBtn } from '../components/accordion-list/accordion.constants';

@Directive({
  selector: '[isShowAccordionItem]',
  standalone: true
})
export class IsShowAccordionItemDirective {
  index = input.required<number>()
  total = input.required<number>()
  isExpanded = model.required<boolean>()
  el = inject(ElementRef)
  renderer = inject(Renderer2)
  constructor() {
    effect(() => {
      if (isShowToggleCollapseBtn(this.index())) {
        return
      }
      const element = this.el.nativeElement
      if (this.isExpanded() && isShowToggleCollapseBtn(this.total())) {
        this.renderer.removeClass(element, 'hidden')
        this.renderer.addClass(element, 'block')
      }
      else {
        this.renderer.removeClass(element, 'block')
        this.renderer.addClass(element, 'hidden')

      }
    })
  }

}

今天有github

今天還有StackBlitz