Press the 'display additional' option within ngFor in Angular 2

Question

Press the 'display additional' option within ngFor in Angular 2

I have a long list of more than 50 items that I need to display. What I want to do is show only the first 10 items initially, and then when a button is clicked, reveal the next 10 items, and keep repeating this process until all items are shown.

<ul class="results-main-content">
  <li class="right-results-section">
    <ul class="_result-list">
      <li class="result" *ngFor="let searchResult of searchResults">
        {{searchResult.name}}
      </li>
    </ul>
  </li>
  <li class="showmore">
    <button class="show-more">
      <img class="more" src="_arrow-down.svg" alt="" />
    </button>
  </li>
</ul>

Would it be possible to implement this functionality in angular2?

If anyone has any insights or solutions to offer, please share with me and the wider SO community.

Thank you

angular button typescript show-hide ngfor

Answer 1

Answer №1

To limit the number of items displayed, you can utilize the slice pipe:

show = 5;

<li *ngFor="let searchResult of searchResults|slice:0:show let i=index">
  {{searchResult.name}}
  <button *ngIf="i==4 && show == 5" (click)="show = searchResults.length">Show More</button>
</li>

Check out this Plunker example

Related resources:

How to display only one item in ngFor loop in Angular?

Answer 2

To limit the number of items displayed, you can utilize the slice pipe:

show = 5;

<li *ngFor="let searchResult of searchResults|slice:0:show let i=index">
  {{searchResult.name}}
  <button *ngIf="i==4 && show == 5" (click)="show = searchResults.length">Show More</button>
</li>

Check out this Plunker example

Related resources:

How to display only one item in ngFor loop in Angular?

Answer 3

Answer №2

By adapting Günter Zöchbauer's code, you can achieve the desired functionality by referring to this sample

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

@Component({
  selector: 'my-app',
  template: `
<ul>  
 <li *ngFor="let tag of tags | slice:0:show; let i=index">
  <a href="#" class="span-tag tag">{{ tag }}</a>
 </li>
<div *ngIf="show < tags.length" (click)="increaseShow()">DropDown Button</div>
</ul>
`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  show = 10;
  tags = ['a','b','c','d','e','f','g','h','i','j','a','b','c','d','e','f','g','h','i','j', 'a','b','c','d','e','f','g','h','i','j','a','b','c','d','e','f','g','h','i','j', 'a','b','c','d','e','f','g','h','i','j'];

  increaseShow() {
   this.show += 10; 
 }
}

Check out the example on StackBlitz

Answer 4

By adapting Günter Zöchbauer's code, you can achieve the desired functionality by referring to this sample

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

@Component({
  selector: 'my-app',
  template: `
<ul>  
 <li *ngFor="let tag of tags | slice:0:show; let i=index">
  <a href="#" class="span-tag tag">{{ tag }}</a>
 </li>
<div *ngIf="show < tags.length" (click)="increaseShow()">DropDown Button</div>
</ul>
`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  show = 10;
  tags = ['a','b','c','d','e','f','g','h','i','j','a','b','c','d','e','f','g','h','i','j', 'a','b','c','d','e','f','g','h','i','j','a','b','c','d','e','f','g','h','i','j', 'a','b','c','d','e','f','g','h','i','j'];

  increaseShow() {
   this.show += 10; 
 }
}

Check out the example on StackBlitz

Answer 5

Answer №3

Below is the recommended code snippet for your reference:

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <ul class="results-main-content">
  <li class="right-results-section">
    <ul class="_result-list">
      <li class="result" *ngFor="let item of content">
        {{item.colorName}}
      </li>
    </ul>
  </li>
  <li class="showmore">
    <button class="show-more" (click)="getData()" [disabled]="counter>=content.length">
      Show more
    </button>
  </li>
</ul>
    </div>
  `,
})
export class App {
  name:string;
  data = [...]; // refer plunker
  content:any[]=new Array();
  counter:number;
  constructor() {
    this.counter=0;
    this.getData();
    this.name = 'Angular2'
  }
  getData(){
    console.log(this.counter + 'dat size'+this.data.length)

    for(let i=this.counter+1;i<this.data.length;i++)
    {
    this.content.push(this.data[i]);
    if(i%10==0) break;
    }
    this.counter+=10;

  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

LIVE DEMO

Answer 6

Below is the recommended code snippet for your reference:

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <ul class="results-main-content">
  <li class="right-results-section">
    <ul class="_result-list">
      <li class="result" *ngFor="let item of content">
        {{item.colorName}}
      </li>
    </ul>
  </li>
  <li class="showmore">
    <button class="show-more" (click)="getData()" [disabled]="counter>=content.length">
      Show more
    </button>
  </li>
</ul>
    </div>
  `,
})
export class App {
  name:string;
  data = [...]; // refer plunker
  content:any[]=new Array();
  counter:number;
  constructor() {
    this.counter=0;
    this.getData();
    this.name = 'Angular2'
  }
  getData(){
    console.log(this.counter + 'dat size'+this.data.length)

    for(let i=this.counter+1;i<this.data.length;i++)
    {
    this.content.push(this.data[i]);
    if(i%10==0) break;
    }
    this.counter+=10;

  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

LIVE DEMO

Press the 'display additional' option within ngFor in Angular 2

Answer №1

Answer №2

Answer №3

Similar questions

Mastering checkbox selection in Angular reactive formsLearn how to effortlessly manage the checked status of

Exploring Angular 10's advanced forms: delving into three levels of nested form groups combined with

Azure Function responding with a 401 error code upon passing parameters through a proxy

Exploring the capabilities of the VSCode Volar extension in a project utilizing Vue 2, Nuxt, Typescript, and the @nuxtjs composition-api

Tips for successfully sending a variable through setOnClickListener

Retrieving variables from JavaScript files in TypeScript

Creating Geometric Artwork with a Button (Python Tkinter)

Exploring the sharing of observables/subjects in Angular 2

What is the best way to assign a value to a class variable within a method by referencing the 'this' keyword?

ESLint and Prettier are butting heads when trying to run their commands consecutively

Can you provide an example of a valid [routerLink] for a relative auxiliary route?

The functionality to automatically close the Material Sidebar upon clicking a navigation item is not functioning properly

Angular 7.3.9 encountered an issue: ERROR ts(37,44): error TS1109 - An expression was expected but

Enhancing search capabilities in Angular 8.1.2 by filtering nested objects

Setting the "status" of a queue: A step-by-step guide

What is the best way to link three different types of http requests in succession and adaptively?

Having trouble accessing Vuex's getter property within a computed property

Can *ngFor in Angular handle asynchronous rendering?

Issue with e2e.js file format in Cypress Support

The data type 'string | number | boolean' cannot be assigned to type 'undefined'. Specifically, the type 'string' is incompatible with type 'undefined'. Error code: ts(2322)