In this lecture, we are going to toggle the visibility of the model with our service.
It's going to involve a lot of methods.
The service should handle updating the visibility of the model.
Anything related to the data of the model should be handled in the model service.
Let's open it in our editor.
First, we are going to add the private modifier to the invisible property.
This property should be privatized to prevent other components from accessing it by keeping our data
private.
It'll be easier to track where changes are made to it.
We won't have to search through dozens of files to find where the property is being changed.
However, it does mean we will need to create a method for returning the value inside the class.
We will define a method called is modal visible.
Inside this method, we will return the visible property.
Next, we will create a method for toggling the invisible property to find a method called toggle model.
Inside this method, we will set the visible property to its opposite.
Generally, it's considered good practice to define methods for retrieving and updating properties in
your class.
It gives us control over how an external class can interact with our service.
Our service is ready.
The next step is to call these methods from our components.
Let's start with the modal component.
Open the modal template file.
On the root element, we should add the hidden class as a reminder, the hidden class will set the display
property of an element to none.
This time, the class should be dynamically bound to the elements.
We can add the energy class directive with property binding to help us.
We will set this directive to an object inside the object.
We will add the hidden class, the condition for the class will be modal dot is modal open.
The Moto Service is accessible in our templates.
It is a public property that's important to understand if the access were set to private.
We would not be able to use properties in our template even if they are defined inside the component
class.
The IS moto open function should return false.
It's the default value of the model.
We want our models to be hidden when the page loads.
However, this class should only be applied if the value is false.
Therefore, we will add the negation operator.
Let's refresh the page.
Bimodal has disappeared.
Great.
It's time to start toggling the visibility with the other methods in our editor.
Open the navigation component class file.
The service is not available in this components.
We need to inject it at the top of the file.
We will import the modal service object.
Next, we will create a property called Modal Annotated with the modal service object in the constructor
function.
After injecting the service, we can use it in our component.
Open the navigation template file.
Search for the log in link in the template, you can find it under the section that says navigation
links.
On the anchor element, we will listen for the click event.
We are going to attempt to open the model when this link is clicked.
You may be tempted to call the toggle mode or function.
However, we are clicking on an anchor element.
The browser may redirect the user.
This behavior is natural for anchor elements.
We should prevent the default behavior before toggling the modal.
Instead, we are run a function called open model with the event object passed in.
As a reminder, the event object is available in our templates, we can pass it on to the methods and
our components.
Let's switch back to the navigation component class.
We will define the open modal method with the event argument.
The event argument will be annotated with the event object inside this method, we will call the prevent
default function.
The prevent default function will prevent the default behavior of the browser by calling this method.
Users will not unexpectedly be redirected to a different page.
We can proceed to call the this stop modal toggle mode or function.
Let's test our app.
If we pressed the log in link, the model should appear.
We've successfully opened the model to recap, we've defined a set of methods for interacting with the
visible property.
We can call these methods to affect the appearance of the model in the next lecture.
We will start working on closing the model.