간단한 Angular 아코디언을 어떻게 만들었습니까?

여가 시간에 긴장을 풀기 위해 아코디언을 연주하는 것이 좋습니다.

아마추어 시절에는 Angular 프레임워크를 몰랐습니다.

그 당시 저는 순수한 HTML, CSS, JS 외에는 아무것도 몰랐습니다.

그런 다음 첫 번째 Angular 아코디언을 어떻게 만들었는지 살펴보겠습니다.

물론 이미 환경을 구축했다고 확신합니다.

ng new angular-accordion

      
                

                    
                    
                
            

"후, 우리를 미치게 만들지 마세요. 당신의 옹알이를 들을 시간이 충분하지 않습니다."

"물론입니다. 정말 간단합니다."

이제 "app.component.html"의 내용을 제거하고 아래 코드를 복사하십시오.

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

이제 src/app holder에 accordion-type.ts 파일을 만들어 봅시다.

여기에서는 아코디언에 대한 데이터 인터페이스를 정의합니다.

export interface FAQ {
    visible:boolean;
    image:string;
    title:string;
    content:string;
}

      
                

                    
                    
                
            

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

import { FAQ } from './accordion-type';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  faqs: FAQ[] = [
    {
      visible: true,
      image: '/assets/images/icons/faq-plus.svg',
      title: 'What is Lorem Ipsum?',
      content: 'Consulting is unfortunately a vast industry, and business consultants operate at all levels. No matter what stage of business you're in, you want to find (and hire!) consultants who can meet you where your business is at.  doing so.'
    },
    {
      visible: false,
      image: '/assets/images/icons/faq-plus.svg',
      title: 'Why do we use it?',
      content: 'Consulting is unfortunately a vast industry, and business consultants operate at all levels. No matter what stage of business you're in, you want to find (and hire!) consultants who can meet you where your business is at.  doing so.'
    },
    {
      visible: false,
      image: '/assets/images/icons/faq-plus.svg',
      title: 'Where does it come from?',
      content: 'Consulting is unfortunately a vast industry, and business consultants operate at all levels. No matter what stage of business you're in, you want to find (and hire!) consultants who can meet you where your business is at.  doing so.'
    },
    {
      visible: false,
      image: '/assets/images/icons/faq-plus.svg',
      title: 'Where can I get some?',
      content: 'Consulting is unfortunately a vast industry, and business consultants operate at all levels. No matter what stage of business you're in, you want to find (and hire!) consultants who can meet you where your business is at.  doing so.'
    },
  ]
  openMessage(index: number) {
    this.faqs.map(ele => {
      ele.visible = false;
      ele.image = '/assets/images/icons/faq-plus.svg';
    });
    this.faqs[index].visible = true;
    this.faqs[index].image = '/assets/images/icons/faq-minus.svg';
  }
}

<div class="flex flex-col container mx-auto py-12 px-12 max-sm:px-6">
  <div *ngFor="let faq of faqs; let indexOfelement=index;"
    class="border-b-2 border-[#001F691A] py-2 flex flex-col gap-4">
    <div class="flex justify-between gap-4" (click)="openMessage(indexOfelement)">
      <p class="text-[#00171B] text-xl font-medium">{{faq.title}}</p>
      <img src={{faq.image}} alt="" />
    </div>
    <p *ngIf="faq.visible" class="text-[#00171BB2] text-lg font-normal">{{faq.content}}</p>
  </div>
</div>