Pass Values into Angular 2 Components with @Input

InstructorJohn Lindquist

Share this video with your friends

Send Tweet

@Input allows you to pass data into your controller and templates through html and defining custom properties. This allows you to easily reuse components and have them display different values for each instance of the renderer.

Matt
~ 9 years ago

I've been watching the videos, and up to this point, Angular 2 seems ok, and TypeScript brings some order. Now when I see more of the funky annotations interspersed in the html template, though, I'm not sure how to explain it, but that type of markup just does not feel right. The Angular team has turned HTML into a soup of cryptic symbols.

I suppose that since you have played so much with Angular 2, you have grown comfortable with the syntax and now like it? Or do you also find it...less than compelling.

I have not investigated Aurelia and Vue, which have an html syntax sharing greater similarity with Angular 1 than Angular 2. This might be sufficient motivation. (Hint: egghead should do some vue.js and aurelia videos!)

Robin Ury
~ 7 years ago
Can't bind to 'message' since it isn't a known property of 'app-simple-form'.
1. If 'app-simple-form' is an Angular component and it has 'person' input, then verify that it is part of this module.
2. If 'app-simple-form' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
property message of SimpleFormComponent```

Edit: This error message will also show if the export is referenced (loosely?) in the template. 

E.g. I declared a class property "people" but bound the property as ` *ngFor="let person of people"`. 
This appeared logically valid as the form component did receive the `person`. 
However, the warning persisted. I was able to fix this by changing the binding to explicitly refer to `people` as `this.people`.
Angular error messages FTL