Using Property and Event Binding in MEAN Stack

In our previous section, we learned about structural directives and how we can use the structural directives in our application or website. In this section, we will learn how to create a post using property and event binding in the MEAN stack.

We will do the following changes in our code:

1) Firstly, we need to add one more input field in our post-create.component.html We will create the input field in the same way as we have created the text area. We also give title to both input field and text area using two-way binding. So, the text field and the text area is coded in the following way:

In our PostCreateComponent class, we will pass the null string to the enteredTitle and enteredContent variables in the following way:

2) We will create a new post by creating a new JavaScript object, i.e., constant object by using the title and content property. We will use this keyword for storing title and content data in the following way:

3) Now, we get this post into the other component. So, we will first go to our PostCreateComponent class and emit our own event. For this purpose, we need a feature provided by the angular/core, i.e., EventEmitter. After that, we will add a new property, i.e., postCreated and create a new EventEmitter by using the new We can give any name to this property.

After that, we will go to our onAddPost() function and call the postCreated by using this keyword. At last, we will use emit() function for emitting a new event. In this emit() function, we will pass our post object as an argument and the complete code is designed in the following way:

4) Now, for listening to it, we first have to make angular aware that the postCreated is an event to which we can listen from the outside. We will add the decorator to the postCreated property, and the name of this decorator is output. We import it and use it in the following way:

This @Output() turns the postCreated into an event to which we can listen to from the outside means in the parent component.

5) Now, we will go to the component.ts file, and in this file, we will override the title with the new posts property. Essentially, this property is an empty array. We will create onPostAdded() function that will get the post as an argument. In this function, we will push this post into the posts list in the following way:

6) Now, we will use this our component.html file. In this component, where we used the selector, we listen to postCreated by using event binding and call the onPostAdded() function in the following way:

In the above line of code, the $event is a variable that gives us access to the data we emitted. It is not only for the custom events but also for the click events or any built-in events. Here, we also get a default dom event object.

Whether we are passing or getting with an event, we can access it with the special $event variable.

7) Now, we need to pass it down to the <app-post-list>. We have to make the posts property of the PostListComponent class bindable from outside via property binding. By default, it is not bindable, and we will do this by simply adding the decorator, i.e., Input to it in the following way:

Now, we will pass our stored posts into the list by using the app.component.html file in the following way:

The angular change detection will automatically detect whatever a new post is created. Now, we save it, and we will have a complete chain like as: