In this lecture, we're going to render our image inside the post components.
We have a couple of options at our disposal.
We can move the template and properties to the post component.
Alternatively, we can move just the templates.
The URL for the image can be left inside the app component.
Instead, we can feed the post component the image.
Why would we do this?
Our goal should be to develop reusable components.
For example, let's say we're developing a blog.
If our blog has hundreds of posts.
Would you rather create a component for every post or a single component?
I bet you would want to create a single component.
It's much more efficient instead of hard coding data into a component.
We can create components to accept data from a parent component.
The post component can allow the parent component to tell it what image to render by sending the image
to the component.
We can reuse the post component with different images.
The responsibility of supplying the image will be the job of the parent component.
If we hard code the image inside the post component, the same image will get rendered.
Angular makes it super easy to pass down data from component to component.
Let's get started.
Open the app template.
We're going to cut the image tag.
Next, switch over to the post template.
We will paste in the image tag.
The editor will throw an error.
It tells us the image URL property does not exist in the post component class.
This is important to understand we don't have access to properties in other classes.
Templates have limited scope to the class they are associated with.
We should tell angular this property should come from the parent component before we move on.
I want to rename the property to post image.
This step is optional, in my opinion.
I think it would be confusing if we have the same property names in different classes.
By renaming the properties, it should give us clarity as to which property belongs to which class.
The property will be called post image in the post component.
In the app components, the property name will remain image URL.
They will both hold the same value.
Let's open the post component class.
Inside this class, we will add the post image property with an initial value of an empty string.
The property will be initialized with an empty string.
The goal is to update this property with the value passed down by the parent component.
This is where things get tricky.
Angular will prevent external code from changing this property.
It can only be configured from within this class.
That's a good thing.
We don't want to allow other classes to change their properties in this class without permission.
It's the default behavior of angular.
However, in this specific case, we want to permit other components to set this property.
We can tell Angular to permit parent components by adding a decorator and the import statement for the
angular core package.
We're going to update the list by adding a decorator called input.
The input function is a decorator.
Interestingly, decorators are not limited to classes.
They can be applied to properties.
The syntax is the exact same decorators can be applied to properties by adding them before the property
name.
Let's apply it to the post image property.
We are calling the input decorator as a function.
We don't need to pass in configuration options to this decorator.
After adding this decorator, we're ready for the last step.
We need to add the post component to the app components template before we do take special note of the
selector property in the components configuration settings.
The selector for this component is app post.
By default, Angular will prefix our component selector names with the word app is considered good practice
to prefix selectors.
This prefix prevents our custom components from clashing with default HTML tags back in the app template.
We are going to add the app post component.
We can write components in other components as long as they're registered with the same module.
The app component is an importing the post component.
It doesn't have two components declared within the same module are accessible to one another.
It's one of the many benefits of using angular as module system.
We can centralize our imports into one file instead of across several after adding this component.
We can start passing on the image.
Believe it or not, we can reuse a feature we learned in an earlier lecture.
Passing down data can be accomplished through property.
Binding properties can be configured through attributes on a component tag.
The attributes name must be the same name as the property in the class, accepting the data.
In this example, the name of the property is called post image.
The post image attribute should be set to the image URL property by default, attribute values are not
processed as expressions.
Luckily, Angular supports property binding on components.
Let's wrap this property with square brackets.
The attributes value will be set to the image URL property.
We're finished.
If we did everything right, the image should appear in the browser.
Let's refresh the page.
The images appearing awesome, we were able to communicate data between components, which is necessary
for any app data can flow from a parent component to a child components.
We will continue learning about data flow in components in the next set of lectures.