angular directive to receive an object

Question

angular directive to receive an object

When I have a table and click on a row, the information is supposed to be displayed in a different component using the @input decorator. However, instead of displaying the correct result in my other component, I am getting [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}}

angular typescript angular-material

Answer 1

Answer №1

You cannot directly view objects in HTML, you need to stringify them. I have provided an example link for better understanding.

To address this, I have created a demo pipe that converts objects into strings:

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

@Pipe({
  name: 'stringify'
})
export class StringifyPipe implements PipeTransform {

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

}

In the HTML code, I have included both the object and its string representation:

{{selectedArrayChild}}
 {{ selectedArrayChild | stringify}}

The output will be as follows:

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

Answer 2

You cannot directly view objects in HTML, you need to stringify them. I have provided an example link for better understanding.

To address this, I have created a demo pipe that converts objects into strings:

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

@Pipe({
  name: 'stringify'
})
export class StringifyPipe implements PipeTransform {

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

}

In the HTML code, I have included both the object and its string representation:

{{selectedArrayChild}}
 {{ selectedArrayChild | stringify}}

The output will be as follows:

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

Answer 3

Answer №2

If you are working with code that takes an object type input parameter, don't forget to convert the object into a string before displaying the result. To achieve this, consider using

console.log(JSON.stringify(this.selectedArrayParent))

within the selected function to obtain the JSON data in a string format. For more information on formatting JSON objects for HTML display, check out this link.

Answer 4

If you are working with code that takes an object type input parameter, don't forget to convert the object into a string before displaying the result. To achieve this, consider using

console.log(JSON.stringify(this.selectedArrayParent))

within the selected function to obtain the JSON data in a string format. For more information on formatting JSON objects for HTML display, check out this link.

angular directive to receive an object

Answer №1

Answer №2

Similar questions

Issue with Adding Class to Angular2 Material Tooltips

Angular recognizing string-array type as a string input is not correct

Navigating through child routes in Angular can be tricky, especially when dealing with unknown routes

Communicating data between Angular components that have no direct binding or relationship

"I am looking for a way to incorporate animation into my Angular application when the data changes. Specifically, I am interested in adding animation effects to

Should I implement jquery within angular 2, or opt for the current css/js frameworks available?

Terminate all active service requests and retrieve only the outcomes from the most recent request

Incorporating an expansion panel within an Angular Material table row

Is it possible to overlook TypeScript errors when compiling with Angular 2 AoT?

Learn how to trigger an event or API call in Angular 8 when the browser is closed with the help of HostListener

Prisma: Incorrectly identifying existing items where the list contains any of the specified items

Display a React functional component

Is it possible to display the combined string when concatenating two strings?

Struggling with setting up a search bar for infinite scrolling content

Is it possible to enable typescript to build in watch mode with eslint integrated?

Angular is facing a challenge in locating the main parent based on its class interface

Issues with Angular ng-bootstrap tabset component not functioning as expected

Encountered a runtime error while processing 400 requests

Is it possible to dynamically insert additional fields when a button is clicked?

The pagination button in angular bootstrap UI caused the button to shift when clicked