Questions tagged ngfor

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

Show two different index in same row different column

I have a list of image they come from an json array with 7 elements : The key of image is <ion-grid> <ion-row *ngFor="let image of imageList; let i = index;"> <ion-col> <div > <img [src]="image.imageUrl" /> </div> </ion-col> <ion-col> <div > <img [src]="image.imageUrl" /> </div> </ion-col> </ion-row> </ion-grid> But this code show me the […]

By DEVLOGIN
Published
Categorized as angular, html, ionic-framework, ngfor Tagged , , ,

No index signature with a parameter of type ‘number’ was found on type ‘Number’

I have 2 *ngFor with 2 index for each them. <ng-container *ngFor="let groupItems of item.itemsList; index as i"> <div class="field-view"> <div class="label-view"> {{ groupItems.groupName }} </div> </div> <ng-container *ngFor="let item of groupItems.items; index as j"> <div class="field-view" [itemValue]="item.total"> <div class="value-view"> {{ item.total }} </div> </div> </ng-container> </ng-container> I want to put on total i and […]

By lona bin
Published
Categorized as angular, indexing, ngfor, typescript Tagged , , ,

Angular 11 – ngFor is not working in incrementing index

I want to use the indexNumArr as the incrementing index of row.quiz_records[]…, but I can’t seem to make it work. I’m really having a hard time thinking what is wrong, because I think that the logic is right. html <table mat-table [dataSource]="dataSourceQuizOverview" matSort> <ng-container *ngFor="let index of indexNumArr> <ng-container matColumnDef="question_text"> <th class="font" mat-header-cell *matHeaderCellDef mat-sort-header>Questions</th> […]

By reginald bollosa
Published
Categorized as angular, arrays, html, ngfor, typescript Tagged , , , ,

Css class selector ngfor [closed]

how can I display info div of the corresponding user when I hover on user td. For example when I hover on user-2 I need to display block td of class info-2 <table *ngFor="let item of Req;let i=index;"> <tr style="display: flex;"> <td style="flex-grow: 2"> <img src="{{item.img}}" alt=""> </td> <td style="flex-grow:10" class="user-{{i}}"> {{item.username}} </td> <td> <div […]

By Halima Ghannoum
Published
Categorized as angular, class, css, ngfor, selector Tagged , , , ,

Angular 11 Error: Cannot find control with path: ‘targets_array -> 0’

I have a nested formArray inside of a formGroup and i’m trying to add dynamically on every button click a form control and a div with two inputs and a button, but i get this error message : "Error: Cannot find control with path: ‘targets_array -> 0’" Thanks for your helpHtml service ts Source: Angular […]

By kfir
Published
Categorized as angular, formarray, formgroups, html, ngfor Tagged , , , ,

access value of array by its index in Angualar ngFor directive

I have a requirement to access the value of array item by index in ngFor directive angular Let say i have entityList array.i also have columnNames array which gives me number of td’s to generate. so columnNames acts as a table header and entityList has data for it to display in tabular format. entityList{ "Id": […]

By Pankaj
Published
Categorized as angular, ngfor Tagged ,

Angular – *ngFor with nested table rows

I have an object that presents data in the following structure: – title – id – [artists] – { artist obj / document , – [albums] – { album obj / document }, – { – album obj / document – [photos] – { photo obj / document }, – { photo obj / document […]

By Que
Published
Categorized as angular, html-table, ngfor Tagged , ,

How do I iterate in reverse with *ngFor directive?

In angular, I am trying to query Firebase and i would like when the objects come back, the content is iterated through, in reverse. In TS I got this this.items = db.list(‘/items’, ref => ref.limitToLast(10)).valueChanges(); I tried using reverse() on there, but, i get an errors saying "Reverse does not exist on type Observerable" In […]

Angular Getting value of referenced id in ngFor

I am currently working on a personal project with Angular and .NET API with SQL Server for the backend. Now I did not want to use Foreign Keys, because then you are dependent on the database. So my models do have referenced id’s which refer to other objects. The main purpose of the app is […]

By juliusdevelopment
Published
Categorized as .net, angular, ngfor, reference Tagged , , ,

How to add and remove input tag according to the given number of item in angular 9?

I have a data form database like this, <pre><code>{ noOfChildren : 2, childAge:[4,5] } </code></pre> I am trying to code to edit page these thing. <div class="form-group"> <label for="flightChild" class="label">No of Children in Flight (2YRS – 17YRS) </label> <input type="number" min="0" max="9" nbInput fullWidth id="flightChild" placeholder="No of Children in Flight" formControlName="flightChild" (keyup)="onNoOfChild($event)"/> </div> <div *ngIf="noOfChild […]

By hanu
Published
Categorized as angular, html, ngfor Tagged , ,
1 2 3 38

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
faq