I'm trying to display a object from a parent table in a child form input field with Angular Material. But it doesn't display the object values in the input fields. It only displays the <mat-label>
that I have created. I have tried add placeholders with property binding but that result to a error.
this is my code: parent-template.html
<table class="mat-elevation-z8 table table-primary table-striped overview-no-margin">
<thead>
<tr>
<th scope="col">Product Tag</th>
<th scope="col">Product Status</th>
</tr>
</thead>
<tbody>
<tr (click)="onSelect(product)"
[class]="selectedProduct === product ? selectedProduct : null"
*ngFor="let product of products">
<td>{{product.tag}}</td>
<td>{{product.status}}</td>
</tr>
</tbody>
</table>
<button (click)="addRandomProduct()" class="addProduct btn-lg btn-primary">Add Product</button>
<app-product-detail [showProductDetail]="selectedProduct"></app-product-detail>
parent-template.ts
export class ProductEditComponent implements OnInit {
public selectedProduct?: Product;
public products?: Product[];
// public defaultRow?:number = 8;
constructor() { }
ngOnInit(): void {
this.products = [];
for (let i = 0; i < 8; i++){
this.addRandomProduct();
}
}
public onSelect(product: Product): void{
this.selectedProduct = product;
console.log(product)
}
}
child-template.html
<div *ngIf="showProductDetail" id="product-detail">
<form class="product-detail-panel mat-elevation-z8" >
<div id="detail-header">
<span><b>Update scooter </b></span><u>{{showProductDetail.tag}}</u><b> with scooter ID: </b> <u>{{showProductDetail.id}}</u>
</div>
<hr>
<mat-form-field class="product-tag" appearance="fill">
<mat-label>Tag:</mat-label>
<input matInput [(ngModel)]="showProductDetail.tag" >
</mat-form-field>
<mat-form-field class="product-status" appearance="fill">
<mat-label>Product Status:</mat-label>
<mat-select [(ngModel)]="showProductDetail.status" >
<mat-option value="STOCK">STOCK</mat-option>
<mat-option value="OUT OF STOCK">OUT OF STOCK</mat-option>
<mat-option value="COMING SOON">COMING SOON</mat-option>
<mat-option value="NOT DELIVRABLE">NOT DELIVRABLE</mat-option>
<mat-option value="ON SALE">ON SALE</mat-option>
</mat-select>
</mat-form-field>
</div>
child-template.ts
export class ProductDetailComponent implements OnInit {
@Input() panelMessage = 'Select a product from the left panel:';
@Input() showProductDetail?: Product;
constructor() { }
ngOnInit(): void {
}
}
I Have solved this issue with the following code, the true standalone shows the inner value you need in a form.
Child-template.html
div *ngIf="showProductDetail" id="product-detail">
<form class="product-detail-panel mat-elevation-z8" >
<div id="detail-header">
<span><b>Update scooter </b></span><u class="product-tag">{{showProductDetail.tag}}</u><b> with scooter ID: </b><u id="product-id">{{showProductDetail.id}}</u>
</div>
<hr>
<mat-form-field class="product-tag" appearance="fill">
<mat-label>Tag:</mat-label>
<input matInput [(ngModel)]="showProductDetail.tag" [ngModelOptions]="{standalone: true}">
</mat-form-field>
<mat-form-field id="product-status" appearance="fill">
<mat-label>Product Status:</mat-label>
<mat-select [(ngModel)]="showProductDetail.status" [ngModelOptions]="{standalone: true}">
<mat-option value="STOCK">STOCK</mat-option>
<mat-option value="OUT OF STOCK">OUT OF STOCK</mat-option>
<mat-option value="COMING SOON">COMING SOON</mat-option>
<mat-option value="NOT DELIVRABLE">NOT DELIVRABLE</mat-option>
<mat-option value="ON SALE">ON SALE</mat-option>
</mat-select>
</mat-form-field>