показать больше и показать меньше в angular

Question

Как сделать, чтобы показывать больше и показывать меньше в angular. Если элементов списка (упорядоченный список) меньше 2, показывать больше не должно, а если список больше 2, полный список должен быть виден, а при щелчке по показу меньше он должен показать 2 перечисленных элемента

Answer 1

Я создал игровую площадку для вашего случая. вы можете поиграть

TS:

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  values = [...Array(10).keys()];
  defaultLinkTitle = "showLess";
  onClick() {
    this.defaultLinkTitle =
      this.defaultLinkTitle === "showLess" ? "showMore" : "showLess";
    this.values =
      this.defaultLinkTitle === "showLess"
        ? this.values
        : this.values.slice(0, 2);
  }
}

HTML:

<ul id="datalist" *ngFor="let value of values">
  <li>value</li>
</ul>
<a *ngIf="values.length > 2" href="javascript:void(0)" (click)="onClick()"
  >{{defaultLinkTitle}}</a
>

PlayGround: https://codesandbox.io/s/condescending-dawn-best4

Answer 2

Попробуйте это

.component.html

<ul>
  <li *ngFor="let item of items | slice:0:2">
    {{ item }}
  </li>
  <ng-container *ngIf="isExpanded">
    <ng-container *ngFor="let expandedItem of items; let i = index">
      <li *ngIf="i >= 2">
        {{ expandedItem }}
      </li>
    </ng-container>
  </ng-container>
  <li *ngIf="items.length > 2 && !isExpanded">
    <button mat-button (click)="expandItems()">
      Show all
    </button>
  </li>
</ul>

.component.ts

expandItems() {
  this.expanded = true;
}