how to use the see more button to display more array using angular-CodePudding

I created an array and displayed it in component, by ngFor directive, with a see more button, I want to display 4 array elements at the beginning, and when I click on the button it displays other 4 elements and so on respectively, until the end of the array, the button will be hidden.

more.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'more',
  templateUrl: './more.component.html',
  styleUrls: ['./more.component.css']
})
export class MoreComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  courses:any[]=[
    'laravel','symfony','angular','react',
    'laravel1','symfony1','angular1','react1',
    'laravel2','symfony2','angular2','react2',
    'laravel3','symfony3','angular3','react3',
    'laravel4','symfony4','angular4','react4',
    'laravel5','symfony5','angular5','react5',
  ];
}

more.component.html

<div *ngFor="let cours of courses">
    {{ cours }}

</div>
<button>See More...</button>

CodePudding user response：

Just use a variable "count" an slice pipe

count:number=1;

<div *ngFor="let cours of courses|slice:0:count*4">
    {{ cours }}

</div>
<button *ngIf="count*4<courses.length" (click)="count=count 1">See More...</button>