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)

Comments

Post a Comment

Popular posts from this blog

Installing Node Js (NPM) & Visual Studio Code

-
Image
1. For Installing Node Js, Search Download Node Js or go to  Download Node Js  , Based on your operating System Download the respective files. Once You download and install it you can verify it by opening Terminal or Command Prompt and typing "npm -v" for npm version and "node -v" node version as shown below: 2. For Installing Visual Studio Code Search Download Visual Studio Code in Google or go to  Download Visual Studio Code Based on your Operating System download Respective files and install it, it will take few minutes to install. After installation open visual Studio Code it will look like below                                                                                                                                             Next Topic (Install Angular CLI)
Read more

Logout Component and Angular Router (CanActivate)

-
Image
  In this topic we will create our logout component for our application and also remove session object if user is logged out as well we will see the use of Angular Router method CanActivate. Now Let's create logout component using command "ng generate component logout"  once you create the logout component you have to add it in routing file i.e. app-routing.module.ts and add it before ** as ** will be the last thing in routing. After adding it here you can check it by clicking on logout button in your localhost URL. Now we will remove user from session storage for that we need to add one method in authentication service and use that method in logout component by dependency Injection. Till Now we have done the login, menu, error, logout so you can check it by going through localhost. but still we have one problem i.e. if we go to http://localhost:4200/welcome/dummy or todo or any menu item without logged in it is working so what do we need to do here? we need something whi
Read more

Authentication and Session Storage

-
Image
In this topic we will create our authentication service, use session storage and we will enable menu links based on user authentication. Let's create a service by using command "ng generate service foldername/servicefilename", always create services in a folder otherwise it will create everything in src folder and it is very difficult to track it. Now create our authentication service so the command will be "ng generate service service/hardcodedAuthentication", make sure you are in the project folder when you use the command. as shown below When you open this service file you can see it is a simple class except @Injectable,  it make this class as service and we can use this at any place of or project by importing it. Injectable make a class available for dependency injection Now add some method in this class. Now we use this Authentication service in our login component, for using this we have to add this in constructor  and now as we move the authentication par
Read more