CODEWITHSUNDEEP
angular
Neurothustra
Neurothustra

Reputation: 297

Angular 5 @input() object property binding error

I'm not sure if the errors I'm getting:

***ERROR**: Can't bind to 'obj.Name' since it isn't a known property of 'comp'.*

is a result of Angular not allowing this behavior. The intent is simply to bind to @input object properties. Code:

// comp.component.ts
...
@Input() obj: ObjType = {
Name: ''
}

// comp2.html
...
// this HTML is passing the value from comp2.html to comp component
<app-comp [obj.Name]="MyNameIs"></app-comp>

I would expect the "MyNameIs" value to get passed back into the obj.Name property, but I'm getting the above error. Is this something I'm not doing correctly, or simply not something Angular (v5) does?

Upvotes: 0

Views: 3600

Answers (1)

Narm
Narm

Reputation: 10834

@Input is reserved for parent component to child component property binding.

For example: parent.component.ts should contain a property:

public myNameIs = { name: 'Marie Curie'};

parent.component.html Inside the parent template include the child component and bind to the properties:

<child-comp [obj]="MyNameIs"></child-comp>

child.component.ts Inside the child component use the @Input decorator to bind to the property.

@Input() obj: ObjType = {}

child.component.html Then you may use the property in your child component or template.

<h3> {{obj?.name}}</h3>

Here is a StackBlitz demo for your use case

In your case you can't bind to obj.Name, because the Input() decorator is bound to the object obj not the specific property obj.Name. All you have to do to fix your error is pass the value in like: <child-comp [obj]="MyNameIs"></child-comp> (See the working StackBlitz I made.)

Upvotes: 3

Related Questions