Questions tagged [ngfor]

I recently started working on a form using StackBlitz, but I've hit a roadblock and need some guidance on how to proceed. My goal is to achieve a similar effect like the one shown in this gif: https://i.stack.imgur.com/76nsY.gif and I'd like to ...

After referring to the solution found in (Hide/show individual items inside ngFor), I am facing a challenge regarding setting the value of pinMe[j] based on a condition. In my scenario, I need to toggle between div elements while also determining what shou ...

Encountering an error while attempting to fetch data from the API. See the error image here. export class UserService { baseurl: string = "https://jsonplaceholder.typicode.com/"; constructor(private http: HttpClient) { } listUsers(){ //this ...

I am working with an array containing numerous items. I have implemented ngFor to display only the first few items with a scroll feature. Each item is animated to slide from left into the view port. However, I would like this animation to apply to the bo ...

I need to display the keys and values of a map in my HTML file by iterating over it. To achieve this, I utilized Angular's *ngfor with the keyvalue pipe. However, I encountered an error when using ngFor: The argument type Map<string, BarcodeInfoModel ...

When working with ng-repeat in Angular 1 to display the index, this code is used: <div ng-repeat="car in cars"> <ul> <li>Index: {{$index+1}}</li> <li>Car Name:{{car.name}}</li> </ul> </div> However, w ...

I'm attempting to loop through this object { "2021-11-22": [ { "id": 1, "standard_id": 2, "user_id": 4, "subject_id": 1, "exam_date": "2021-11-22" ...

I need assistance with Angular as I am not very experienced in it. Here is the HTML code that I have: <tbody> <tr *ngFor="let data of employeeFilterLists"> <td>{{data.Code}}</td> <td (clic ...

I've come across a strange issue with a simple program I'm working on. I want to display a list of numbers using an array, but when I try to use *ngFor in Angular, the elements don't render. However, if I manually reference each element in the array like a ...

Angular v5 In my search component, I am encountering an issue where the *ngFor directive is throwing an error because the "searchResults" array is initially empty on page load. This array is populated with data from a service returning a promise of search ...

I have an array public example = [['hallo', 'fruit', 'rose'], ['apple','book']] Currently, I am working on creating a table of inputs. The values in this table depend on the specific part that I am using at the moment, either http://localhost:4200/app ...

My challenge involves working with data in Angular 2. Here is a sample dataset: [ {text: "first", name: "a"}, {text: "rw", name: "a"}, {text: "ds", name: "b"}, {text: "asdf", name: " ...

My application features a websocket connected to an ngFor loop that populates data from approximately 100 records. Each entry in the list has a button with a click event attached, triggering the creation of a loading spinner via a 'div' element while addit ...

Looking at this code snippet <kendo-grid-column title="{{localizationKeys.adempimenti.organizzazione.responsabile}}" field="addettiGrid"> <li *ngFor="let addetto of addettiGrid; let i=index"> <div>{{addetto}}</div> ...

I'm a beginner in Angular 2 using Typescript. I am trying to figure out how to access the 'D' and 'G' elements in my JSON data using NgFor. Is there a specific way or method that I can use to achieve this? [ { "A":"B", "C":{ "D": ["E","F"], ...

Looking to extract numerical values from an array of objects, where each object contains specific data within arrays. I attempted using *ngFor to iterate through the values, but instead of summing them up, they are concatenated together. Here's a brie ...

I'm currently working on an Ionic 2 app that includes a barcode reader feature. However, I encountered the following issue while trying to display data: Unhandled Promise rejection: Cannot assign to a reference or variable! ; Zone: ; Task: Promise.th ...

How can I access the data I need from an API when it is nested within multiple objects? I am attempting to retrieve the full_url from the data object, which is nested inside the avatar object. I have already attempted the following: <ion-list> ...

I'm attempting to run a function every time my ngFor finishes loading data from the API. However, the callback only works on the initial load of the ngFor. How can I make sure that the callback is executed whenever my ngFor data changes? I found a solut ...

I attempted to bind a value for filter in *ngFor, but it didn't work correctly. How can I successfully bind data to ngFor? Source code is shown below: In my .ts file, menuIcons:any[]; public pageName:any = "projects"; this.menuIcons=[{ ...

I'm facing a challenge and unsure if it's achievable in Angular. Below is a simple HTML code snippet: <div > <div *ngFor="let item of apiNames, let i = index" class="rescontainer"> <div class="resbox headline"> ...

Within my Angular application, I have a basic component that takes a list of strings and generates a radio group based on these strings: @Component({ selector: 'radio-group', templateUrl: `<div *ngFor="let item of items"> ...

Currently, I am attempting to generate a list of cards after loading an array. Take a look at my code snippet: locations; constructor( private toolbarTitle: ToolbarTitleService, public popoverController: PopoverController, private syncServi ...

My current method for displaying a certain number of * characters is utilizing the code snippet below: <div *ngFor="let line of lines; let i=index">*</div> I am interested in applying a margin only to the first element. The margin value sh ...

Is there a way to select all checkboxes in an Angular form that uses ngFor and ngIf? I want to activate all checkboxes for the months when I click on "Select All". The list of months is stored in an array. Click here to see the HTML representation of the ...

When I modify the Array of servers from outside the class declaration, the View/HTML component does not update accordingly. However, when I perform the same modification from inside the class, it works fine. Both functions successfully update the servers A ...

I am facing the issue of disabling a <button> in an ngFor loop after it has been clicked by the user. Each button corresponds to an element in the loop, so I need to distinguish them using separate boolean values. Below is a snippet of the HTML code ...

Within Angular 1, I crafted a personalized directive called "repeater-ready" to pair with ng-repeat for triggering a callback method upon completion of an iteration: if ($scope.$last === true) { $timeout(() => { $scope.$parent.$parent.$ ...

Here is a snippet of HTML code that I'm working with: <!-- Toggle show hide --> <ng-container *ngFor="let plateValue of plateValues; let i=index"> <button (click)="toggle(plateValue)">{{i}}. {{ btnText }}</button> & ...

I'm currently learning Angular and I've been following a code tutorial. However, despite matching the instructor's code, it doesn't seem to be working for me. When I try to compile the following code, I receive an error message stating that the objects do ...

When the item value is null, an error occurs in the console and the functionality stops working. How can I verify or replace the null value with my own preferences? this.xx = this.broadCastService.events.subscribe((line: Line) => { this.configService ...

I am a beginner in Angular (typescript) and I am facing some challenges in adding a new dropdown menu when a user clicks a button. My main struggle is creating additional attribute fields. I'm considering keeping track of the newly added dropdowns wit ...

I am attempting to use *ngFor to pass an object to another component, but only the last object in the table is being passed. The object that was clicked should be displayed instead. How can I solve this issue? <tr data-toggle="control-sidebar" *ngFor=" ...

My goal is to toggle the visibility of tiered buttons when a parent button is clicked. I am using ngFor to generate three buttons on tier 1, but I'm struggling to select only the desired tier when clicked instead of affecting all of them. I've managed to ...

Create an Angular 2+ code snippet that will print asterisks (*) in a list on button click. When the button is clicked, it should add one more asterisk to the list each time. For example: Button Click 1 - Output: * Button Click 2 - Output: ** Button Cl ...

While attempting to loop over the properties of an object using *ngFor with in, I encountered a challenge. Here is a sample code snippet: @Controller({ selector: 'sample-controller', template: ` <ul> <li *ngFor="let i in o ...

How can I pass a different parameter to the $event in the function? <div class='col-sm'> <label class="col-3 col-form-label">Origen</label> <div class="col-4"> <select ...

How can I write two ngFor lists with trackby to prevent elements from being recreated when moving between the lists? I know that trackby helps in avoiding recreation of elements within a single list, but is there a way to achieve this across multiple list ...

Working on a form using Angular to store datasets with inputs for name and description. Users can add multiple datasets by clicking the "Add" button. To achieve this, I initialized a dataset list with one element in app.component.ts. Using NgFor, it dynam ...

I'm attempting to retrieve the value from a dynamic form that contains multiple resources retrieved from a database. My goal is to modify three parameters, C, I, and A, for each resource. However, the form group always returns the value of the last resourc ...

Here is an example array: subjectWithTopics = [ {subjectName:"maths", topicName : "topic1 of maths " }, {subjectName:"maths", topicName : "topic2 of maths " }, {subjectName:"English", topicName : &quo ...

In my Ionic 3 project, I am fetching two arrays through API calls. My goal is to display the data from both arrays in the same line like this: [item1.1] [item2.1] [item1.2] [item2.2] [item1.3] [item2.3] Instead of displaying them like this: [item1.1] ...

As someone new to Angular and Ionic, I've scoured the internet (including this site) for a solution to my problem without much luck. My goal is to have a single array of tasks in my ts component and display them in four different sections of my html templa ...

I am currently designing a dynamic form where each Field contains a list of values, with each value represented as a string. export class Field { name: string; values: string[] = []; fieldType: string; constructor(fieldType: string) { this ...

Recently diving into Angular2, I've been trying to extract data from a JSON file. While I have successfully retrieved the file using a REST client, stored it in a local variable within a component, and accessed certain properties of that variable, I'm faci ...

I'm currently encountering an error that reads: (ERROR Error: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the key ...

Creating multiple mat-sliders dynamically in Angular looks like this: <ng-container *ngFor="let parameter of parameterValues; let i = index;"> <mat-slider (input)="onInputChange($event)" min="1" max="{{ parameter.length }}" step="1" value="1" i ...

Encountered an issue: I have an array containing chart configurations that need to be displayed. Currently, I am iterating through the array and rendering the charts as shown below: <ng-container *ngFor="let config of configs; trackBy: getId"& ...

After successfully implementing an interface to retrieve data from a service class, I encountered an issue when attempting to iterate through the FilteredSubject interface array. Despite using console.log, I was unable to achieve the desired outcome. You ...

I have a unique challenge where I am trying to style a checkbox as a button by placing it inside its label. <label> <input type="checkbox" name="..."> </label> My goal is to toggle the parent label's class based on whether the checkbox ...