In this lecture, we are going to update our components to start using our services ID system at the
moment.
Our app is completely broken because our components are not correctly using our services functions.
Let's fix that.
We will start with opening the modal open the navigation component class file.
Inside this class, we have a function called open modal.
It's invoking the toggle modal function.
We need to pass in an ID.
The ID of the model we want to open is called authentication.
Awesome.
Let's move on to closing the component.
Here's where things can get a bit challenging.
Open the modal template file.
On the root element of the templates, we are calling the IS model open function.
The purpose of the modal component is to act as a skeleton.
It shouldn't know which model to open or close.
It needs to be told this information.
We can't hard code the value as we did in the navigation component.
Luckily, the modal component will always be the child component of the component supplying the content.
We have a parent child relationship.
We should use inputs to send down data to the modal component.
By accepting input data, the modal component will know which model to open or close.
Using inputs and outputs is a viable option for parent child component relationships.
Services are great, but not something we will always need.
In this instance, we can get away with using inputs.
Let's open the authentication modal component template file.
We have two models.
We are going to add a property called Model ID on both components.
We will set the first property to authentication.
The second property will be set to test.
Normally we would apply property binding to properties on a component if we all met these square brackets
from a property.
The value for the property will be interpreted as a string.
That's perfectly fine.
The IDs of our models are stored as strings.
If you want, you can apply a property binding if you're going to outsource the IDs to properties from
our class.
However, I think hard coding the IDs will work without a problem.
Let's update the mobile component to accept the IDs open the modal component class file.
We will need to accept the input inside the class.
We will add a property called modal ID with the input decorator.
The initial value of this property will be a stream if you're using visual studio code, the decorator
function should have been imported.
If not, import it manually, it can be found under the angular core package.
Next, we can start using it in our component below, we have a function called closed modal.
We will pass in the modal ID property to the toggle modal function.
Let's go back to the template.
We should update the is modal open function.
We will pass in the modal ID property.
It's time to test our application, refresh the page.
The model is entirely functional.
The problem we had before is gone, the test model never opens or closes.
We have the power to open and close models independently.
We have a fully reusable model.
It took a lot of work, but it was well worth the effort.
Angular makes it super simple to design components.
Before we in this lecture, we should remove the test components.
We don't need it anymore.
We've proven the components can be opened independently back in the ED. We will update the authentication
modal component template file by removing the test model.
We should remove the registration of the test model to open the authentication modal component class
file.
Inside this class file, we will remove the register of function for the test model.
We're finished in the next few lectures.
We are going to make some final improvements to our model.
I'll see you at the next one.