In this session, let us learn about inline templating and inline style templating to find the UI of your application for the component that we have created, our template was home dot component dot html, which was defined in the decorator at the rate component decorator. We gave template URL within which we gave the name of the HTML file. What is the content that I have got for this particular component is limited. Say for example, I'm having only one h1 tag, instead of creating a separate HTML file for that particular component, you can go in for inline templating. In start using template URLs, you can go in for template. Within the template, you got got actual HTML code, that's what I have done over here.

In case of CSS styling, again, when you want to add multiple styles for your code, you create a separate CSS file, home dot component dot CSS. What is the styling that you're going to apply is very limited. Instead of writing it in a separate file, you can write it in a style property. You earlier it was like style, you signed URLs, but now it just stays within the styles, you can add the CSS style property. So this is inline CSS styling, an inline template. Now we will try this out.

For this I am going to work on a new component. I'm not going to work with existing home components. Let me create a new component. I'm now indeterminant. Let me create a new component empty space. g space component space grid saw the company Name is greed component.

Let me press enter the component is created successfully you can see it over here. Let me open greed have got greed component dot CSS dot html dot spec. And finally greed component.ts. Now what we need a satisfied only so yes. Now let me go in for the template part. I don't want template URL.

Instead I'm going to work with template property. So let me just remove this URL and I will remove this code. Now insert I am going to use backtick Okay, you must not use single quotes but it has to be backtick within which I can have a h1 tag. This is great component. Okay, I have added just two lines. Okay, next what we have to do We have to go and add this component to the route component.

So let me open it. So I have to go into app component dot html. Here I have got app for now I will just comment this app for instead we will use App hyphen greed. Okay. Now let me save it I will go to app.module.ts. This is just to show you that the moment the component is created, it is getting imported and also added to the declarations part.

Okay, all set. Let me save this. That is one comma missing. I need to add a comma also. Now the formatting is done because the formatting was not there. It was giving me here.

Yes. Can you see the red color one now? The back ticket is saying that it has to come in the next plan. Of course, it will work even if you are keeping it here. But because we are working in Visual Studio code, I need to say expecting formatting. I'm just pushing it to the next slide.

Let me save this. Now we'll see the output over here. Okay, I need to run it right. So here, again, I will open my terminal end space, space Wi Fi and open. The application has started successfully. Now you can see the output here.

Welcome Pamela is from app conference. This is great component and using backtick is some other grid component. Now I'll go back to Visual Studio code here. Let me add an instance variable message equal to this is templating. And let me repeat it here using double curly braces. Message save it and we will check it out this is templating so got that also.

Now let us try applying styles. So here I guess I need to go in for styles and I will remove this brackets only you need to apply the backtick Now I will enter it backtick within the backtick Let me add the CSS styling. So, to start with for h1 I will add color color colon red and h2 background hyphen color colon blue okay. So whatever you have learned in CSS style binding all those I mean style binding class binding all those you can apply it here also it will work perfectly fine. Okay, now I have saved it. Let us check this out.

You can see those So, styling is also applied to the corresponding components. And what if you want to apply say, for h2, I want to add one, I have given it as one. So what I can do space class equal to and here's a play class equal to two and I will add this here Ctrl V, it may say this so the value is true. So, the same output I will be getting. So, you add inline templating and inline CSS for your component. Thank you.