angular @Input get object object

Question

I have table where when I click the line is displayed in a component different from the table to pass the information I use the @input decorator but when I try to display the result in my other component I have [object Object]

table.html

<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selected(row)"</tr>
</table>

table.ts

 public selectedArrayParent!: Product;
     selected(row:Product) {
        this.selectedArrayParent = row;
        console.log(this.selectedArrayParent);
      }

info.ts

 @Input() public selectedArrayEnfant!: Product;

info.html

{{selectedArrayEnfant}}

because it is object. You can't show object like that in html. İf you want to see it in html u need to stringy it to see in html. — mr. pc_coder, Jun 22 '21 at 09:38

score 1 · Accepted Answer · answered Jun 22 '21 at 09:43

You cant see object in html like that u need to stringfy it. I created one example for you to understand

I created demo pipe for you. This pipe makes objects as string

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'stringfy'
})
export class StringfyPipe implements PipeTransform {

  transform(value: any): any {
    return JSON.stringify(value);
  }

}

in html I did put both of them

  {{selectedArrayEnfant}}
  {{ selectedArrayEnfant| stringfy}}

then result will be

[object Object]
{"test":"test"}

score 0 · Answer 2 · answered Jun 22 '21 at 09:55

As per your code, the input param is object type so you have to cast the object to string to display the result. Use console.log(JSON.stringify(this.selectedArrayParent)) to get the JSON in a string format in the selected function. For html click here

angular @Input get object object

2 Answers2