In this lecture, we are going to make one final change to our modal components.
Like before we will look at the problem first, after we talk about the problem, we will implement
a solution.
The final problem with our model is a CSIS issue.
For this demonstration, open the app template file.
Inside this template, we are loading the authentication modal component.
At the moment, it's being rendered in the browser without a problem.
However, it's not completely safe from CIUSSS issues.
We may want to load the model from a nested element.
For example, I'm going to move the model from its current location to inside these section tags.
Next, I'm going to add a class to these section tags called text read Five Hundred.
This class can affect the model.
Let's refresh the page to see what happens.
If we open the model, the text color of the model has changed to read, this issue happens because
of CFS child elements will inherit excess properties from their parent elements.
Naturally, this is the default functionality of CFS.
One solution to get around this problem is by inserting our modal components in the true location of
our app template that can work, but it's not ideal.
Our model should work anywhere in our app.
They should remain unaffected by parent elements.
A model is a UI that appears outside of the app.
It should stand independently from the natural structure of our document.
We can fix this issue by removing our model.
This technique is supported in frameworks like React and View React calls.
This feature portals view calls this feature teleportation in angular.
There isn't a feature for handling this task.
Luckily, we can easily implement this feature in our editor.
We will open the modal component class file.
We are going to update the import statements of the angular slash core package to include an object
called Element Ref.
The Element Ref object gives us access to the host element of our component to better understand.
Let's check out the app in the browser for a moment.
We've talked about the host element before under the elements panel and the developer tools, we can
inspect the structure of our app.
Angular does not replace the custom component we've defined in our app.
Instead, the template gets inserted inside of the component tags.
The component tag is considered the host element by injecting the Element Ref object.
We will be given access to the respective components host element.
Our main objective is to transfer the element from its current location to the documents route, which
is the body tag before we can move the element.
We need to grab it back in the ED..
We are going to inject the element ref object into our components.
The name of the argument will be called L inside the constructor function.
We are going to log the element object.
Next, refresh the page.
Under the console panel, we will find the host element has been locked.
This object contains one property called native elements.
It contains the actual host element.
You can think of the element reference class as a wrapper around the native Dom elements.
Now that we have the host element, we can begin moving it back in the ED. We are going to remove the
console statements.
Next, inside the energy on init function, we will call the document body not a pen child function.
We will move the element after the energy on init IT function is called, this hook runs after the component
has been initialized.
It's the soonest we can move the element.
We are going to pass in the whisked Element Typekit native element property.
We're finished with two lines of code.
We were able to move the motel.
Our problems should be fixed.
Refresh the page in the browser.
If we scroll down the text inside the section we modified has the color red.
If we were to open the model, the model's color doesn't change.
It remains white.
The component is functional.
Too angular is capable of toggling the modal despite moving to a different location.
Our component is complete.
We spent several lectures working on the model.
It's one of the most challenging UI elements to work on because of the various edge cases that can pop
up.
We can start to move on to the content of the modal.
Before we do, let's remove the text read five hundred class from the section elements.
We will also move the mobile component back to the root of the template.
In the next lecture, we are going to start working on a tab component.