Show / Hide list items in Angular in the HTML angular

Question

I have a list of 4 items, the first 2 visible and the last 2 hidden. And a "show more / less" button that toggles the visibility of the last 2 items.

<ol>
  <li *ngFor="let errorList of errorItems | slice: 0:count">
    <p>{{ errorList }}</p>
  </li>
</ol>
<p *ngIf="errorItems.length > 2" (click)="viewMoreClicked()">view more details</p>

I need view more and view less

StackOverflow isn't a code writing service, post what you've tried. P.S. Your `*ngIf` is not going to let you do what you described, you should toggle a "isVisible" property instead — maury844, Jun 22 '20 at 14:21

score 1 · Accepted Answer · answered Jun 22 '20 at 11:46

Try this -

<ol>
  <li *ngFor="let type of items | slice: 0:count">
    <p>{{ type?.value }}</p>
  </li>
</ol>
<p *ngIf="items.length > 2 && count == 2" (click)='count=items.length'>view more details</p>
<p *ngIf="count != 2" (click)='count=2'>view less details</p>

count = 2;

Working Example

Show / Hide list items in Angular in the HTML angular

1 Answers1