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

Ways to divide numerical values in Angular?

Cancelling an ongoing AWS S3 upload with Angular 2/Javascript on button click

Angular 5 Dilemma: Exporting UI Components without Locating Template

What is the process for incorporating custom parameters into Angular 5 DataTables?

Tips for resetting a form after submission

I'm looking to switch out the `~` to turn it into a URL for the backend, seeing as `<img alt="" src="~/media/Banner/plane.JPG">` is returning a 404 error

Is there a way for the parent class to access the child class in Angular 2?

How can dependencies for an entire class or module be mocked in the mocha ecosystem similar to jest.mock?

Customizing the styling of buttons in Highcharts is disabled when in full screen mode

Creating interactive buttons within a card in Ionic 2

What is the best way to send multiple values from the view to a method without using two-way binding?

Experiencing an issue with type error when transitioning syntax from using require to import

The necessity of the second parameter, inverseSide property in TypeORM's configurations, even though it is optional

The pairing of Transpiller and Internet Explorer 8 is like a dynamic

What is the best way to transform a Storybook typescript meta declaration into MDX format?

Obtain the data from onTouchTap action

Exploring the Integration of Angular 5 with Firestore for Working with Nested

How come once I close a PrimeNG modal that is defined within a child component, I am unable to reopen it?

The module './$types' or its related type declarations could not be located in server.ts

Using Primeng to implement pagination and lazy loading in a dataView