Angular Components : Part 1 Basics

In my previous blogs we have installed Node js (NPM) & visual studio code, Angular CLI and we have created angular project with CLI and more.

Now we are going to look into Angular Components:

If we seeing any angular page it consist of multiple components like menu component, footer component component for showing any data like list and other.

so component is something which is associated with 3 things
            i. Template - HTML component.html
            ii. Style - CSS component.css
            iii. Code - Typescript  component.ts

If you go and check the "todoList" Project that we have created in previous sections you can see there we have already one component "app.component.ts", "app.component.html" and "app.component.css"

In Angular you can indicate something called as decorator (this is similar to annotations in JAVA)  we use @Component to indicate that AppComponent is a component and we have some attribute inside @Component.

selector: selector is basically the tag name for this component, so if we want to use this component we can use this tag name, for example if you see the index.html you can find <app-root></app-root> inside body.

templateurl : This gives the location of HTML Template of this particular component i.e. app.component.html in our case. styleurls: it is the styling for the specific component component.

In above screenshot we can see there are member variables present i.e. "title = todoList".
This member variable is actually mapped to .component.html file.

<span>{{ title }} app is running!</span> What we are using here is called interpolation what it does it takes the value from app.component.ts and

put it in app.component.html. or in simple word it is taking the value from component and putting it in the view also called Data Binding. Refer below images.

In Next topic we will create our own component i.e. Login and do the code for login and all. Before that we will remove every thing from app.component.html.

app.component.html is basically the root component from where we refer all other component.
After removing every thing localhost:4200 will be blank page as shown below.

Previous Topic(Angular Project Structure)                                            Next Topic (Login Component)