The first part of the Questions Management application that we need to implement is the section that governs which categories the questions belong to. So, in this tutorial, I will start by adding an interface for the management of these Categories. This interface will allow us to add, edit, delete, update Categories easily. OK, let’s get started!

For ease of management, all things related to the question, I will group them in the menu item Questions in the left sidebar.

To do this, I will edit the sidebar.component.html file to add to the following code:

an HTML code is as follows:

In the code above, I added a menu item called Questions that acts as the root of another menu item named Categories. In the future, I will add some other menu items within this Question menu.

At this point, if you run the application, you will see the results of the left menu as follows:

Next, I will add a module named QuestionsModule located in the src/app/questions directory:

This QuestionsModule module will manage all the questions related to the question, and the first thing it will manage is the Categories. To use this module, we need to import it into the AppModule as follows:

To build the interface for Categories, you will first add some libraries that you will use to build this interface first.

These are the libraries:

• Datatables.net: 1.10.12
• Datatables.net Bootstrap: 1.10.12
• Datatables.net Responsive: 2.1.0

Although these libraries have newer versions, I only use older versions that are compatible with the template we are using, SB Admin 2.

To add these libraries to our Questions Management application, we will run the following commands:

then, it will be declared in the scripts section of the angular.json file in the root directory of the Angular project of these libraries:

In the style.css file in the src directory, I also declare the CSS file of the Datatables.net Bootstrap library as follows:

Next, I will create a new component named CategoriesComponent located in the src/ app/questions/categories directory:

The content of the CategoriesComponent will look like this:

with the categories.component.html file built using the Datatables.net libraries, Bootstrap as I said above as follows:

Now we will declare the CategoriesComponent into the QuestionsModule:

with the Routing declaration for it:

The last step we need to do is to edit the left menu for the item menu using the Angular routerLink directive so that we can navigate to the Categories page.

We will fix this as follows:

Now, if you run the application again and go to the Categories page, you will see the following results: