Angular Component : Login Component

Before Starting on Login Component you can start your application (we already created one i.e. todoList) using "ng serve" command in command prompt or terminal at your project location.

As we know there are 4 files for a component i.e. component.html, component.css, component.ts and component.spec.ts so creating all these files in visual studio IDE is quite overburden.

For that reason we can use command for creating any component and the syntax is :
"ng generate component <component Name which we are going to create>"
In our case we are creating login component so the syntax will be "ng generate component login", once we run this command we can see the files will create in our project.

Open another command prompt at your project location and we will create our first component as shown below

Here you can see 4 files got create and there is one update is happening in app.module.ts which means login component is created and it is added to app module. you can check the folder structure there is one folder created under src/app named as login and also see the app.module.ts for the updating.

Now open the login.coponent.html file, for opening any file you can use ctrl+P shortcut you can see by default there is <p>login works!</p>, now got to you localhost:4200 in web browser it should be visible but you cannot see login works ! in UI. so the reason is we have created our component but we didn't specify the tag name in app.component.html.

Where we can find the tag name for any component ? As I already mentioned in previous blog that it is present in .component.ts file. For our login component tag name is app-login we need to specify it in app.component.html like <app-login></app-login>

Now We will create simple login page put below code in login.component.html and remove others

UserName : <input type="text" name="username"/>

Password : <input type="password" name="password"/>

<button>Login</button>

Till Now we have created simple login page when we click on login button nothing will happen Now Add some default value for username and password, where do we need to add the details? it will be login.component.ts as shown below

Now we have added default values but we have to use it in .component.html file, how can we use it in html file ? by using interpolation.

UserName : <input type="text" name="username" value="{{username}}"/>

Password : <input type="password" name="password" value="{{password}}"/>

<button>Login</button>

Refresh your page you will see username and password is there by Default.

Now say when you click on Login button, show username in the console for that the code is below

which we can achieve by Event Binding  and syntax of Event Binding is
event = whatmethodwewanttocall(), so in our case event will be click and method will be handle login.

Here we can see we are getting compilation error because this method is not defined anywhere, so all

the method that we define in .component.html file it logic will go to .component.ts file. we will add
logic as below

Now Refresh the page and click on login and check in console tab after opening inspect element by right clicking on the page

Now we try with different user name and see what happen, it will again print "dummy" because we have used interpolation for databinding. as shown below.

Now we will try to get the username from UI what ever username we pass from UI it will print in console. Till now we have seen 2 types of data binding Interpolation and Event Binding.

Now we will see ngModel and the syntax is [(ngModel)] what we are doing is we are trying to bind this value to a model element.

It would take data from the login component, and tied down to the template and when data is changing on the template, it would automatically update the value inside the component.

There is a compilation error. It says cannot bind in the model, because it's not really a known property of input.
we have to add the dependency for ngModel, login component belong to app module. loginComponent is declared in app.module.ts.

we have to import ngModel in app module and ngModel is present in FormsModule so we need to import FormsModule in app module. Refer below screenshots and update your code.

Now refresh Your page and pass different username and check the console. 

This is also called 2 way data binding.

Lets add some hardcoded validation in our application when user clicked on login, so we are calling handleLogin() method on click event we need to update our handleLogin() method, code snippet below

and we need to show this error when user and password is different from "dummy" and "1234". To achieve this we can use ng attribute "*ngIf" 

Now Refresh your page and try with some other username you will get the validation message.

Previous Topic(Angular Components)                                                                    Next Topic (Routing)