Angular | Understanding the Angular Component


English (Auto-generated)

we actually got our angular application up and you can see that this is a screen. We've got after, you know after creating the angular application and we got this folder and in this folder we can do whatever we want. This is this is the folder, the angular app. So in this folder um we we we need to go to the SRC, we have a discussion about it in the previous cast. So when we go to the SRC there are certain things for example the the app, the app folder and inside the app folder you got a component. So you need to edit the component or do things in the component to get your main component which is the app component, you know, updated. So when we are in the app, the app folder which is the main component of the application. So you've got a thing like you know, absolute component or t s you got this was angular rap. Anyway. Anyway I'm gonna change it. Okay. The app dot spec dot es. This isn't really not necessary. The app dot component dot spec dot es is actually not important. You can simply delete that. It is, it is important when you or doing some testing job but we do not want any testing job for now so we can simply delete that. Okay, and this is the app dot component dot html. This is uh you know the view of the component. This is the main component after all. This is a GTs file, whatever we're gonna do this, this this is gonna be the mind or the brain of the application of the component actually. And then this is the reflection of the brain, the view and this is his styling file and this is just a routing. This is a separate thing. Anyway, so first of all I'm gonna delete everything this final has, I'm simply going to select all even they wrote it, delete the tamp. It blow to get started with your project. So I'm gonna delete everything and I deleted that. And now if I go to the browser back you're gonna see there is nothing. It's empty now. So whatever you write here for example, I'm writing Hello world, its angular, sorry angular, save it, go to the browser, we got it. Hello world, it's angular. So that's working fine now the next thing, you know this is the main component. So all you need to double check it what is happening here. This is the, you know, we are importing, we are actually, you know, we can create any T. S. File but not every T. S. File is the component file. How this file is a component file because this file has imported the component module from the angular core. This is the library we've installed anyway. So after that uh this is the, you know the component, we're we're actually putting the important things of the component here. This is an object. Absolutely. You can see that if you are talking in terms of general vanilla javascript or typescript, the first property is a selector which is the approved for now. So wherever we're gonna call this component in the html files, we're going to call it as uproot this file is itself it's uh it's a reflection or the view. So we do not need to call this component inside this file instead we've called this file inside this component here. You can see that the template your in app dot component dot html and then the styles your in app dot component dot CSS So whatever you do here in the html is, you know, is connected with the DTs file. So you can send data from the component dot t s file to the app dot component dot html file. I'm going to tell you how So let's say you have a title fight title variable. I'm gonna delete that. I'm gonna write something something different for example, shedding Okay. And the heading should be the heading. Okay. Now because it's typescript you can make it a string or you can make it number but we just cannot make this one a number because you know, this is extreme. You can see that Okay. It's typescript, you can use the benefits of it now, you just go there and to call the data we just declared in the in the app dot component dot t s actually you can simply call it by, you know using the double collaborations and inside that you just need to write the name of the variable. Nothing more. The name of the variable is heading so just right heading. Sorry not header but hitting and now you're going to get that in the browser. Let's go there. You can see that the heading if I updated, for example the heading or let's call it introduction. Save it, go there. You're gonna have the introduction that means it's working now. Just simply make the edge tag, H one tag around beheading, save it again, go to the browser back and you can see that the introduction, it is working fine. So this is how you can just get the data, this is the, you know um the component that CSS file is the brain of the component and the the the class, you can see that visually which is actually getting exported is the brain of the the the component dot t s file. So whatever you write here, you can declare the properties, you can do, you can do the mathematics here, you can do the, you know programming here and then you can simply reflect the data anywhere like you know, We can declare some number one. Number 12. Now you need to call the number one. Number one, save it go to the browser, you got it, I have to confirm your eye right to it, you can see that. So this is the basic component and I think it's very much understandable. We're gonna talk about the let's let's talk about the app dot component or I think, yeah, in the next, in the next guest for sure. First we'll cover the, you know, the globalist tiles, this is styles dot CSS and then we'll talk about the the component of CSS file. Children stay tuned.
155 Views 0 Likes 0 Comments

Understanding the Angular Component.

Leave a comment (supports markdown format)