angulartypescriptangular-materialmat-form-fieldangular-input

How can I display the details from a parent object in a child input form with Angular Material?


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 {
  }

}

Solution

  • 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>