We Keep Coding

Populate Input Field using FormControl Angular

I have an input field where I need to populate array data inside it which is coming
from API, I have used FormControl to populate the data but not able to achieve the same.I am getting the response on console but not able to populate it on UI. Below is my code if any anyone could guide me as I have spent 2 entire days and new in Angular. Can anyone please help me here.
HTML Code:
<div formArrayName="ints" *ngFor="let inCompany of insurance.controls; let i = index">
<div [formGroupName] = "i">
<ion-card *ngFor="let eq of ef;let i=index;">
<ion-item>
<ion-input formControlName="iCompany"></ion-input>
</ion-item>
</ion-card>
</div>
</div>
TS Code:
ionViewWillEnter(){
this.loadData();
}
ngOnInit() {
this.sForm = this.formBuilder.group({
ints: this.formBuilder.array([]),
})
}
get ints(): FormArray {
return this.sForm.get('ints') as FormArray;
}
get formGroup(): FormGroup {
return this.formBuilder.group({
name: ['justTest'],
});
}
loadData(){
this.service.getefDetails(data).subscribe((response: any) => {
this.ef= response.data;
var formArray = this.sForm.get('ints') as FormArray;
for (let i = 0; i < this.ef.length; i++) {
console.log(this.ef.length, this.ef[i].percentage)
var chec=this.ef[i].percentage
formArray.push(this.formGroup);
formArray.controls[i].patchValue(chec);
}
)}
}
Array Type:
[{name:"test", percentage: "29"},{name:"abc", percentage: "45"}, {name:"def", percentage: "63"}]

First of all, I suggest you re-think your approach as mentioned in the earlier comment it seems you have made it unnecessarily complicated.
Also, I would think of renaming your variables it is quite confusing and will be a pain to maintain later on.
To answer your question and get the "ion-input" printed on the screen do the following changes to the HTML.
You can not assign <div [formGroupName] = "i"> i to the formGroup since it is not of type formGroup as it is assigned to the index.
The solution is to assign <div [formGroupName] = "insuranceCompany[0]">
So that a form group will be assigned.
Again I suggest that you rename the variable "insuranceCompany" for clarity purposes as there is a control named "insuranceCompany" as well.
Here is a working example of your code minus the ionic tags.
https://stackblitz.com/edit/angular-ivy-b3gtly?file=src/app/app.component.ts
Hope I made myself clear, and hope it helps.

You can use patchValue directly to an form control in order to do this.
Your current setup seems too complicated unless there are a bunch of other values in the form that's not displayed here.
However, when you get a response from API, you can simply get the reactive form element, and set value.
this.suitablityForm.insurance.insuranceCompany.patchValue('VAL_YOU_WANT');

How to access multiple elements generated from ngFor directive in Angular?

I want to add CSS class to div elements generated with *ngFor Angular directive. Firstly, I tried with #ViewChild directive and Renderer2, but it seems it does not work with multiple elements. Secondly, I tried to manipulate div elements with #ViewChildren directive, but could not find a suitable syntax example that would work for me. How can I access those elements and work with their classList?
The error message that I get is: Error: Uncaught (in promise): TypeError: el.classList is undefined addClass
HTML
<div
class="row" #rowDiv
*ngFor="let courtReservation of currentIntervalReservations"
>
<div class="court">
<h1 class="court-name">{{ courtReservation.courtName }}</h1>
</div>
<lp-player-diagram
*ngFor="let res of courtReservation.reservations; let i = index"
[playerName]="res.playerName"
[index]="i"
></lp-player-diagram>
</div>
TS
export class MainGantogramComponent implements OnInit, AfterViewInit {
#ViewChildren('rowDiv') rowElements?: QueryList<HTMLDivElement>;
constructor(private renderer: Renderer2) {}
/* ... */
setGridTemplateClass(currentTime: Time) {
if (currentTime.minutes == 0) {
this.rowElements?.forEach((div) =>
this.renderer.addClass(div, 'short-grid-template')
);
} else {
this.rowElements?.forEach((div) =>
this.renderer.addClass(div, 'standard-grid-template')
);
}
}
}

