How can I limit ngFor repeat to some number of items in Angular?

by

This seems simpler to me

<li *ngFor="let item of list | slice:0:10; let i=index" class="dropdown-item" (click)="onClick(item)">{{item.text}}</li>

Closer to your approach

<ng-container *ngFor="let item of list; i as index">
  <li class="dropdown-item" (click)="onClick(item)" *ngIf="i<11">{{item.text}}</li>
</ng-container>

alternative

<ng-template ngFor let-item [ngForOf]="list" let-i="index">
  <li class="dropdown-item" (click)="onClick(item)" *ngIf="i<11">{{item.text}}</li>
</ng-template>

More Related Contents:

  1. Iterate over object in Angular [duplicate]
  2. The Angular Compiler requires TypeScript >=3.4.0 and
  3. Angular2 nested template driven form
  4. Access multiple viewchildren using @viewchild
  5. How to add debounce time to an async validator in angular 2?
  6. caching results with angular2 http service [duplicate]
  7. Difference between [ngClass] vs [class] binding
  8. Angular Subscribe within Subscribe
  9. How to store token in Local or Session Storage in Angular 2?
  10. How to use [(ngModel)] on div’s contenteditable in angular2?
  11. Angular 2 Component Constructor Vs OnInit [duplicate]
  12. How can I conditionally disable the routerLink attribute?
  13. Cannot read property ‘push’ of undefined(…) in angular2
  14. two way binding with safe navigation operator
  15. When to use square brackets [ ] in directives @Inputs and when not?
  16. Angular2 – Interaction between components using a service
  17. Angular 2 Testing – Async function call – when to use
  18. Class inheritance support
  19. Uncaught (in promise): Error: StaticInjectorError(AppModule)[options]
  20. VSCode debugger blank page and loading on launch with VS Code 1.76.1 and Chrome 111
  21. Update to Angular v6 – Module not found: Error: Can’t resolve ‘fs’
  22. How to translate mat-paginator in Angular 4?
  23. JIT compiler unavailable after angular update
  24. bootstrap not connect to the angular 6?
  25. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  26. Angular 4 Material table highlight a row
  27. Angular Mat Select Multiple selectionchange finding which option was changed
  28. Angular 4: “Cannot find name ‘require’
  29. Does Angular2 use Web Components?
  30. Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Leave a Comment