How to pass an object to child component while creating it in HTML template markup?

Question

I'm doing the following (it's working as expected) in my parent component.

<app-textbox [info]="{caption:'Boink',value:'Oink'}"
             ... ></app-textbox>

In the receiving child component I have the following declaration.

@Input() info: any;

Now I want to improve the code and make it hard-typed, so I introduced and imported the following class.

export class TextBoxInfo { constructor(public caption: string, public value: string) { } }

Then, I updated the child component's input as follows.

@Input() info: TextBoxInfo;

Everything still works, as expected but I also wanted to improve the markup in HTML by switching to the following syntax.

<app-textbox [info]="new TextBoxInfo('Boink','Oink')"
             ... ></app-textbox>

That doesn't work and I'm getting the error message .

Uncaught Error: Template parse errors:
Parser Error: Unexpected token 'TextBoxInfo' at column 5 in [new TextBoxInfo('Boink', 'Oink')]
in ng:///AppModule/ParentComponent.html@45:24 (" /div> app-textbox [ERROR ->][info]="new TextBoxInfo('Boink', 'Oink')" ...

I've try to google to confirm or contradict that I can use the syntax like new Something(...) in the template's markup. Nothing conclusive this far. I also tried to google for the error but it's simply telling me that the syntax isn't recognized. I haven't found any viable examples of how to create an object and pass it in the template and googlearching it is complicated by the lack of good key words.

Am I approaching the object creation incorrectly?

Answer 1

Using type literals in templates is not supported. The scope of a template is the component instance, and therefore only properties of the component instance can be accessed.

If you need to reference identifiers outside of that scope, you need to move the code/expression to the components class and expose it to the template from there.

class MyComponent {
  createTextBoxInfo(p1, p2):TextBoxInfo { return new TextBoxInfo(p1, p2); }
}

[info]="createTextBoxInfo('Boink','Oink')"

while this concrete case is a bad example in practice. It would create a new TextBoxInfo every time change detection is run which is probably not what you want and will bring the performance of your app to its knees.

It's better to assign the value to a property and bind to that instead:

class MyComponent {
  textBoxInfo = new TextBoxInfo('Boink','Oink'); }
}

[info]="textBoxInfo"