Ниже приведен код файлов CSS, ts и HTML. Я хочу создать пользовательский аккордеон, и я нахожусь в новой версии angular, поэтому хочу создать его, когда я нажимаю на div, тогда класс должен добавить тот же div и рядом с ним. В настоящее время я делаю с добавлением класса на тот же и следующий div и добавление отображения нет / блок. Пожалуйста, помогите .. Ниже HTML файл:
<div class="accordion">
<div
class="accordion-header"
(click)="clickEvent()"
[ngClass]="status ? 'open' : ''"
>
<div class="row">
<div class="col-md-6 form-group">
Calculation of the error -1
</div>
<div class="col-md-2 d-flex justify-content-end align-items-center">
<span class="accordion-icon">
<fa-icon [icon]="icon.minus" class="minusIcon"></fa-icon>
<fa-icon [icon]="icon.plus" class="plusIcon"></fa-icon>
</span>
</div>
</div>
</div>
<div class="secOption" [ngClass]="status ? 'active' : ''">
details
</div>
</div>
Ниже ts файл:
import { Component, Input, Output, EventEmitter, OnInit } from "@angular/core";
import {
faMinus,
faPlus,
} from "@fortawesome/free-solid-svg-icons";
@Component({
selector: "app-accordion",
templateUrl: "./accordion.component.html",
styleUrls: ["./accordion.component.scss"]
})
export class AccordionComponent implements OnInit {
status: boolean = false;
clickEvent() {
this.status = !this.status;
}
icon = {
minus: faMinus,
plus: faPlus,
};
constructor() {}
ngOnInit() {}
}