Como criei um acordeão Angular simples?

É uma boa ideia tocar acordeão para relaxar no seu tempo livre.

Quando eu era amador, não conhecia o framework Angular.

Naquela época, eu não sabia nada, exceto HTML puro, CSS e JS.

Então, vamos ver como fiz minha primeira sanfona Angular.

Claro, tenho certeza que você já construiu o ambiente.

ng new angular-accordion

      
                

                    
                    
                
            

"Hu, por favor, não nos deixe loucos, não temos tempo suficiente para ouvir sua tagarelice."

“Absolutamente, é muito simples”.

Agora, remova o conteúdo de “app.component.html” e copie o código abaixo.

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

Agora, vamos criar o arquivo acordeon-type.ts no src/app holder.

Aqui, definiremos a interface de dados para sanfona.

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>