Angular 5 @input() object property binding error

Question

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?

Narm · Accepted Answer · 2018-06-08 20:46:43Z

3

@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.)

edited Jun 8, 2018 at 20:46

answered Jun 8, 2018 at 19:46

Narm

10.9k5 gold badges46 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neurothustra Over a year ago

I updated the post to reflect a mistake I had made: the html is passing the values to a separate component, hence the need for the @Input()

Collectives™ on Stack Overflow

Angular 5 @input() object property binding error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest