Using Structural Directives in MEAN Stack

In our previous section, we learned how we could create an expansion panel in our application. Previously, we have created only a single expansion panel. If we need to output the data from backend, server, a list of users or a list of posts in our template is not so easy because we don't how many elements are there. So in this section, we will learn how we can create multiple expansion panels using the loop.

These are the following steps used to create multiple expansion panel in our application:

1) Now, we will go to our application, where we have created only one expansion panel, and from there, we will go to our post-list.component.ts In this file, we will create a list of posts by simply creating an array. In this array, we have some JavaScript object where every post has the title, content like as:

We will dynamically loop through all these posts and output that data in our template.

2) Now, we will use a special directive, i.e., *ngFor, and it is essentially a helper tool that allows us to repeat that element as often as required. The "as often as required part" is defined in <mat-expansion-panel> in between the quotation marks after an equal sign. In this quotation marks, we will use let to create a variable and give a name to the variable. This name is up to you. You can give any name to that variable. At last, we will add the data we want to loop through in the following way:

3) Now, we will use the post variable in our template. We will set the post title in the header section and the post content in the expansion-pane as given below:

Now, we save it, and we will see multiple expansion-panel on the screen like as:

4) By default, only one expansion-panel can be opened at a time. If we want to open multiple expansion panel, we have to set the multi-property of the mat accordion to true in the following way:

5) If we want to use the data which we receive from the post-create component, we have to get rid of the dummy data and create an empty array.

6) In the <mat-accordion>, we will use another structural directive, i.e., *ngIf. We will use this structural directive to check the condition. If the condition is true, only then the rest of the part will be rendered. We will set the condition in the following way:

This condition says, if the length of the posts array is greater than 0, only than the rest of the part will be rendered.

7) At last, we will create a paragraph that will be rendered when the length of the posts will be less or equal to the 0. The *ngIf structural directive is also used for this paragraph in the following way:

8) Our structural directive is working properly, but it looks ugly. We will change it by using some built-in CSS classes. We will add body-1 as a class, and we use our post-list.component.css file to center it in the following way:

We also add the following code in the CSS file:

Now, we save it, and we will see the paragraph text on the browser as:

In the next section, we will learn how we can create a post with property and event binding.