In this lecture, we are going to create an ID system for our models.
New models should be assigned an I.D. if we need to open or close a model.
We should provide the I.D. of the model.
This way, our service can handle a single model instead of all models.
We are going to start by working in the authentication model component class file.
We are going to register models from the parent component, after all, parent components are the ones
creating the models.
We should inform our service of a new model.
Our component will need the model service object.
We will inject bimodal service object in the constructor functions arguments.
Visual Studio should have imported this object for you if it didn't.
Be sure to import it manually.
After injecting the service, we will register a new model.
The model should be registered during the initialization of the components.
We can use the energy on init lifecycle function to help us inside our component class.
We will run a function called this model dot register.
This function doesn't exist in our service.
We will be creating it in a moment.
The register function will allow us to register a new model with our service.
It will have one argument, which is the unique ID for the model.
We are going to call this model authentication.
Next, we will call the register function again with an idea of test.
We are creating a second model for testing purposes.
We will remove the second model after verifying the ID system works.
Let's open the mobile service file.
Inside our service, we are going to create an array to store a list of IDs, each ID will represent
T-Mobile in our class.
We will replace the visible property with a new property called models.
The model's property will be an empty array.
We will push new models into this array before we do, we should add type safety.
At the moment, anything can be pushed into this array.
An interface should be suitable for this task.
Above the class, we will create an interface called AI Modal.
As a reminder, pre fixing an interface name with the letter, I helps other developers identify this
definition as an interface inside this definition.
We will have two properties called ID and.
There are types will be set to string and Boolean respectively.
The I.D. property will help our service identify the modal, whereas the invisible property will serve
the same purpose as the visible property we had in the class.
It'll help our app hide or show a model.
Let's apply this interface to our model's property.
We can annotate an array by adding the name of the table, followed by a pair of square brackets.
By adding this annotation, we can constrain the type of values that can be pushed into the array,
our array is ready.
Let's move on to registering a new model in our class.
We will define the register function.
The register function should accept an argument called I.D. with the type of string inside this function.
We will push a new object into the model's array.
We will pass in the ID argument.
Afterward, we will set the visible property to false.
By default, we should hide the models for testing purposes.
Let's log the model's property after pushing a new model.
Our service is going to be broken because the other two methods in our class relied on the visible property.
This property has been moved.
We will refactor these methods later.
First, we want to test if our models are being registered to fix these errors.
We will update the IS model open function to return true.
The toggle modal function will be commented out.
These changes will not be permanent.
We will refactor them later.
Let's refresh the page.
Both models will appear since our function is returning true inside the console.
We will find two arrays that have been logged.
It's because the register function is called twice.
We care about the second Turay inside this array.
We will find two models that have been registered perfect.
We're successfully keeping track of our models.
We can move on to updating our components to start using the ID system.
Let's handle this task in the next lecture.
Before we do, let's remove the console statement from the register function.
We don't need it anymore.
See you in the next lecture.