If I understood you correctly you can just use a field to store the css class you need:
<div
class="row"
[ngClass]="gridClass"
*ngFor="let courtReservation of currentIntervalReservations"
>
<div class="court">
<h1 class="court-name">{{ courtReservation.courtName }}</h1>
</div>
<lp-player-diagram
*ngFor="let res of courtReservation.reservations; let i = index"
[playerName]="res.playerName"
[index]="i"
></lp-player-diagram>
</div>
----
setGridTemplateClass(currentTime: Time) {
this.gridClass = currentTime.minutes === 0 ? 'short-grid-template' : 'standard-grid-template'
}
this is how it works in angular, Renderer is very seldom used

Can I search filter through a child component? (Angular)

I've got a parent component that I'm passing data down to a child component with *ngFor / #input. That child component is created x number of times depending on how many objects are in the pciData array
pciData is an array of about 700 data objects, all with a "hostname" property/value. when passed down to app-system, the hostname of that object shows on a button. I want the end user to be able to filter through those buttons by that hostname, only showing the app-system components that match.
On the parent component template, how would I create a search bar that can filter the app-system components by their hostname property values? In the code below, I've tried piping this like:
<ng-container *ngFor="let system of pciData | searchFilter: system.hostname | paginate: { itemsPerPage: 180, currentPage: p }; let i = index ">
but "system" comes back undefined. However, when I just type in {{system.hostname}} in the template under the loop, it does loop through every single object and display the hostname. Any assistance would be appreciated.
Here's the parent component. I've removed the implimentation that I tried to do with the filter to avoid confusion:
import { Observable } from 'rxjs';
import { Ipcidata } from '../Shared/Ipcidata';
import { map, filter, switchMap } from 'rxjs/operators';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
#Component({
selector: 'app-system-status',
templateUrl: './system-status.component.html',
styleUrls: ['./system-status.component.css'],
})
export class SystemStatusComponent implements OnInit {
#Input() pciData: any;
constructor() {}
searchText;
p: number;
filteredValues : any;
ngOnInit() {
}
}
Here's the parent template, "app-system" is what I'm trying to search through the values of :
<ngx-spinner></ngx-spinner>
<section class="app-container">
<div class ="card-container">
<ng-container *ngFor="let system of pciData | paginate: { itemsPerPage: 180,
currentPage: p }; let i = index ">
<div class='cardboi'>
<app-system [systemInput]="system"></app-system>
</div>
</ng-container>
</div>
<div class="pagination-container">
<pagination-controls class='paginator' (pageChange)="p = $event"></pagination-controls>
</div>
</section>
lastly, here is the child template, to which the search bar filter should only show what the user inputs as the hostname. This is essentially just a button that pops up more data about that host when clicked. Again, the point of this is only to show the buttons with a certain hostname.
<button (click)="openDialog()" [ngClass]="{
'btn buttonGood':isValid(),
'btn buttonDateAlert':isValid()=='datewarning',
'btn buttonAlert':isValid()==false
}">{{systemInput.hostname.slice(0,13) | uppercase}}</button>
</div>
Thanks again for anyone who can help me with this.

In your *ngFor loop, the array you are looping though is being piped. The pipe has to be processed before the loop begins. So pciData is piped through the two pipes and then the resulting array is looped through. Which is why system doesn't exist at the time that the pipes are being processed.
My recommendation would be to not use a pipe for the search filters. Instead, create another pciData variable. You can call it something like filteredPciData. Bind to the onChange event of the search box in the parent component. When the search value changes, filter pciData (which should have all values) and use filteredPciData to store the results. Then in your HTML loop through filteredPciData instead of pciData

Angular directive ngIf is not working as expected

