Get Started with Angular
Pass Values into Angular 2 Components with @Input
@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.
[00:00] Instead of creating all these list elements, I can actually create our app simple form elements, the component that we used. I'll delete this message for a second. I'll hit save and you'll see that for each of these messages, it will create a new form in the browser. Inside of our form we can say that we have an input and this input is the message.
[00:26] Then we can display that message above the input. This message is going to be input and we use input with the square bracket syntax. We'll create another line here and say [message] . This needs to be wrapped in the square brackets so that when I pass in message, it will take this message off of the mail messages and pass it into the input here. Then my component will receive that message and then display it in the template.
[00:59] When I hit save, you'll see we have this message above each of the inputs, and that it created a component for each input. The difference between this without the square brackets is when I hit save you'll see that it won't evaluate this message. It will treat this message as if it were a string. You'll see message, message, and message.
[01:22] Any time you want to take a property on an element or an input on a component, make sure and wrap this with the square brackets so that it evaluates this to get the value of message versus treating it as the string of message. This can be named anything and this can be named anything.
[01:41] Similarly, we could name this anything and name this anything and so on and so on. They don't have to both be named message. That's just the way they'll work out in this example. I'm just going to add the square brackets back, hit save, and we're back to having the message in each of our components.
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
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!)