In this session, let us learn about the next structural directive in G fa, n g FA is used for isolating a collection in HTML template. Whenever there is a change in the collection, the template recreate an artist the structure of the DOM rather than seeing it over here, let us try this example directly from Visual Studio code. Now I'm working the trial component. Let me first create a string array. Let me do the name of the array is hobbies. Hobbies colon string array equal to within square brackets.

That means new values. array is ready. It is a string array having four values. Let me decrease the font size it is control minus that we go back to the file component dot html and use it First, so let me go in for you We'll start with new ones you can lay space as fixed end for equal to let some variable of the RNA. So, let me give it as hobby off, what is the array name it has hobbies. So here let hobby have hobbies.

Now within which let me just use interpolation to retrieve the hobby and this has to be within single quotes Okay, let me save this. Now let us check the output. Okay, this is the output it is the list of values from the string array. Whenever you are adding more elements to the string array, that template recreates itself and modifies the DOM. This is fine. This is an ad This is an array of things If I'm going to have an array of classes, for this, we need to create a class.

First let me explain it from the slides and then we'll come back to Visual Studio code. What we have done is this, we have used nd FOSS let any variable of the array name and I'm trying to retrieve one by one value, just like how you have worked in a traditional for loop in any other programming language, here also it is going to work in the same manner. Now, let me show you how to work with array of objects. For this we need to create a class the command to create a classes Yunji space generate space class space class name, instead of generate you can also use D. The moment you give this a class will be created. You can create the class in the project folder itself. Once the class is created, you are going to create a constructor with two instance variables.

Now, for this class I am going to create objects, the objects will be created in the component class and then we will be hydrating the that particular list of objects using mg first. Let us try this out. Let me go back to Visual Studio code. Let me open the terminal. Now here I need to create a class g space g space class space course. The Press Enter the course classes created Let me open it inside ap course.ts.

Inside the course, class, I need to create two instance variables. The two instance variables should be initialized within the constructor. In case of TypeScript. You can add the add the variable inside the constructor The moment you add the variables inside the constructor automatically they will be created as instance variables. Let me show you how. So now I'm going to go in for a constructor, which takes two parameters.

So, it has to be public public title, colon string comma public course ID, colon space number curly braces. So, what actually I have done is I have created a constructor which is taking two variables, one is title and course ID, because it is public. Automatically the constructor will make these two variables as instance variables. So what are the two instance variables in this course class title and course ID, when they will be initially whenever you are creating an instance for this particular class, automatically They've been initialized. So, this is about the constructor. Now all set, let me go to the I mean the component class.

So, I need to go into trial component.ts here I need to create a course list course this is the fast pace. So, it is of course Arecibo You are a CRA within which I need to create objects of courses. So, it is new courses I need to specify the values Java comma course ideas one Okay. Now, I have added Course List courses to subtype course it is an array it is having five course objects you can see here it is giving me an error, what is the error cannot find name course it is not because of formatting, it is just because it is a class That you have created but you have not imported it. So we need to import it. Let me import it here import within curly brace code from you need to view the path.

So why in which place we are in we are in trial. So it is dot dot slash app slash course. Let me check in for the path, it has to be dot dot slash course, that's it. I hope it is clear. I am in trial component.ts when I give.id, it will go to that root folder trial.rb to go to the app folder from within the app folder only got course.ts So, that's what I have given. Okay, now the error is gone.

You can see and I need to end it with a semicolon. Now, let me save it and let me go into this trial conference. dot html here again we are going to retrieve the values. So I'm just going to copy paste this URL pack. Now inside our hobby it is going to be course you will you are a C course of course and this has to be course dot title and course dot course ID Okay, let me save this, let me add this within h3 tag. So, our set now, let us run the application again let me open the terminal empty space, space Ws and open the application is getting started.

Now I have got the output there is space between the lines because I have used h2 tag. So this is how you use PNG for directive. I have shown how to use PNG files directly If your collection is going to be a simple array, that's what we have used over here, we are trying to print the variable directly. If your collection is going to be an array of objects in that scenario, you have to retrieve the individual properties by using dot operator in our case course was a class we created our array of objects, where in the CS class, we created an array of objects costless, I hope this part is clear, we are creating an array of objects and then we are trying to iterate it by retrieving one by one object, if you are trying to print the object directly, you will get the output that object object only.

So, we are trying to retrieve the properties separately. So I am retrieving the instance variables of course class, which is nothing but title and course ID. This is all about energy for direct to what we have seen in structural directives mg u and v first. In case of mgu, it checks in for a condition based on the condition, it will add a piece of code into the HTML face or remove the piece of code from the HTML page. This is how it does start changing the structure of the HTML page. In case of MG four, it is going to iterate through the connection.

Whenever you are adding or removing elements from the connection. That template is getting recreated and then added to the DOM. This is about structural directive. In the next session, let us move on to attribute directives. Thank you