Life Cycle Hooks in MEAN Stack
In the previous section, we learned about the service and how we can make aware of service to the angular. We created getPosts and addPost functions in the postService class. Now, in this section, we will learn how we can call the getPosts and addPost function. We will also take a look at the interface.
Angular provides lifecycle hooks, which will automatically execute it when angular creates a component. The onInit is one of the lifecycle hooks which we use in our application.
1) The onInit is an interface class. So, we will implement it and we also override its abstract method, i.e., ngOnInit() method. Angular automatically execute this method for us when it create this component. We will implement this in the following way:
2) Now, we will call the getPosts function in the ngOnInit() We call the getPosts() function using the postsService property in the following way:
3) Now, we will call the addPost() function or method. We will go back to our post-create.component.ts file. We will connect this file with our service by using a constructor, as we have done in our post-list.component.ts file. Now, we don't use emitter and output. We remove both of these from our code and call the addPost(0 functions in the following way:
4) Now, we need to remove some code from our files because we are using services now, not event binding. We remove the @Input() from the post-list.component.ts We will go back to our posts.service.ts file, and in this file, we could not fetch the copy of the post, so we need to replace the getPosts return statement with the following return statement :
We also remove the bindings from the app.component.html file. We also remove it from the app.component.ts file.
We save all the changes and run our application on the ngServe. It will work in the same way as it worked with property and event binding.
There is another way of copying post to avoid unwanted manipulation of the post in any component fetching our post. We will use the event-driven approach, where we actively push the information about the new posts being available to the components. For this purpose, we can use the event emitter, but it is meant to be used in conjunction with that @output decorator. Instead of this, we will use another feature provided by the Rxjs package, i.e., Subject.
The Rxjs is all about observables and a concept that can be a bit more complex to grasp. This package is about objects and helps us to pass data around the components. This feature is not a part of angular but a core dependency. We will use the following steps to use this feature in our application:
1) We need to import Subject from the rxjs We can say the Subject is an event emitter, but it is different because it is for broader usage.
2) We will create this Subject as private property. We will use the same syntax, which we used for the emitter. We will create an instance of the Subject and pass it to that property. We will also pass a list of posts as a payload in the following way:
3) We don't just want to update our post; we also want to emit new value. We will use next rather than emit and pass the new value that we want to emit in the following way:
The […this.post], creates a new array having copied elements of posts.
4) Now, we want to listen to the Subject because it is emitting whenever we add a post. We created our postUpdated property as private, so we cannot directly access it to prevent other components from emitting data with it. So, we will add a new method getPostUpdateListener(), and in this function, we will add the following line of code:
This return statement is used to return an object to which we can listen.
5) Now, we will go back to our post-list.component.ts We will still fetch the list of posts at the beginning, even though it is guaranteed to be empty right now. But here, we will also set up a listener to that Subject in the following way:
The subscribe() function is used for a subscription here. The subscribe function takes three arguments, i.e., first one is a function which gets executed whenever new data is emitted, the second argument will be called whenever an error is emitted, and the third one is a function that is called whenever the observable is completed, or there are no more values to be expected. So, we will pass only the first argument here because both are not necessary.
6) Now, we will store the subscription in a new property which will be of type subscription. We will import subscription from rxjs and create property and store the subscription in it in the following way:
7) Now, we need to unsubscribe it whenever this component is destroyed. There is another life cycle hook, i.e., OnDestroy. We will implement this, and this will force us to add one other method, i.e., ngOnDestroy. This method is called whenever this component is about to get removed. We will add this hook and method in the following way:
This will remove the subscription and prevent memory leaks.
It will work fine when we save it and run it on the ngServe.