I am struggling to implement an accordion feature in Angular that displays a brief description of the content initially, and when clicked on, reveals the full description. I need to truncate the content and display it in the header. Despite my attempts, I have been unsuccessful in doing so. In the provided code snippet, I have utilized "announcement.title" for the heading, but I would like to incorporate a portion of "announcement.content" as well. My goal is to trim the content to a certain number of characters and display it in the heading. Upon clicking, the entire content should be visible. Any assistance on how to accomplish this task would be greatly appreciated.
HTML code :
<accordion>
<div *ngFor="let announcement of announcements; let i = index">
<accordion-group [heading]="announcement.title">
<div class="announcement-body" [innerHTML]="announcement.content"> {{ announcement?.content }}
</div>
</accordion-group>
</div>
</accordion>
TS file:
announcements: any[] = [];
ngOnInit() {
this.showAnnouncements();
}
showAnnouncements() {
this.configService.getAnnouncements().then(
(data: any) => {
for (const key in data) {
this.announcements.push({
title: data[key].title,
content: data[key].content
});
}
}
).catch((error) => {
console.log(error);
});
}
Furthermore, I require the title and truncated content to be displayed in the heading on separate lines with distinct fonts.