I am trying to bind a ts variable to html file, i tried so many way but i could not. Maybe I am setting the value in ts file wrong. Here is the template code:

<div class="md-dialog-container">
    <h2>{{message}}</h2>
    <button type="submit" class="button-style btn btn-info" (click)="closeDialog()">Close</button>
</div>

And here is the ts file of that template:

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-error-dialog',
  templateUrl: './error-dialogponent.html',
  styleUrls: ['./error-dialogponent.css']
})
export class ErrorDialogComponent implements OnInit {

  message: string;

  constructor(private dialogRef:MatDialogRef<ErrorDialogComponent>, @Inject(MAT_DIALOG_DATA) data) {
    this.message = data;
   }

  ngOnInit(): void {
  }

  closeDialog() {
    this.dialogRef.close();
    console.log(this.message);
  }
}

As you see I am getting the message value as parameter. When I print it to console when I am closing the dialog, it is printing correct, but I could not show it in template page. How can I solve this issue ? I have tried this.message instead of just message in html as well but it also did not work.

As you see below, console.log is working correct but on popup it shows object-object

I am trying to bind a ts variable to html file, i tried so many way but i could not. Maybe I am setting the value in ts file wrong. Here is the template code:

<div class="md-dialog-container">
    <h2>{{message}}</h2>
    <button type="submit" class="button-style btn btn-info" (click)="closeDialog()">Close</button>
</div>

And here is the ts file of that template:

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-error-dialog',
  templateUrl: './error-dialog.ponent.html',
  styleUrls: ['./error-dialog.ponent.css']
})
export class ErrorDialogComponent implements OnInit {

  message: string;

  constructor(private dialogRef:MatDialogRef<ErrorDialogComponent>, @Inject(MAT_DIALOG_DATA) data) {
    this.message = data;
   }

  ngOnInit(): void {
  }

  closeDialog() {
    this.dialogRef.close();
    console.log(this.message);
  }
}

As you see I am getting the message value as parameter. When I print it to console when I am closing the dialog, it is printing correct, but I could not show it in template page. How can I solve this issue ? I have tried this.message instead of just message in html as well but it also did not work.

As you see below, console.log is working correct but on popup it shows object-object

• javascript
• html
• angular
• typescript

• 4 What is your data that you are retrieving? Are you sure its a string? [Object Object] is an indicator that an object has been arbitrarily converted to a string with toString(), so the value in message isn't a string. You should assign data.string if you want the string inside the object to be set to message, actually. – somethinghere Commented Jul 29, 2020 at 19:00
• @somethinghere yes its worked thanks man. if you write it as answer i can accept it. – Chris Garsonn Commented Jul 29, 2020 at 19:03
• 1 I have just done that, there are two solutions actually. Good luck! – somethinghere Commented Jul 29, 2020 at 19:03

4 Answers 4

According to your console log, the value at message is not a string, but on object shaped like this:

{ string: "My String" }

So when it gets converted to string using toString(), you get [Object object] as an output. So where you assign this.message = data, you should actually do this.message = data.string:

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-error-dialog',
  templateUrl: './error-dialog.ponent.html',
  styleUrls: ['./error-dialog.ponent.css']
})
export class ErrorDialogComponent implements OnInit {

  message: string;

  constructor(private dialogRef:MatDialogRef<ErrorDialogComponent>, @Inject(MAT_DIALOG_DATA) data) {
    // Change made below, so your variable is of type string, not any
    this.message = data.string;
   }

  ngOnInit(): void {
  }

  closeDialog() {
    this.dialogRef.close();
    console.log(this.message);
  }
}

Otherwise, in your template, you could also do {{message.string}}:

<div class="md-dialog-container">
    <!-- Change made to read the value in the object, not the object itself -->
    <h2>{{message.string}}</h2>
    <button type="submit" class="button-style btn btn-info" (click)="closeDialog()">Close</button>
</div>

That useful if you expect that you will be updating the message object with a new object, and keep everything in sync.

The data you pass is in the format of data: {string: string}, which reads as "data is an object with a property of string that has the type string". If you want to show string property inside your template you need to access it via message.string.

<h2>{{message.string}}</h2>

If you want to show the entire object, you can use angular's json pipe:

<pre>{{message | json}}</pre>

This will print: {string: "The text you passed"}.

If you are only interested in the string property in the first place, you may want to alter it in the constructor directly.

this.message = data.string;

and print it via

<h2>{{message}}</h2>

You are doing binding incorrectly. You received object and it will not display directly.

You need to bind with its key.

<h2>{{message.string}}</h2>

Please try,

ngOnInit(): void {
  this.message = data;
}