Angular Accordian with short description - html

Question

I am trying to use accordian in angular which can show a shor description of the content. And when you click on it, it should show the full description. So basically i need to slice the content and show it in the header. But i am unable to do so. Below is my code, as you can see I have announcement.title in teh heading. However i need to add part of announcement.content in the heading. So i need to slice the content for upto a few characters and show it in the heading. Then when someone click on it, i show the full content. I am not sure how to achieve this. Can someone help ?
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);
});
}
enter image description here
I also need the title and the sliced content to appear in the heading on different lines with different font.

Answer 1

You can append some portion of your content to the title using the string slice method. For example:
this.announcements.push({
title: data[key].title + data[key].content.slice(0,10),
content: data[key].content
});
This would add the first 10 characters of your content string to your title.
If you wanted some fixed length, you could do something like:
title: data[key].title + data[key].content.slice(0,MaxLength - data[key].title.length)
For the last case, you'd have to ensure that your title is always below max length or protect the slice from going negative.