In this session, let us learn about the building blocks of Angular. Let us also discuss about the project that we have created in the previous session. These are the building blocks of Angular modules, components, template decorators, data binding directive services and dependency injection. All these building blocks put together make your Angular project each and every building block has its war purpose. Let me first start with module you know what this module and clear applications are modular in nature. They provide logical boundary for the application.

And in case of any Angular application, you will be having a root module called as app module. And this app module will be having its own configuration details. Let me just show you an example. For the app module, this is basically a class which is written in TypeScript. You can see that class app module, because I want to export this class I'm just using export keyword and this module is having is annotated with at the rate mg module, what is this at the rate mg module, this is called a set decorator, it is used for providing configuration details about the class. So, what actually this class is about what this class needs, whether you have to import something for this module or for this particular class.

And what are the classes that that come under this module, all these informations are given using our direct energy module decorator and available here direct energy module decorator I am having to import statements. These are to import the modules to the current module. You can just have a look import mg module, browser module app company I'm trying to import other classes into this module. So this is about modules. If you want to create more more models for your Angular project that also is possible excess component components is a simple class. Basically, an Angular application is made up of multiple components.

Let me show you a pictorial representation. So this is a web page. This web page is made up of multiple components, a header component, a sidebar component in the main page and having multiple components. What this component is going to have, this component also will be decorated with a decorator called an advisor a component that gives the metadata details about the component. We will see that later I am just showing you a simple example. I have got app component.

This is the default component which will be created when you create an application It is annotated with a direct component. This is called as component decorator. This component decorator, tells about the HTML page that has to be opened for this component. And what the tags are, what is the name of this component. And also, it is talking about the styles used by this component. Just have a look.

My component name is app component. But when you I'm going to call it in an HTML page, I have to call it using App route. So this is the selector This is the tag name. Next template you weren't for this particular component, which HTML page I held to. So that is given over here next styling warrant for this component, what is the CSS? So a component is a simple class which is decorated with a direct component, which gives the detail support the task of this particular component, the HTML page that To be open for this component, the CSS that will be used by this component.

So, when they use angle angle bracket up route in my web page, automatically this corresponding HTML page will view but that is the meaning. So this is about the component. Next. template. template already I have told you it is nothing but a HTML page basically talks about the UI of your application. Each component will have its own template attached.

So when you call the component, the corresponding template or the html5 page will be open. Next decorators, what are decorators decorators are used for adding metadata details or configuration details for a particular class. In case of app modules a decorator was in the module. In case of component the decorator was at the red component. Next, data binding What is the meaning of data Finding whenever I want to take the data from a class from a component class to a view or if I want to take the data from a view that is from an HTML page to the component class, I need to go in for data binding. There are different ways of binding data, you can bind the properties, you can bind classes, you can bind styles and much more.

We will be talking about this in detail in the upcoming session. Next directors that is those are used for altering the structure of the DOM. When you want to add or remove a component in your DOM, then you have to go in for directives. We will be talking about structural and attribute directives in the upcoming session. So just understand this directives use for altering the structure of the DOM. Next services.

Now in your Angular application, you have created multiple components, all these component wants to share a particular code instead of writing it in each and every conference, you can write it in a service and you can inject that service into the component that injection is done with the help of dependency injection. So, these are the basic building blocks of Angular application. Now, what I will do is, I will go back to my project, I will show you the module that is the root module which is available ab.module.ts they extensions.ts ts TypeScript automatically it will be transpiled into JavaScript. JavaScript basically is understood by the browser and it will be open in your browser. So, let me go back to Visual Studio. Now I am in Visual Studio.

Let me open the folder where I have got my project. It is inside Angular demos. Let me select my project. Now, the front object to short. Let me open it here about SRC and open it our app folder. Let me open this app folder within whichever what app.module.ts This is the root module which is created by Angular CLA automatically.

Let me just open it ab.module.ts you can see the extension it is.ts TypeScript, automatically it will be transpile to JavaScript, because JavaScript only is understood by the browser. Now, see the class name it is app module, I have used export keywords, because this module is getting exported. And here you can see that it is annotated with at the rate mg module which is nothing but a decorator, within which I have got declarations. Whenever I'm creating more and more conference in my application, all those should be declared in this module. If they belong to this module, it has to be declared here. By default, accompany is created automatically which is nothing but our components.

So it is declared here. Next imports. If you want to import any other module to this application you to this particular module, you have to add it to this input module. Here you can see that we are importing browser module. So, that is added over here EMG module, you don't have to import it because it is the default one. Next providers, if you are adding services to your application that should be added to this providers.

Because services will be injected to the component, that injection will be happy will happen only if you're adding the services to this providers array. All these are basically arrays. The last one is bootstrap with a new child dot app component. app component is the root component, which will be bootstrap when you run this app module. Okay, next, let me show you the app conference before that began. also have a look on the input, we are importing two modules and one component.

Now here, I want this app folder in app folder what app.component.ts. In app component, you can see this. We are adding one import statement to import that particular component. And we are annotating this app component classes are the red component. See this. The file name is app.component.ts.

That class name is app component. And the tag name is app hyphen group. So whenever you want to call this particular component, you have to use App hyphen route, when you call this automatically to go to this particular HTML. See here the HTML is given inside this HTML, this is what you have seen in the previous output, right? See, Torah hero CLA documentation, angular blog, all those are shown here. Can you see this, so I'm just going to remove All the stuff from here, I don't want the logo and removing everything.

And just going to have Welcome to Cali race title, this is interpolation and trying to retrieve the data. That's it. Let me save this. I'll come back here I got AB dot component dot CSS also, which is being used by style you on this Can you see? Next, I have given title equal to app. So now I will just change it to title equal to Angular and saving it.

So this data is retrieved in app dot component dot html. So welcome to within double curly braces, I'm trying to retrieve the data this is called us interpolation. So we will discuss about that later. So this is that next let me go to this index dot HTML index dot HTML. So this is my main page. When you run any application, you know that this index dot HTML will be opened automatically, within the body tag cedar stat that I have used, it is apt hyphen root, which is nothing but the app component.

When you call app hyphen, root, whatever is there in app dot component dot html will be shown in the browser. So now here, let me just end this. I'm saving it. I hope it is clear. We have created already there is a default component called us app component. And the tag name is have a hyphen root, which has been called an index dot HTML.

So this is that now how to run the application, you know that if you are to go to the browser and you end so let me also show you a shortcut. I don't want to run it from the command prompt. I can run it from here, I can open a terminal in Visual Studio code itself. So for that, I have to select control tilde up. You can see that the terminal is open. Now from here I can use end space so space Wi Fi No, but enter The application started automatically in port number 4200.

You can see the output of Welcome to Angular. Earlier, we had few lines of code with the links, right? We removed everything. And we also change the value of title from app to Angular. So that is what is shown over here. Welcome to Angular.

So whatever output you're seeing here is the output of index dot HTML. But basically the tag is approved. You can just have a look over here in app dot component dot html, we are just printing Welcome to treated. So, this is about the project. Now, I hope you have understood what is the root module the root module is app.module.ts, which is bootstrapping the root component, which is nothing but app.component.ts. One more thing also, you must know there is main.ts, which will be bootstrapping your app module.

Is bootstrapping the app module. So main.ts will bootstrap app module app module will bootstrap the app component. This is about the building blocks of Angular. Thank you.