Show/Hide Divs dynamically in angular - html

Question

I have 5 divs on my page. When my form is loaded, all 5 divs gets populated with some data. However, I have to display only 3 div at a time and when user takes any action or clicks on cross(X) sign on
any div, we have to display next div.
Need to figure out how to display only 3 records i.e. only 3 div ?
At a time max 3 divs can be displayed
//Model
export class Bird{
id: number;
name: string;
}
This is the sample collection that we need to display in DIV on form
arrBirds: Birds [] = [
{ id:1, name: 'Bells Sparrow' },
{ id:2, name: 'Mourning Dove'},
{ id:3, name: 'Bald Eagle' },
{ id:4, name: 'Sparrow' }
{ id:5, name: 'Parrot' }
];
//html
This is how, I am displaying the data in DIV on form.
<div *ngFor='let bird of arrBirds' (click)="onSelection(bird)">
<div>{{ bird.name }}</div>
</div>
// this code is to take any action on what user has selected in div
<div *ngIf="selectedBird">
{{selectedBird.id}} {{selectedBird.name}}
</div>
//
onSelection(userSelectedBird: Bird}{
this.selectedBird = userSelectedBird;
}

Answer 1

You should define array of pages with 'active' state, i.e
const pages = [{
id: 1,
name: 'page1'
active: true
}, {
id: 2,
name: 'page2'
active: true
}, {
id: 3,
name: 'page3'
active: true
}, {
id: 4,
name: 'page4'
active: false
}, {
id: 5,
name: 'page5'
active: false
}]
Based on selection, you can set active flag true/false. You can use active Property with *ngIf in the Template file.
https://stackblitz.com/edit/angular-sxzrlp