Develop Reference

angular check column in matCellDef loop

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>

Angular Making Inputs HyperLinks

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()"

Correct way of using ngif with mat-cell

All I'm trying to do is display a certain value if the item has a certain property, but all I end up with is [object Object]. This is my approach.
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Given Name </th>
<td mat-cell *matCellDef="let item">
<div *ngIf="item.hasOwnProperty('value'); else default">
// Display something else
</div>
<ng-template #default>
{{item.name}}
</ng-template>
</td>
</ng-container>

You could simply write *ngIf="item.value" if the property is mandatory for the item that should have it.
Else, if the value property is present even when it is not filled (Which should not happen btw), then you could edit your items with a boolean in your .ts file, something like :
ngOnInit() {
// To do before to set the data in your table
this.data = this.data.map(item => ({
...item,
hasValueProp: item.hasOwnProperty('value'),
}));
}
then in your html template you'll condition it like:
*ngIf="item.hasValueProp"

In Angular, how to know if an image came from the API, if not loader another one instead?

in my code I get an image of the API (row. fotoPessoa), if I don't have an image I put another one in place ([src] = "imgPessoa"). How to do this?
<ng-container matColumnDef="fotoIndividuo">
<th mat-header-cell *matHeaderCellDef > Foto </th>
<td mat-cell *matCellDef="let row" data-label="Foto: " >
<img [src]="imgPessoa" >
{{row.fotoPessoa}}
</td>
</ng-container>

How to connect form with outside button and extract data without refreshing page

I have such issue I need to extract data from:
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef> Title </th>
<td mat-cell *matCellDef="let row"><div id="{{'make_editable' + row.title}}">{{row.title}}</div></td>
</ng-container>
...
<ng-container matColumnDef="buttonEdit">
<th mat-header-cell *matHeaderCellDef> buttonEdit </th>
<td mat-cell *matCellDef="let row"><button (click)="makeEditable(row.title)" class="mat-raised-button" form="myform">Edit</button></td>
/ng-container>
makeEditable(title){
console.log(this.checkOutForm.value.title);
let id:string="make_editable"+title;
if(this.toggleEdit()){
document.getElementById(id).innerHTML = `<form id="myform" (ng-submit)="extractFormValues()" [formGroup]="checkOutForm"><input type="text" value="${title}"></form>`;
}
else {
document.getElementById(id).innerHTML = title;
console.log(this.checkOutForm.controls.title.value);
}
The button is outside the function. If edit button is clicked then input wraps data and make it active. I need to do it without refreshing all page.The button Edit is outside of the form

You could create on the type, that the rows have, a boolean property - isEdited.
makeEditable(title) would find the correct row and toggle its isEdited value. It would also set:
checkOutForm.setValue({title: title});
(if isEdited was set to true).
In the template you would wrap the whole block in
<form id="myform" (ng-submit)="extractFormValues()" [formGroup]="checkOutForm"</form>
and change the td for a title:
<td mat-cell *matCellDef="let row">
<div *ngIf="!row.isEdited">{{row.title}}</div>
<input *ngIf="row.isEdited" type="text" formControlName="title">
</td>
This only works if just one row is edited at once.