In this lecture, we are going to destroy the model after a successful form submission, after submitting
either the log in or registration form.
The model doesn't close if either forms were a success.
The user has to manually close the model or refresh the page.
We should hide the model after a successful submission.
Not only should we hide the model, but we should destroy it.
Letting the model hang around is not a good idea.
We are experiencing a memory leak if we let the model exist beyond authentication.
Open the angular developer tools in your browser.
Under the Components tab, the authentication model is listed as an active component in our app.
In addition, we are loading other components.
These are memory leaks as well.
We should completely destroy the model after a successful authentication.
Luckily, we have an observable in our service for informing our components of the user's authentication
status.
Let's import this service into the app component, which is where the authentication model is loaded.
Open the app component class file.
At the top of the file import, the authentication service.
Next, add the constructor function to the app component if it isn't defined.
Inside the constructor functions arguments, we will inject the authentication service as off.
The authentication service should be public.
We need to subscribe to the observable from the template.
Technically, we could subscribe to the class.
However, we learned about the async pipe in an earlier lecture.
Let's subscribe to the observable from the templates.
Open the app template file.
At the bottom of the templates, we are loading the authentication model on this component.
We will apply the NGF Directive.
The value for this directive will be the is authenticated observable with the async pipe.
We want to show the model if the user is not logged in, let's wrap the value with the pair of parentheses
and the negation operator.
Let's give our model a test.
If we did everything right, we shouldn't see the model in the document.
Let's refresh the page in the browser.
I'm still logged into the application.
Despite that, the authentication model is still active.
The problem isn't with our observable.
Otherwise the links wouldn't be functional either.
The links work, but the model is active.
The problem lies with the model to understand why switch over to the elements panel.
Under the body tag, the app modal component appears at the bottom.
It's a child of the body element instead of the app component.
We can verify the structure of the document by selecting the element in the tree at the bottom.
The developer tools show us the hierarchy of elements.
As you can recall, we moved the component from its original location to the root of the document.
This teleportation was to minimize CIUSSS errors.
However, it does introduce some problems in our app if we want to remove the component altogether.
We will need to remove the element manually.
Angular has lost control of the element in our editors.
Open the modal component class file.
The components still gets destroyed, however, it will not be removed from the dam.
If we want to completely remove the element, we need to remove it when the component gets destroyed
at the top of the file.
Let's import the on destroy interface.
Next, we will implement the UN Destroy interface on the class.
Lastly, we will add the energy and destroy method to the class.
Inside this method, we will call the document dump body dump, remove child function.
We can remove elements with the remove child function.
This has one argument, which is the element to remove.
Luckily, we have a reference to the element because we injected the element reference service into
our component.
We can pass in the whisked element that native element property.
Let's give our app a test.
If we refresh the page, the component has been removed from the documents.
We can verify this removal through the developer tools.
It doesn't appear under the elements panel or the angular panel.
Perfect.
Let's make sure the model appears when we're not logged in, we can log out by switching to the application
panel under the storage section.
We can clear these site data.
If we refresh the page, the model will become accessible again.
Let's log in to our app while keeping the angular developer tools open.
The moral component should disappear from the list of components if it doesn't.
You may need to click on the list or reopen the dev tools.
The developer tools are still new.
There are some bugs in it to be completely sure we can switch to the elements panel if the component
is not listed in the document.
The component has been destroyed.
Perfect.
In the next lecture, we're going to make a slight improvement to destroying the model.