Скачать с ютуб Angular 2 - Inputs - Communicate from Parent to Child Component в хорошем качестве

Angular 2 - Inputs - Communicate from Parent to Child Component

Angular 2+ Essential Training: https://goo.gl/yjQPIu Repo: https://goo.gl/2Rrt2g Learn how to use @Input in Angular 2 to send data to a child component. Components, as we’ve learned, are at the heart of Angular. When composing our application our components form a tree-like structure in which components become nested. These nested or Child components need a way of receiving data from its parent as well as sending data back to its parent. In order to accomplish this Angular provides us with Inputs and Outputs. Lets first focus on Inputs. Input is a decorator used inside a child component that allows data to flow from a parent component to a child component. Whenever a nested component wants to receive input from its container, it must expose a property next to an Input decorator. And this exposed property gets binded to a value in the parent. So inside of our child component we first need to import the Input decorator. And then inside our class we invoke our Input here. And then we create a property of whatever we want, in this case named reviews. This property name can be anything, and you can think of it like a variable that’s going to represent some value we get from the parent. And then we need to define its type, which in this case is a number. This property called reviews is going to contain a number of reviews given to us by the parent. In our current application we’re displaying the number of book reviews in our template using book.bookReviews and property in our class looks like this. Now the way we’re able to gain reference to bookReviews in our child component is by creating a binding inside of our child selector. So inside our parentComponent html file here we add in our child selector referencing the child component and then add a binding. We wrap the reviews property we defined in square brackets and then set it equal to a value inside the parent. So now our reviews child property has been assigned the value of bookReviews. And this means that inside of our child html file we can now reference the reviews property which is going to be populated with parent value. So if we we’re using interpolation here, we would see the number 15 displayed in our child template. Lets now practice using Inputs inside of our application.