¿Cómo creé un acordeón angular simple?

Es buena idea tocar el acordeón para relajarse en su tiempo libre.

Cuando era un aficionado, no conocía el marco Angular.

En ese momento, no sabía nada excepto HTML puro, CSS y JS.

Entonces, veamos cómo hice mi primer acordeón angular.

Por supuesto, estoy bastante seguro de que ya ha creado el entorno.

ng new angular-accordion

      
                

                    
                    
                
            

"Hu, por favor no nos vuelvas locos, no tenemos suficiente tiempo para escuchar tus balbuceos".

“Absolutamente, es muy simple”.

Ahora, elimine el contenido de "app.component.html", luego copie el código a continuación.

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

Ahora, hagamos el archivo accordion-type.ts en el titular de src/app.

Aquí, definiremos la interfaz de datos para acordeón.

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>