Pass JS object through angularjs binding

Question

I want to pass a object containing multiple string values to another component using angularjs bindings.

const personName = {
    firstName: this.conversation.customer.firstName,
    lastName: this.conversation.customer.lastName
};

const template = `
    <register-task-popup
        chat-contact-info='${personName}'
    ></register-task-popup>`;

this.$mdDialog.show({
    template,
    targetEvent: null,
    clickOutsideToClose: false
});

In my registerTaskPopUpComponent I have:

selector: 'register-task-popup',
bindings: {
    chatContactInfo: '<'
}

private chatContactInfo: any;

public async $onInit() {
    console.log(this.chatContactInfo);
}

When I run the code the console only logs:

angular.js:15567 Error: [$parse:ueoe] Unexpected end of expression: [object

I'm not sure what's causing the error.

Does this answer your question? [angular material load angularjs 1.5 component into $mdDialog](https://stackoverflow.com/questions/38308651/angular-material-load-angularjs-1-5-component-into-mddialog) — Kaustubh Khare, Dec 10 '19 at 09:00

score 1 · Accepted Answer · answered Dec 10 '19 at 11:09

Use:

const personName = {
    firstName: this.conversation.customer.firstName,
    lastName: this.conversation.customer.lastName
};

const template = `
    <register-task-popup
        chat-contact-info='${JSON.stringify(personName)}'
    ></register-task-popup>`;

this.$mdDialog.show({
    template,
    targetEvent: null,

Because [object object] does not parse well.

Pass JS object through angularjs binding

1 Answers1