ngFor speed controll 반복문 속도 조절 Directive 예시

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ngForDelay]'
})
export class NgForDelayDirective {
  @Input('ngForDelay') set ngForDelay(value: any[]) {
    value.forEach((item: any, index: number) => {
      setTimeout(() => {
        this.viewContainer.createEmbeddedView(this.templateRef, {
          $implicit: item,
          index: index
        });
      }, index * 1000); // 인덱스 * 1초
    });
  }

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}
}

1. 디렉티브 파일

 

 

<ng-container *ngFor="let menu of menus; index as i">
  <div
    *ngIf="menu.data!['menu']"
    [ngForDelay]="menus"
    @baseIntroTopAnimation
    class="flex font-semibold transition-all cursor-pointer select-none py-7 px-7 active:text-gray-300 active:scale-90 hover:text-gray-300"
    (click)="handleMenu(menu)"
    [ngClass]="isScrollMoved ? 'text-[#131313]' : 'text-white'"
  >
    {{ menu.data!['label'] }}
  </div>
</ng-container>

2. 템플릿 예시

3. ng-container 를 사용해서 반복문을 돕니다

4. 내부 div 태그에 [ngForDelay] 디렉티브를 사용합니다.