Answer:
Nikhil was on the right track with his solution, but I had to make some modifications. Specifically, I needed to create and initialize an empty array to display the details properly. Here's the updated code:
if (this.name.toLowerCase() == value.name.toLowerCase()) {
this.showingDetails.push(false);
return value;
}
else {
return null;
}
After making these changes, I followed Nikhil's instructions for the rest of the process.
Query:
I have a website with an unordered list containing name, link, and a lengthy text block for each item. The data is dynamically fetched from a database, making it difficult to determine the number of items in advance. Is there a way to hide the long text initially and show it only when the user clicks a specific link? Currently, toggling visibility displays the text for all items simultaneously.
I'm using Angular/typescript for development, and here's what I have implemented so far:
<ul class='list-group' *ngFor='#item of Items'>
<li>
<hr>
<p><strong>{{ item.sourceType }}:</strong> <em>{{ item.sourceName }}</em></p>
<p><strong>Link:</strong> <a target="_blank" href="{{ item.source }}">{{ item.source }}</a></p>
<p><strong>Details:</strong> <a (click)="showDetails()">{{ showHideTxt }}</a></p>
<p style="white-space:pre-wrap" *ngIf="showingDetails">{{ item.details }}</p>
</li>
</ul>
And in the component class:
items:Item[] = [];
name:string = "unknown";
foundItems:Item[];
showHideTxt:string = "show";
showingDetails:boolean = false;
itemSubscription:Subscription;
constructor(private itemService:ItemService)
{
}
ngOnInit()
{
this.itemSubscription = this.itemService.getItems()
.subscribe(
itemData => this.items = itemData.json(),
err => console.log(err),
() => this.foundItems = this.items.filter((value)=>{
return value.searchName.indexOf(this.name.toLowerCase()) != -1 ? value : null
});
)
this.name = decodeURI(this.routeParams.get('name'));
console.log(this.name.toLowerCase());
}
ngOnDestroy()
{
this.itemSubscription.unsubscribe();
}
showDetails()
{
this.showingDetails = !this.showingDetails
this.showingDetails
?this.showHideTxt = "hide"
:this.showHideTxt = "show";
}