Questions tagged ngfor

Explore the latest questions and answers asked by our top developers.

Saving indices in an array with * ngfor and use them in an * ngI

It is possible to execute a method in *ngfor to send the indices as a parameter, save them in an array and use that array in an *ngIf? For example: .HTML <table> <tr *ngFor="let data of info; let i=index; executeMethod(i)"> <td *ngIf="i==getIndex(i)"></td> </tr> </table> .TS arrayExample: any[] = []; executeMethod(index: any) { this.arrayExample.push(index); } getIndex(){ […]

Typescript pagination

I am trying to create a pagination functionality for an Angular project and I have to do this only with typescript. Task: paginate an array, number of objects displayed per page is 15. My declarations are: PAGE_SIZE: number = 15; total: number = this.booksArray.length; pageNumber: number = 1; pageBooks!: BookModel[]; numberOfPages: number = Math.ceil(; currentPage!: […]

By DBT92
Categorized as angular, arrays, ngfor, pagination, typescript Tagged , , , ,

ng for loop into other ng for loop not work Angular

I want display model array list using ngFor into other ng for but I am having a series of problems since apparently the properties of my model are not recognized from the html. But Something very very strange happens, I hope you can help me My interface: export interface ShoppingCar { username: string; items: ItemShoppingCar[]; […]

By Alonso Contreras
Categorized as angular, html, ngfor Tagged , ,

Angular dynamic event name inside ngFor

I am trying to add dynamic event names for ag-grid but in general to a angular component. I tried different types of bindings to make the names for (gridready) value to onGridReady1($event), onGridReady2($event), onGridReady3($event) etc based on the index. +i, {{i}}, (i) etc options did not work. What could be the possible option to get […]

By Kurkula
Categorized as ag-grid, angular, ngfor, typescript Tagged , , ,

ngIf not updating when method is called in different component

I have a refresh method that updates a task list. Displaying which tasks have posted to the server and which tasks are still being uploaded: TypeScript: refresh(){ this.getStoredValue(‘taskBacklog’).then( _ => { this.taskQueue = []; = false this.taskBacklog = this.stored.taskBacklog console.log(‘check taskBacklog ‘, this.taskBacklog) for (let x = 0; x < this.myTasks.length; x++){ this.taskBacklog.forEach((element,index)=>{ console.log(element) […]

Add a class from ngFor

I have an ngFor loop and some divs inside it. The code looks like the following: <div *ngFor="let element of bodyElements"> <div class="element-container">{{}}</div> </div> Now I need to add a class coming from ngFor to every element produced. So I have tried this code: <div *ngFor="let element of bodyElements"> <div class="element-container" [class]="element.className">{{}}</div> </div> but now […]

By Yaditya
Categorized as angular, arrays, css, javascript, ngfor Tagged , , , ,

Angular Form Array access static data

I am using Reactive Forms to create a page for managing roles and permissions in my application. There are multiple tables of checkboxes that turn on or off a permission on a role, and I am trying to dynamically create these elements using *ngFor. The problem is, my form element only has a boolean value […]

By mike
Categorized as angular, angular-reactive-forms, ngfor Tagged , ,

Angular ! and odd even

this is the task: Your task is to create a simple Angular Component named TestComponent identified by the selector test-component The component must have an input property of type Array named inputData. If there is no input data (empty or missing) you have to write "No data" in a div with id="noData". If the input […]

By jhon
Categorized as angular, angular-ng-if, ngfor, styles Tagged , , ,

Angular *ngIf Condition inside *ngFor to show hide items

I am working with angular 12. Here is the angular html code. <ul id="respMenu" class="horizontal-menu"> <ng-container *ngFor="let menuItem of menuItems; let i = index"> <ng-container *ngIf="IsAllowed([‘admin’,’user’])"> <li> <a> <span class="title">{{menuItem.title}}</span> </a> </li> </ng-container> </ng-container> </ul> i am calling this method show hide my li IsAllowed(allowedRoles){ console.log("test"); for (var i = 0; i < userRoles.length; i++) […]

By Faisal
Categorized as angular, angular-ng-if, ngfor, typescript Tagged , , ,

How to add an element between items within ngFor

I have this piece of template where I am loop through the items and creating a buttons: <div *ngFor="let button of buttons"> <p> <button type="button" mat-raised-button color="primary" > {{ button.text }} </button> </p> </div> I want to add a text in between the buttons. The list can contain more than 2 buttons so I want […]

1 2 3 32

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us