Jak stworzyłem prosty akordeon Angular?

Dobrym pomysłem jest granie na akordeonie dla relaksu w wolnym czasie.

Kiedy byłem amatorem, nie znałem frameworka Angular.

W tamtym czasie nie znałem nic poza czystym HTML, CSS i JS.

Następnie zobaczmy, jak zrobiłem mój pierwszy akordeon Angular.

Oczywiście jestem prawie pewien, że już zbudowałeś środowisko.

ng new angular-accordion

      
                

                    
                    
                
            

„Hu, proszę, nie doprowadzaj nas do szaleństwa, nie mamy wystarczająco dużo czasu, aby słuchać twojego bełkotu”.

„Absolutnie, to naprawdę proste”.

Teraz usuń zawartość „app.component.html”, a następnie skopiuj poniższy kod.

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

Teraz utwórzmy plik accordion-type.ts w uchwycie src/app.

Tutaj zdefiniujemy interfejs danych dla akordeonu.

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>