In this section, we will get started with simple angular components and then we will isolate the structure into different components and then try to communicate between the components. For this post, readers are expected to have basic working knowledge of Angular 2/4 and how to scaffold projects with Angular CLI. With that being said let’s get started. Below, I have created simple angular 4 project via CLI.
Apart from this, I have also created Movies component like
Here, I have also created model to serve my movies like shown below in the snippet. Its just a collection.
Now, my movies.component.html file looks like
Similarly, my corresponding typescript file looks like
This is fairly simple code. Basically, what I am doing here, is just iterating in the movies collection. Here, I have saved the movies collection from the model file into a local variable and then used the same in markup. Now, in order to consume the same, I have changed my app.component.html file like shown below.
With the above change in place, it will print the below output.
Now, let’s say, I would like to extend this example and movie details to it like
Here, I have added extra properties and similarly, I have also modified my markup like shown below.
With the above change in place, now my markup looks like
Apart from this, I have also created new review component which looks like
Now, it would be nice, if I can print the reviews as well. But, I don’t want reviews to be part of the same movies component. Hence, I will create reviews component via CLI say ng g c reviews –spec false. Here, I have mentioned –spec false as I don’t want CLI to emit test file as testing is currently not in the scope. 
Now, I have improvised my movies component like shown below.
Here, under reviews section, I am using custom Property binding to bind the collection and utilize the same in our movies component. Now, my corresponding movies.component.ts file looks like
Apart from that, I have also improvised my Reviews components as well. Below is the markup and corresponding typescript file.
And,
With the above change in place, when I save and refresh the app, it will produce me below error. 
Now, the problem is that I am trying to use the reviews property outside the component and hence it gave above error. In order to fix the same, we need to make this property globally exposable so that other components can consume that. In order to do the same, we need to make use Input decorator. Below is the finished snippet for the same.
With the above change in place, it will produce the expected output.
Therefore, here we have seen couple of things like how to get started with simple component, then how to extend the same with additional properties. Later on, we have seen how to talk to different component properties via custom property binding. I hope, you would have liked this discussion. In the next section, we will delve further. Till then stay tuned and happy coding.
Code Download :- https://github.com/rahulsahay19/Angular-4-components
Thanks,
Rahul Sahay
Happy Coding