We are trying to pass data from one component to another and below is the approach we are taking. When there is no data we want to show the error message
<div *ngIf="showGlobalError">
<h6>The reporting project doesn't have any Shippable Items</h6>
</div>
and the component.ts is like
showGlobalError = true;
constructor(private psService: ProjectShipmentService, private pdComp: ProjectDetailsComponent) {
this.psService.tDate.subscribe(x => this.cachedResults = x);
}
ngOnInit() { }
ngDoCheck() {
if (this.cachedResults.length > 0 && this.count <= 1) {
this.showGlobalError = false;
this.populateArrays();
this.count++;
}
}
populateArrays() {
this.reportingProject = [this.pdComp.rProjectNumber];
this.projectSalesOrder = this.pdComp.rSalesOrder;
this.clearFilter();
........
The issue is Even though there is data in the this.cachedResults that is this.cachedResults.length not equal to '0' for few seconds 'The reporting project doesn't have any Shippable Items' is shown in the page and then shows the data I am not sure if this something with the ngDoCheck() is causing this. Any help is greatly appreciated

Since, the default value of showGlobalError is true, the page load shows the error message.
Please make it by default false and make it true when this.cachedResults.length is 0 or this.cachedResults is undefined or this.cachedResults is null.
Hope this solves your problem.

Rather than subscribing in the code you can use the async pipe in your template
items$ = this.psService.tDate;
showGlobalError$ = this.items$.pipe(map(results => !results || !results.length));
constructor(private psService: ProjectShipmentService, private pdComp: ProjectDetailsComponent) { }
and in your template
<div *ngIf="showGlobalError$ | async">
<h6>The reporting project doesn't have any Shippable Items</h6>
</div>
<ng-template *ngFor="let item of items$ | async">
Do stuff with {{item | json}}
</ng-template>
This manages your subscription for you and fixes the memory leak you have in your code with the subscription you don't unsubscribe from.
Take a look at alibrary I wrote for this sort of thing, make caching data a lot easier. https://medium.com/#adrianbrand/angular-state-management-with-rxcache-468a865fc3fb

Facing issue while rendering index value of *ngFor directive in Angular 5

I am facing an issue while rendering index of *ngFor directive for a particular use case as follows.
Lets say we have an array of objects as
this.temp = [
{name:'John',age:24,visibility:'visible',
{name:'Kane',age:26,visibility:'hidden',
{name:'Ross',age:28,visibility:'visible',
{name:'Lui',age:21,visibility:'visible'
]
For rendering this in my app.component.html file I have html as follows
<div *ngFor="let user of temp; let i = index">
<div *ngIf="user.visibility === 'visible' ">
<div>{{i+1}}</div>
<div>{{user.name}}</div>
</div>
</div>
So as per the above array example, it renders users
1.John
2.Ross
3.Lui
Now there is a button name 'Change visibility' against each user in my UI, where in it will toggle the visibility state of user from 'hidden' to 'visible' and viceversa.
So clicking on button mentioned against John, it will set its visibility as
hidden but the UI rendered is
2.Ross
3.Lui
My expected output is
1.Ross
2.Lui
How to make the index render properly ?
The use case here is that I cannot modify/alter my this.temp array in terms of length.Basically I need the entire array with only visiblity property changed in it as per user actions.
Please help.

you can filter array first:
<div *ngFor="let user of temp.filter(us => us.visibility === 'visible'); let i = index">
<div>
<div>{{i+1}}</div>
<div>{{user.name}}</div>
</div>
</div>
like this way, you dont analize all array items too, more efficient and desired output.
Cheers!

You can also achieve your required result by using Pipe like this
HTML component
<div *ngFor="let user of temp | visiblefilter ; let i=index">
<span>{{i+1}} {{user.name}}</span> <button name={{user.name}} (click)="onHide($event)">Hide</button>
</div>
PIPE
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'visiblefilter',
pure: false
})
export class VisibleFilterPipe implements PipeTransform {
transform(items: any[]): any {
return items.filter(({visibility}) =>visibility=='visible');
}
}
You can check here with working example stackblitz

use a custom trackby function :
*ngFor="let user of temp; let i = index; trackBy: customTB"
customTB(index, item) {
return index + ' - ' item.name;
}