In this section, we will look at what we will be building in this chapter. This is an overview of our project.

We will have a single page in this application. We will use Clarity's Datagrid to display the data in a table and also have the capability to Add, Edit, and Delete products, as shown in the following screenshot:

When we add or edit a product, a modal popup will open a multi-step form that we can use to create reactive forms in a step-by-step workflow using Clarity's wizard component. We will be using some built-in validations from Angular and creating a custom validator in this chapter:

Now that we have seen an overview of the project, let's get started.