I’m trying to build a search screen that uses tabs to switch between different input methods but I’m running into a Typescript error because my base object allows multiple types whereas my custom input component doesn’t. In the parent component I have an array of objects of type Tab to define all the tabs export… Read More Handle objects with properties that can be of multiple types in Angular
I’m trying to display a list of objects in a table. But its only displaying the first row This is the code I’m using <table > <thead> <tr> <th>partId</th> <th>partName</th> <th>partDesc</th> <th>partTypeCode</th> <th>createdBy</th> <th>updatedBy</th> <th>createdDate</th> <th>updatedDate</th> </tr> </thead> <tbody> <tr *ngFor="let part of allParts;"> <td ><span>{{part.partId}}</span></td> <td><span>{{part.partName}}</span></td> <td ><span>{{part.partDesc}}</span></td> <td><span>{{part.partTypeCode}}</span></td> <td ><span>{{part.createdBy.firstName}}</span></td> <td ><span>{{part.updatedBy.firstName}}</span></td> <td… Read More Display array of objects in table
i’m currently trying to make a Logbox for my webapp. It gets an Array of logs and should display them row by row in a div. Im using ngFor and looping trough my Array of logs and then displaying them. My problem is now that the logs get displayed infinite times, not just 5 times… Read More Angular ngFor running in infinite loop when displaying array
I’m trying to make a table displaying data get from an API. I manage to get the 1st page but when changing page, the data is not displayed despite I can see my data from console.log(). Here’s the code to call the serice ngOnInit(): void { this.productsSub = this.productsService.getProducts(this.page, this.pageSize).subscribe((res: any) => { this.products =… Read More Table not displaying data when changing page in Angular
I am working on a personal project where I want to register every meal I eat along the day, and display them using charts. I already know how to pass data between components using Input() between parent and child, but my problem here is slightly different. I provide the code and then explain what is… Read More Passing data between components with ngFor not working on Angular14
I’m having a hard time trying to iterate data fetched from api through angular bootstrap table. From a first approach I was mapping the data to prsnl variable declared as prsnl: any and initialized in the function bellow: getAllPersnlValues(data) { return this.persnlService.getPersnl(data) .pipe( map((response) => response) ).subscribe((res) => {this.prsnl = res; console.log(‘prsnl’, this.prsnl)}); } In… Read More How can I iterate through object of objects data to fill angular table
I have a list of lists as such: allTeams = [ [57, ‘Arsenal FC’, ‘Arsenal’, ‘ARS’], [58, ‘Aston Villa FC’, ‘Aston Villa’, ‘AVL’], [61, ‘Chelsea FC’, ‘Chelsea’, ‘CHE’], …] userIsLookingFor = "chelsea" for team in allTeams: if userIsLookingFor.lower() in any_element_of_team.lower(): print(team) > [61, ‘Chelsea FC’, ‘Chelsea’, ‘CHE’] I would basically look for the user’s requested… Read More How can I return a list from a list of lists when searching a string and also force the comparison to lowercase?
I’m working on this blog which has a page which lists all the posts. So I added custom hover and active styles to each of the posts so when hovered it will show a different color and box-shadow intensity based on each post post. Suppose Post1 has a red color associated with it so its… Read More Unable to remove active box shadow after clicking outside of Angular component
I am trying to iterate this object { "2021-11-22": [ { "id": 1, "standard_id": 2, "user_id": 4, "subject_id": 1, "exam_date": "2021-11-22", "start_time": "09:45:00", "end_time": "02:52:00", "description": "kjhkjhkjhkjhkj\n\n\njgfhgfhgfghfghfhg", "deleted_at": null, "created_at": "2021-11-22T03:47:34.000000Z", "updated_at": "2021-11-22T03:47:34.000000Z", "subject": { "id": 1, "standard_id": 2, "name": "engilsh", "deleted_at": null, "created_at": "2021-11-21T07:11:15.000000Z", "updated_at": "2021-11-21T07:11:15.000000Z" } }, { "id": 2, "standard_id": 2, "user_id":… Read More ngFor with keyvalue pipe: Type 'unknown' is not assignable to type 'NgIterable<any>'
I’ve found an interesting problem that I can’t bypass. I have the follwing *ngFor loop with a click event. <label class="input-group" *ngFor="let status of statuses; trackBy: id" (click)="filterByCategory(status.name)">{{ status.name }} <span class="chip chip-icon" [attr.data-chip-state]="status.name"> {{ partners | counter: status.name }}</span> <input type="checkbox" /> <span class="checkmark"></span> </label> the click event fn filterByCategory() is a simple process,… Read More Click event on ngfor loop running twice. angular