How do we check a column in an ng for loop in angular ? for example I dont wanna apply the logic below which is {{element[p.key] != null ? '$' : ''}} to column 1 or execept column 1
enter image description here
#html code
<table mat-table [dataSource]="bovDemos" class="mat-elevation-z0">
<ng-container *ngFor="let p of marketDemographicsTableLabel; last as l" matColumnDef="{{p.key}}">
<th mat-header-cell *matHeaderCellDef class="fs-12px">{{p.label}}</th>
<ng-container >
<td mat-cell *matCellDef="let element; index as i"
[ngClass]="{'border-none': i === bovDemos.length - 1}" class="fs-12px">
{{element[p.key] != null ? '$' : ''}}{{(element[p.key]) ? (element[p.key] | number): '-'}}</td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="tableMarketDemographicsHeaders"></tr>
<tr mat-row *matRowDef="let row; columns: tableMarketDemographicsHeaders;" class="cursor-default">
</tr>
</table>
You have set "index as i", so you can use "i" to detect first td.
<span *ngIf="i===0">
..this is first column
</span>
<span *ngIf="i!==0">
{{element[p.key] != null ? '$' : ''}}{{(element[p.key]) ? (element[p.key] | number): '-'}}
</span>
Related
In my code, I have an input field where the user can enter some stuff. When the user enters his input and presses done, I want that input to be a hyperlink. Here is my code. What should I add to make that input a link?
HTML:
<ng-container matColumnDef="FilePath" #filePath>
<th mat-header-cell *matHeaderCellDef> Dosya Yolu </th>
<td mat-cell *matCellDef="let row; let i = index">
<span *ngIf="EditIndex != i">{{row.LabAnalysisFiles.FilePath}}</span>
<mat-form-field floatLabel="never" *ngIf="EditIndex == i" class="w-100-p">
<input matInput name="FilePath" [(ngModel)]="row.LabAnalysisFiles.FilePath" type="text">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="Actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row; let i = index">
<div *ngIf="!isClosed">
<button mat-icon-button *ngIf="EditIndex != i" (click)="editRow(row, i)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button *ngIf="EditIndex == i"
(click)="editRow(row, undefined)">
<mat-icon>done</mat-icon>
</button>
</div>
</td>
</ng-container>
TS:
testList: ILabConditionResult[] = [];
filePath: ILabAnalysisFile;
editRow(row: ILabConditionResult, index: number) {
if (index == undefined) {
if (
!row.LabAnalysisFiles.FilePath
) {
return;
}
this.testList = [];
} else {
this.testList = [];
}
this.EditIndex = index;
}
For a text to appear like a hyperlink, you have to use the a tag with a href attribute.
Hence, in your code, you have to change
<span *ngIf="EditIndex != i">{{row.LabAnalysisFiles.FilePath}}</span>
to
<a href *ngIf="EditIndex != i">{{row.LabAnalysisFiles.FilePath}}</a>
Keep in mind that if you click the link it will navigate, so if this behavior is not desired you should add:
(click)="$event.preventDefault()"
I'm writing a code where a user checks a checkbox and saves it, it will say Approved next to it. But when the checkbox is not checked and the user saves it, the text will be Not Approved (when IsApproved is false). How can I achieve this? It currently just says Approved for both scenarios.
<ng-container matColumnDef="IsApproved">
<th mat-header-cell *matHeaderCellDef> Ürün Onay Durumu </th>
<td mat-cell *matCellDef="let row; let i = index">
<mat-checkbox
(click)="EditIndexProduct != i ? $event.preventDefault() : $event.stopPropagation()"
[(ngModel)]="row.IsApproved" [ngModelOptions]="{standalone: true}" >
Approved
</mat-checkbox>
</td>
</ng-container>
<mat-checkbox (click)="EditIndexProduct != i ? $event.preventDefault() : $event.stopPropagation()" [(ngModel)]="row.IsApproved" [ngModelOptions]="{standalone: true}">
{{row.IsApproved === true ? 'Approved' : 'Not Approved'}}
</mat-checkbox>
Stackblitz - https://stackblitz.com/edit/angular-mat-form-validation-eg-izfcsd?file=app/input-error-state-matcher-example.html
I have a string of array and I want to display that array in first column of the table like this
c1 c2 c3 c4 c5 c6
d1 - - - - -
d2 - - - - -
d3 - - - - -
d4 - - - - -
the string of array is like this
data: string[] = ['d1', 'd2', 'd3', 'd4',];
so here is my html code
<p-table [columns]="panel.headers" [value]="panel.data">
<ng-template pTemplate="header" let-columns>
<tr *ngFor="let headerRow of panel.headers">
<th *ngFor="let col of headerRow.cols" [attr.colspan]="col.colspan"
[attr.rowspan]="col.rowspan">
{{col.label}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr>
<td *ngFor="let col of panel.headers[panel.headers.length-1].cols"
class="{{row[col.dataClasses]}}">
{{row[col.valueField]}}
</td>
</tr>
</ng-template>
</p-table>
See the stackblitz https://stackblitz.com/edit/primeng-tabledynamic-demo-h58rsj
in this example, I want to print tiers in the first column.
please help to solve this..
Thanks
Just add the column at the beginning:
<ng-template pTemplate="body" let-row>
<tr>
<td>my array goes here</td>
<td *ngFor="let col of panel.headers[panel.headers.length-1].cols"
class="{{row[col.dataClasses]}}">
{{row[col.valueField]}}
</td>
</tr>
</ng-template>
And in your header:
<ng-template pTemplate="header" let-columns>
<tr *ngFor="let headerRow of panel.headers">
<th></th>
<th *ngFor="let col of headerRow.cols" [attr.colspan]="col.colspan"
[attr.rowspan]="col.rowspan">
{{col.label}}
</th>
</tr>
</ng-template>
How to push new values at the click of a button in formArray without adding new fields. Fields already exist, which means I don't need new ones, I just need new values from those fields entered.
Look at my code:
<form [formGroup]="form" (submit)="submit()">
<div *ngFor="let data of contactFormGroup.controls; let i = index;" formArrayName="data">
<div [formGroupName]="i">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Pretraži prozivod...">
</mat-form-field>
<table mat-table [dataSource]="productSource" matSort class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="id">
<th mat-header-cell mat-sort-header *matHeaderCellDef> Broj Proizvoda </th>
<td mat-cell *matCellDef="let element" > {{ element.id }} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell mat-sort-header *matHeaderCellDef> Naziv proizvoda </th>
<td mat-cell *matCellDef="let element"> {{ element.name }} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="description">
<th mat-header-cell mat-sort-header *matHeaderCellDef> Opis proizvoda </th>
<td mat-cell *matCellDef="let element"> {{element.description}} </td>
</ng-container>
<!-- quantity Column -->
<ng-container matColumnDef="images" class="test" >
<th mat-header-cell mat-sort-header *matHeaderCellDef> quantity</th>
// i need this values but on click add new object in formArray
<td mat-cell *matCellDef="let element" class="test"> <input formControlName="quantity" type="text"> </td>
</ng-container>
<ng-container matColumnDef="images2">
<th mat-header-cell mat-sort-header *matHeaderCellDef> Add new </th>
<td mat-cell *matCellDef="let element"> <button mat-raised-button color="primary">Add new</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr (click)="test(row.id)" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
<div class="button-submit">
<button (click)="openDialog2()" mat-raised-button color="warn">
Posalji narudzbu
</button>
</div>
</div>
</div>
</form>
Ts file:
ngOnInit() {
this.productSource.sort = this.sort;
this.productSource.paginator = this.paginator;
this.getProducts();
this.form = this.fb.group({
deliveryDate: [''],
data: this.fb.array([this.createContact()]),
note: [null]
});
this.contactList = this.form.get('data') as FormArray;
}
createContact(): FormGroup {
return this.fb.group({
id: ['', Validators.required],
quantity: ['', Validators.required]
});
}
addContact() {
this.contactList.push(this.createContact());
}
This code works well when I set fields and add function addContact(). When click show new fields and work good but in this situation, I don't want new fields. I have existing fields only to enter a quantity and push id and quantity in new FormArray.
This is an example what I need: https://ibb.co/1Tj2HNc
ON click button add new. If you have any question just ask
The current code works on principle when I add the first product:
console.log(my form.values)
data: Array(1)
0: {id: "", quantity: "99"}
And this is good only need id but ok... But when I add new quantity for new fields example 15 for another field and console.log my form values:
data: Array(1)
0: {id: "", quantity: "15 "}
override the old value and enter the new value.
It should add a new object in array with that value.
Example:
data: Array(2)
0: {id: "", quantity: "99"}
1: {id: "", quantity: "15"}
Also i need id :)
EDIT:
I forgot a piece of code:
get contactFormGroup() {
return this.form.get('data') as FormArray;
}
just create new function that accepts the index you want to insert the data into and the object you want to insert and it should do what you want.
assignContactForm(index: number, data: any): void {
// data is object of type {id: number, quantity: number }
this.contactFormGroup.controls[i].patchValue(data);
}
I've got this:
Array of objects:
users : User [];
average = 5;
compareValue (value){
...}
And im printing a table: like this:
<table mat-table [dataSource]="users">
<ng-container matColumnDef="nome">
<th mat-header-cell *matHeaderCellDef >Name</th>
<td mat-cell *matCellDef="let element" > {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="num_aval">
<th mat-header-cell *matHeaderCellDef >Number of Works</th>
<td mat-cell *matCellDef="let element"> {{element.works.length}} </td>
</ng-container>
<ng-container matColumnDef="comparaMedia">
<th mat-header-cell *matHeaderCellDef >Stats</th>
<td *matCellDef="let element" > HELP HERE </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
What I wanna do is the following:
I wanna grab the number of works from an user, compare with the value average (with the function compareValue), and if the value is under some value, color the cell with blue; if it's above, color the cell with red.
I have no ideia how to do it. Some help?
You can add a class conditionally to your td as
<td mat-cell *matCellDef="let element" [class.red]="element.works.length > average"> {{element.works.length}} </td>
And add styles to your component as
td {
background-color: blue; /* the default color is blue for the cells */
}
td.red {
background-color: red; /* more specific style to override color to red */
}
I assume compareValue func returns true if value in cell is higher than average and false when it isn't, so I would use
and than use it to setting background color for number of works value cell
<td mat-cell *matCellDef="let element"
[style.background-color]="compareValue(element.works.length) ? 'blue' : 'red'">
{{element.works.length}}
</td>