I have been struggling with an issue that I couldn't resolve even after consulting the Angular documentation and various tutorials. The problem lies in my child component accordeon, which is utilized in multiple others. Within the accordeon, it receives a boolean value from the parent component to determine whether it should be open or closed. Additionally, the accordeon consists of two ng-content sections - one for the title provided by the parent component and another for the content.
Here is the HTML code snippet for the accordeon:
<div class="d-flex jc-between ai-center p-s" (click)="toggleAccordeon();" [ngClass]="specialAccordeon ? 'accordeon' : 'special-accordeon'">
<ng-content select="[slot=title]"></ng-content>
<span class="icon-chevron_bottom" [ngClass]="accordeonOpened ? 'rotation_180' : ''"></span>
</div>
<ng-content [@openCloseAccordeon]=animateAccordeon select="[slot=content]" [ngStyle]="accordeonOpened && {'display': 'none'}"></ng-content>
The corresponding .ts file for accordeon:
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { state, style, transition, animate, trigger } from '@angular/animations';
@Component({
selector: 'srp-accordeon',
templateUrl: './accordeon.component.html',
styleUrls: ['./accordeon.component.scss'],
animations: [
trigger('openCloseAccordeon', [
state('initial', style({ display: 'none', })),
state('final', style({ display: 'block', })),
transition('initial => final', [ animate('1s') ]),
transition('final => initial', [ animate('2s') ]),
]),
]
})
export class AccordeonComponent implements OnInit {
accordeonOpened = false;
animateAccordeon = 'initial';
@Output() open: EventEmitter<any> = new EventEmitter();
@Output() close: EventEmitter<any> = new EventEmitter();
@Output() openAccordeon: EventEmitter<any> = new EventEmitter();
@Output() closeAccordeon: EventEmitter<any> = new EventEmitter();
@Input() specialAccordeon;
public toggleAccordeon(): void {
this.animateAccordeon = this.animateAccordeon === 'initial' ? 'final' : 'initial';
this.accordeonOpened = !this.accordeonOpened;
if (this.accordeonOpened) {
this.open.emit(true);
} else {
this.close.emit(false);
}
if (this.animateAccordeon === 'initial') {
this.closeAccordeon.emit('initial');
} else {
this.openAccordeon.emit('final');
}
}
constructor() { }
ngOnInit() {
}
}
With regards to the parent component order-delivery, here is the relevant part of the HTML:
Although I have managed to control the opening and closing behavior using ng-class, integrating [@openCloseAccordeon]=animateAccordeon has not been successful.
<srp-accordeon [specialAccordeon]="true" (close)="accordeonOpened = false" (open)="accordeonOpened = true" (closeAccordeon)="animateAccordeon = 'initial'" (openAccordeon)="animateAccordeon = 'final'">
<ng-container slot="title">{{currentOrder.statusLabel}} {{(!currentOrder.isCanceled ? currentOrder.isDeliveryAtHome ? 'order.atHome' : 'order.inWithdrawalPoint' : string.Empty) | translate}}</ng-container>
<ng-container slot="content">
<div class="order-delivery__details mb-s" [ngClass]="accordeonOpened ? 'accordeon-opened' : 'accordeon-closed'">
In conclusion, I am trying to trigger the animation upon user interaction with the . It seems like I might be missing a crucial piece of data to pass from the order-delivery component to the accordeon, but I can't quite figure out what that is.
Any assistance you can provide would be greatly appreciated. Thank you.