While developing our project, sometimes our components may become large and hard to read. So, it is always a good choice to split that big component into a few smaller ones. Furthermore, smaller components can be reused into other components, therefore creating the parent-child relationship is a very good idea. Child component depends on the parent component, and because of that, they make one coherent part.

Creating child components by using @Input and @Output decorators is going to be our goal in this post.

If you want to see all the basic instructions and complete navigation for the .NET Core series, check out the following link: Introduction of the .NET Core series.

For the complete navigation and all the basic instructions of the Angular series, check out: Introduction of the Angular series.

For the previous part check outCreating Angular client side – Error handling

The source code is available at GitHub .NET Core, Angular and MySQL. Part 12 – Source Code

This post is divided into several sections:

Overview

In the situations where we want to send some content from a parent to a child component, we need to use the @Input decorator in a child component to provide a property binding between those components. Moreover, we could have some events in a child component which reflect its behavior back to a parent component. For that purpose, we are going to use @Output decorator with the EventEmitter.

To handle success messages and error messages (which are not 500 or 404 messages), we are going to create a modal window child components. We are going to reuse them in every component that requires displaying these types of messages. When you want to register your reusable component it is a good practice to create a shared-module and to register and export your components inside that module. Then, you can use those reusable components in any higher level component you want by registering the shared module inside a module responsible for that higher order component.

Creating the Shared Module

Let’s start by creating the shared module in the shared folder.

Then modify the shared.module.ts file:

Finally, include the SharedModule inside our owner.module.ts file:

Error Modal Component

Let’s execute AngularCLI command to create error modal component:

Besides creating component files, this command is going to import a new component into the shared-module. But you need to export it manually:

error modal @Input, @Output

In the modals folder, create one more CSS file with a name modal-shared.component.css. We are creating this file because we are going to have the same CSS for error and success modal windows without repeating the same code in two different CSS files.

Now modify the error-modal.component.ts file:

We are decorating our properties with the @Input decorator and by doing so our parent component can set values to these properties by using property binding.

Let’s continue by modifying the error.modal.component.html file:

Then modify shared modal.css file like this:

Creating Success Modal Component

Excellent.

Now we have the error modal created and let’s continue by creating success modal in the same way as we did with the error modal:

success modal @Input, @Output

Import success-modal component into the shared.module.ts file and export it as well. Then modify your success-modal.component.ts file:

The @Ouput decorator with the EventEmitter is used to emit an event from a child to a parent component, and that is exactly what we want to do. We are going to use success component when create, update or delete action is completed successfully and by pressing the OK button we are going to redirect a user to the owner-list component. For this emitter to work, we need to make the subscription in the parent component to this emmitEvent function. This is going to be handled in the next lecture.

Finally, modify the success-modal.component.html file:

Invoking Child Component

Great.

Now we have both of our child reusable components. For now, we still don’t have a place to invoke our child components, but for example, if you want to invoke your error-modal component into some parent component all you have to do is to add its selector into the parent component:

We are including selector <app-error-modal> from our child component, and setting up the @Input properties within the square brackets (Property binding). To set up a value for the property binding, always use double quotes and then specify the value between them. If we want to pass a string, then that string must be wrapped inside single quotes first.

Now that you know how to use child components, you can split the owner-details component into the parent-child relationship. Try to do that on your own, because the practice is the best way of learning things. Of course, you can find this implementation inside the source code for this blog post.

Directives

As you might have noticed, our owner has a dateOfBirth property which we need to work with, in our Create and Update forms. It is going to be just an input text element on the form, but it is going to have a different behavior. We are going to use it as a date-picker. We could change its behavior in both components (Create and Update) separately but we won’t do that. For that purpose, we are going to create an Angular directive so we could change the behavior of that input field.

In the shared folder, create new folder directives and inside create a new file datepicker.directive.ts.

Modify that file:

In the styles.cssfile (global file for styles) just add this styling:

Don’t forget to import this directive inside the shared module in the declarations and exports array.

Now our directive is ready to be injected in any HTML element. We are going to use it later but for example, you can use it like this:

Conclusion

By reading this post you have learned:

  • What is the purpose of @Input and @Output decorators
  • How to share components through the project
  • The way of creating child components
  • How to invoke child component into a parent component
  • How to create directives

Thank you for reading the post, hopefully, it was helpful to you.

In the next part of the series, we are going to start with the creation of the owner and form validation.

If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published Angular content we encourage you to subscribe to our blog.