Angular 5 – Sibeesh Passion

Validation Using Template Driven Forms in Angular 5

SibeeshVenu — Sun, 22 Apr 2018 15:58:46 +0000

[toc]

Introduction

In this post, we are going to see how to do validation using template driven forms in Angular 5, this is just a different approach that you can follow, as we have discussed another way in our previous post. At the end of this article, you will get to know how you can implement validations in Angular 5 application using Template Driven Forms. This post is a continuation of the course Developing an Angular 5 App series if you haven’t gone through the previous posts yet, I strongly recommend you to do that. You can find the links to the previous posts below. I hope you will like this article.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

Source Code

You can always clone or download the source code here

Background

Validations have a vital role in all application no matter in what language it is been developed. And since it is an essential part, there are many ways to achieve it. We are going to see Template Driven Forms approach here.

Using the code

It is recommended to clone the project from GitHub, so that you can try everything your own. Let’s go ahead and write some codes now.

Install Bootstrap

Before we begin, let’s install bootstrap in our application.

PS F:\My Projects\ng5> npm install bootstrap --save

As we are developing this application using Angular CLI, we can add the reference of Bootstrap in our Angular-CLI.json file. The styles section of that file will look like below after you add the reference.

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ]

Please be noted that there are many other ways to configure Bootstrap in our application, here we are not going to explain that.

Importing ngForm to a variable

Let’s clean codes in our Registration component and add a new form which has a form variable, and this form variable can hold the values of our form. There are many things you can do with this variable, for now, let’s say it is our model values container.


  
    
      
        
          
          Sign up
          Trust us for your data, and sign up

import { OnInit, Component } from "@angular/core";

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
  constructor() {
  }

  ngOnInit() {
  }
}

Implement Validation for User Name field using Template Driven Forms

As we have created our form, now it is time to generate out input controls into it.

What we have above is a simple HTML with template driven form, where we are going to introduce the validation. Let’s modify the userName field now.

What we are trying to achieve by the above code is, creating a reference variable userName and assign the input value to it. Basically, this is a two-way binding, where we can set the data from our component and update it in the form, and vice versa. Now if you run your application, you should see an error as below.

Uncaught Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.visitPropertyWrite (compiler.js:26025)
    at PropertyWrite.visit (compiler.js:4585)
    at convertActionBinding (compiler.js:25475)
    at eval (compiler.js:27987)
    at Array.forEach ()
    at ViewBuilder._createElementHandleEventFn (compiler.js:27983)
    at nodes.(anonymous function) (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:27620:27)
    at eval (compiler.js:27928)
    at Array.map ()
    at ViewBuilder._createNodeExpressions (compiler.js:27927)

This is because we are using the same name for both model and reference variable. So we should change it. To do so, let’s create a User Model (user.model.ts) and reference it to our Register component.

export class User {
    id: any;
    userName: string;
    email: string;
    userRole: string;
    profileImage: string;
    phoneNumber: string;
    firstName: string;
    lastName: string;
}

import { User } from '../models/user.model'

Now we can change our input as below.

Please make sure that to declare a user in registration component.

export class RegistrationComponent implements OnInit {
  user = new User();
  constructor() {
  }

  ngOnInit() {
  }
}

Now if you run your application, you can see that the Submit button will be enabled only if the form is valid, that is, only if you enter any values in the username field.

Decorate the validation message

Now we know that our form is working fine, but don’t we need to give a message to the users if they haven’t given any values in the fields? Let’s add few more markups in our HTML.


    
    
                  User Name is required

We are enabling the class “has-error” and “has-success” dynamically by checking the valid and invalid property of userName field. We are also showing our required field message in a new span if there are any required errors in our userName model. Now if you run your app, you can see that the validation is working fine.

But isn’t that validation showing by default, we should show the message only if the user touched our field, and refused to type anything right? Let’s add “userName.touched” in our markup.


    
    
                  User Name is required

Implement the validation for other fields as well

Now it is time to implement the same in other fields.


  
    
      
        
          
          Sign up
          Trust us for your data, and sign up
        
        
          
            
              
                
                
                  User Name is required
                
              
              
                
                
                  Email is required
                
                
                  Email is invalid
                
              
              
                
                
                  Password is required
                
              
              
                
                
                  Confirm password is required

For email validation, we have given an additional attribute and set the condition as [email]=”user.email !== ””, this is for not showing both the required validation and email validation together. This will show the required message if the user touched the field and not giving any values, and the email validation will get fired only if the entered value is not a valid email. Sounds good?

Add register function

Finally, let’s add our function register.

import { OnInit, Component } from "@angular/core";
import { User } from '../models/user.model';
@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
  user = new User();
  constructor() {
  }

  ngOnInit() {
  }

  register(user: User): void{
    console.log(user);
  }
}

Once it is done, let’s open our browser console and see the data.

Here we have seen how we can implement validation using template driven form. I will write my next article about implementing custom validators using directives in Angular, for comparing our password and confirm password field. Till then, bye.

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Implement Shared Custom Validator Directive in Angular

SibeeshVenu — Sun, 22 Apr 2018 15:21:33 +0000

[toc]

Introduction

In this post, we are going to see how to create a custom validator directive in Angular 5. We have already seen how to do validation in our previous posts, and we have not done any validations for comparing the password and confirm the password, remember? Here we are going to see that. At the end of this article, you will get to know how to create a new shared directive according to our requirements. This post is a continuation of the course Developing an Angular 5 App series if you haven’t gone through the previous posts yet, I strongly recommend you to do that. You can find the links to the previous posts below. I hope you will like this article.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

What Is New and How to Set Up our First Angular 5 Application
Angular 5 Basic Demo Project Overview
Generating Your First Components And Modules in Angular 5 App
Implement Validations in Angular 5 App
Validation Using Template Driven Forms in Angular 5

Source Code

You can always clone or download the source code here

Background

Validations have a vital role in all application no matter in what language it is been developed. And since it is an essential part, there are many ways to achieve it. If we create a custom shared directive for creating a compare validator, it would be a great piece of code right, which can be reused.

Using the code

It is recommended to clone the project from GitHub, so that you can try everything your own. Let’s go ahead and write some codes now.

Creating a custom directive

Let’s just create a new directive in a shared folder and name it equal.validator.directive.ts. Now open that file and start writing the code. Let’s import some of the core components first.

import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms";
import { Directive, Input } from "@angular/core";

Now Let’s define our class and @Directive.

import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms";
import { Directive, Input } from "@angular/core";

@Directive({
    selector: "[appEqualValidator]",
    providers: [{
        provide: NG_VALIDATORS,
        useExisting: EqualValidatorDirective,
        multi: true
    }]
})
export class EqualValidatorDirective implements Validator {
    validate(c: AbstractControl): { [key: string]: any; } {
        throw new Error("Method not implemented.");
    }
    registerOnValidatorChange?(fn: () => void): void {
        throw new Error("Method not implemented.");
    }
}

As you can see that, we are actually inheriting our new class EqualValidatorDirective from Validator. Now we need to change the implementations of the method inside it. We should also add our new directive in app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { EqualValidatorDirective } from './shared/equal.validator.directive';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NavComponent } from './nav/nav.component';
import { RegistrationComponent } from './registration/registration.component';
import { LoginComponent } from './login/login.component';

import { AuthService } from './auth.service';
import { AuthGuard } from './auth.guard';

const myRoots: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' , canActivate: [AuthGuard]},
  { path: 'register', component: RegistrationComponent },
  { path: 'login', component: LoginComponent},
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard]}
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NavComponent,
    RegistrationComponent,
    LoginComponent,
    EqualValidatorDirective
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule,
    MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule,
    RouterModule.forRoot(myRoots)
  ],
  providers: [AuthService, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Implement validate

Before we do that, we should add our new cutom directive selector in our confirm password field, because that’s where we are going to use our validator. So we are going to change our markup for confirm password field as below.


    
    
                  Confirm password is required

As you can see, we are using the selector appEqualValidator=”password” in our confirm password field. Please do check my previous posts if you are not sure how to implement other validations like email and required.

Now let’s go back to our custom directive and make some changes.

export class EqualValidatorDirective implements Validator {
    @Input() appEqualValidator: string;
    validate(c: AbstractControl): { [key: string]: any; } {
        const controlToCompare = c.parent.get(this.appEqualValidator)
        if (controlToCompare && controlToCompare.value == c.value)return { "equal": true };
        return { "notEqual": true }
    }
    registerOnValidatorChange?(fn: () => void): void {
        throw new Error("Method not implemented.");
    }
}

Here, we get our confirmPassword control in the absolute control “c”, and in the next line, we are just finding our password control by getting the parent element of confirmPassword. Once we get that, we can easily perform the comparison easily right? So, if it matches we return { “equal”: true }; or else { “notEqual”: true }. Sounds good?

Introduce new span for custom message

Now we have a custom validator which compares two values, and the only thing which pending is, that to create a span for showing our new message in UI. Let’s change our markup now.


    
    
                  Confirm password is required
                
    
                  Password doesn't match

As you can see, we are showing the custom message only if the directive returns notEqual property and there are no required errors. Let’s run our application and see it in action.

Here we have seen how we can implement shared custom validator directive. Let’s connect to a database and save these values in next article. Till then, bye.

Conclusion

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Implementing Guard in Angular 5 App

SibeeshVenu — Mon, 26 Mar 2018 09:43:05 +0000

[toc]

Introduction

This post is a continuation of the course Developing an Angular 5 App series if you haven’t gone through the previous posts yet, I strongly recommend you to do that. You can find the links to the previous posts below. In this post, we are going to implement Guard, which help us to restrict users to access some pages if they haven’t logged in to our application, in Angular 5. So at the end of this article, you will get to know how you can handle unauthorized route accesses. I hope you will like this article.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

Source Code

You can always clone or download the source code here

Background

We may be having many numbers of pages on our app, some may be used by logged in users, and some can be used by unauthorized users. But if you are letting all the users use all the pages, no matter whether they have logged in or not? Yeah, obviously that’s not a perfect application. In our application, we are going to make our homepage available only for a logged in user. To do this, we can use Guard.

Using the code

Let’s go ahead and write some codes now.

Generate Guard

As we are using Angular CLI, we can easily generate Auth Guard on our application. Do you remember that we have created some components in our previous article? We can always create a Guard in the same way.

PS F:\Visual Studio\ng5> ng generate guard auth

In the above step, we are generating guard on our root level. Once you run the above command, this will generate two new Typescript files as follows.

Let’s go to those two files now.

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable | Promise | boolean {
    return true;
  }
}

auth.guard.spec.ts

import { TestBed, async, inject } from '@angular/core/testing';

import { AuthGuard } from './auth.guard';

describe('AuthGuard', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [AuthGuard]
    });
  });

  it('should ...', inject([AuthGuard], (guard: AuthGuard) => {
    expect(guard).toBeTruthy();
  }));
});

This is just a test file, we can see how to perform tests on the Angular app in another article. Let’s concentrate on the implementation for now.

Generate login component and set up

Now that we have Guard ready for modification before we do that, let’s create a component for login.

PS F:\Visual Studio\ng5> ng g c login
  create src/app/login/login.component.html (24 bytes)
  create src/app/login/login.component.spec.ts (621 bytes)
  create src/app/login/login.component.ts (265 bytes)
  create src/app/login/login.component.css (0 bytes)
  update src/app/app.module.ts (1331 bytes)
PS F:\Visual Studio\ng5>

Now it is time to edit our routes in app.module.ts with the new route for login. Please be noted that it is not a recommended way to create routes in app.module.ts file. We should create a separate routing module for the same and use it in app.module.ts. I will be sharing how to do that in another article.

import { LoginComponent } from './login/login.component';

const myRoots: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'register', component: RegistrationComponent },
  { path: 'login', component: LoginComponent},
  { path: 'home', component: HomeComponent}]

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NavComponent,
    RegistrationComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule,
    MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule,
    RouterModule.forRoot(myRoots)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

We may also need to edit the nav.component.html by adding a new button for login.

Now, go to your login.component.html file and add the following markup.

As you can see, we are actually calling a login method on submit. Before we implement that function now on login.component.ts file let’s create an auth service and edit as preceding.

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AuthService {

  constructor(private myRoute: Router) { }

  sendToken(token: string) {
    localStorage.setItem("LoggedInUser", token)
  }

  getToken() {
    return localStorage.getItem("LoggedInUser")
  }

  isLoggednIn() {
    return this.getToken() !== null;
  }

  logout() {
    localStorage.removeItem("LoggedInUser");
    this.myRoute.navigate(["login"]);
  }


}

Now it is time to edit our login.component.ts file.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  form;
  constructor(private fb: FormBuilder,
    private myRoute: Router,
    private auth: AuthService) {
    this.form = fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  ngOnInit() {
  }

  login() {
    if (this.form.valid) {
      this.auth.sendToken(this.form.value.email)
      this.myRoute.navigate(["home"]);
    }
  }

}

This is not the preferred way of doing this, instead, you should create an API service and connect to a database. And then, check whether this email and password are valid or not, at last, you should set the localStorage with the token you get from server API. This topic is enough for another article, to make this article short, I am just setting the value email here.

If you are getting an error as “ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence”, please make sure that you have rxjs version greater than or equal to 5.5.4 in package.json file. The rxjs version 5.5.3 has this issue with Angular 5.

Now run your application and make sure that it is redirecting to the homepage. you can also check the localStorage entry on your browser console.

Set up Guard generated

Let’s go to our auth.guard.ts file and make some changes.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';
import {Router} from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService,
    private myRoute: Router){

  }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable | Promise | boolean {
    if(this.auth.isLoggednIn()){
      return true;
    }else{
      this.myRoute.navigate(["login"]);
      return false;
    }
  }
}

Do not forget to add AuthService and AuthGuard in providers in app.module.ts.

import { AuthService } from './auth.service';
import { AuthGuard } from './auth.guard';

Use Auth Guard in Routes

Wow, the set up is done, now it is time for action. Let’s go to our routes now and change the code as preceding.

const myRoots: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' , canActivate: [AuthGuard]},
  { path: 'register', component: RegistrationComponent },
  { path: 'login', component: LoginComponent},
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard]}
];

Run your application and try to access the home page before login if everything goes fine, it should redirect you to login page.

Let’s do some more coding on the nav.component.html and nav.component.ts for making our app more meaningful.

nav.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

  constructor(private auth: AuthService) { }

  ngOnInit() {
  }

}

nav.component.html

Here we are just making the log out button available only for logged in users and hiding register and login button for logged in user. Sounds good? The auth.isLoggedIn function will be available on this page as we are injecting the auth service on out nav.component.ts file.

Conclusion

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Implement Validations in Angular 5 App

SibeeshVenu — Sat, 02 Dec 2017 19:50:08 +0000

[toc]

Introduction

This post is a continuation of the course Developing an Angular 5 App series if you haven’t gone through the previous posts yet, I strongly recommend you to do that. You can find the links to the previous posts below. In this post, we are going to implement Two Way binding and validations in Angular 5 registration form. So at the end of this article, you will be proficient in how to do validations in Angular. I hope you will like this article.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

Source Code

You can always clone or download the source code here

Background

Validations are having a vital role in all the applications, without validation, anyone can push invalid data to your application. So here we are also going to implement some validations, it is our application and we want to make it perfect right?

Validation in Angular

To get started with the Angular forms, we need to import some modules to our app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent,
    HomeComponent,
    NavComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule,
    FormsModule, ReactiveFormsModule,
    RouterModule.forRoot(myRoots)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

In our previous post, we have developed an Angular form in the component named Registration. Now let us open registration.component.ts file and import FormBuilder, Validators in it.

import { FormBuilder, Validators } from '@angular/forms';

Let’s inject the FormBuilder in our constructor.

constructor(private fb: FormBuilder) {}

Next, is building a form group, so that we can include our model in it.

form;
  constructor(private fb: FormBuilder) {
    this.form = fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', Validators.required],
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    });
  }

In the group model, the first argument is the initial value that you may need to show. You can always do as preceding.

firstName: ['Sibeesh', Validators.required]

We will have to do some more changes in our registration.component.html.

Here formControlName is the tag which connects our model value and the control, so if you are not providing this value in your HTML, the validation for that particular control will not work. Now let us run our application and see the output.

Angular_Form_With_Validation

Please be noted that we have given value only for the field First Name, so the remaining fields are showing in red color when we click our Register button. So our validation is working as expected.

You can always apply some custom validations too, like Email field validators. Let’s do that now. Please change your constructor as preceding.

constructor(private fb: FormBuilder, private auth: AuthService) {
    this.form = fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', [Validators.required, isEmailValid('email')]],
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    });
  }

Now as you guessed, we need to implement the function isEmailValid.

function isEmailValid(control) {
  return control => {
    var regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    return regex.test(control.value) ? null : { invalidEmail: true };
  }
}

Now that we have done our custom validation, let’s check it out in our application.

Custom Email Field Validator in Angular 5 App

Let’s create a click event to our register button and get the form values that we have typed, so that we can pass these values to our server and save the same in our next article.

 register() {
    console.log(this.form.value);
}

Please make sure that you are getting the values in your browser console.

Get the form values

That’s all for today. In our next article, we can do some database actions, be ready.

Conclusion

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Generating Your First Components And Modules in Angular 5 App

SibeeshVenu — Thu, 16 Nov 2017 16:12:09 +0000

[toc]

Introduction

This post is a continuation of the course Developing an Angular 5 App series if you haven’t gone through the previous posts yet, I strongly recommend you to do that. You can find the links to the previous posts below. In our previous posts, we saw about the Angular 5 updates, an overview of the project and how to set up your first application in Angular 5. In this post, we are going to create few components and modules like routing, navigation, registration forms etc. So at the end of this article, you will be having a registration application with navigation and routing enables. I hope you will like this article.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

Source Code

You can always clone or download the source code here

Background

So as I mentioned, here we are going to create an Angular 5 application which contains Registration form, Navigation, Routing etc.

Let’s Develop Our Application

We will be creating our application in a step by step manner so that you can easily follow up. No more talking now and let’s code it.

Creating your first component

As we discussed in our previous posts, a component is a set of combined functionality, in our case, we are going to create a component called Registration whose purpose is to serve all the codes for Registration.

You can create your components in two ways,

Manually create a file called registration.component.ts, if you opt this method, you will have to register this component in app.module.ts yourself and also creating the template.
Using a command in NPM command prompt, this is an easy method, as it does all the background work for us.

I am going to opt the second method. To create a component using your command prompt, you will have to run the following command.

ng generate component {component name }

D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5>ng g component registration

Once you run the command, the following processes will be happened.

create src/app/registration/registration.component.html
create src/app/registration/registration.component.spec.ts
create src/app/registration/registration.component.ts
create src/app/registration/registration.component.scss
update src/app/app.module.ts (501 bytes)

Now let us go back to our code folder and see the files. You can see your new files in app/registration folder. Here is how our registration.component.ts file looks like.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.scss']
})
export class RegistrationComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

If you see the code, the command had created all of the code which we need to get started. The same component will be imported and added to our declarations in @NgModule in our app.module.ts. Please go ahead and see the same.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { RegistrationComponent } from './registration/registration.component';


@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creating a registration form

Now that we have created our component, let’s edit our component with needed text boxes and button. Go to your registration.component.html file and edit the content as preceding.

Creating a route for our new component

Now our registration page is updated, and we are yet to create a route for the same right, let’s create it now and test our registration page.

To create a route you will have to do some set of changes.

Make sure that you have one base element in your src/index.html file

Now go to your app.module.ts file and import the RouterModule there

import { RouterModule, Routes } from '@angular/router';

Create our Route Array

const myRoots: Routes = [
  { path: 'register', component: RegistrationComponent }
];

Here the path is the route name and component is the component which that path refers to.

Configure the route in imports

Once we create the routing array, it is time to configure it, using RouterModule.forRoot.

@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(myRoots)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Set our router outlet

We have successfully configured our route, now we need to set where this pages/components to appear. To do so, go to your app.component.html and add the router-outlet. So the content of the route components will be displayed after the router-outlet tag.



  
    Welcome to {{title}}!

Now if you run our application by following the route as http://localhost:4200/register you can see our registration page as preceding.

Sample_Registration_Form

Isn’t this registration form too basic, let’s style them now?

Style registration page using material design

Before we do anything, we need to install angular-material to our project. So that we can use the styles which are available there.

npm install --save @angular/material @angular/cdk

By any chance, if you get an error as below,

D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5>npm install --save @angular/material @angular/cdk
npm ERR! path D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5\node_modules\fsevents\node_modules\dashdash\node_modules
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall scandir
npm ERR! Error: EPERM: operation not permitted, scandir 'D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5\node_modules\fsevents\node_modules\dashdash\node_modules'
npm ERR! { Error: EPERM: operation not permitted, scandir 'D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5\node_modules\fsevents\node_modules\dashdash\node_modules'
npm ERR! stack: 'Error: EPERM: operation not permitted, scandir \'D:\\SVenu\\FullStackDevelopment\\Angular\\Angular5\\ng5\\node_modules\\fsevents\\node_modules\\dashdash\\node_modules\'',
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'scandir',
npm ERR! path: 'D:\\SVenu\\FullStackDevelopment\\Angular\\Angular5\\ng5\\node_modules\\fsevents\\node_modules\\dashdash\\node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

You should try running the following command before you execute the above command again.

cmd.exe npm

You may also need to install the animation as well

npm install --save @angular/animations

Once you have installed it, we need to import the some of the modules in the app.module.ts file as preceding.

import { MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule } from '@angular/material';

Now add those components to our import list in @NgModule.

@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule,
    RouterModule.forRoot(myRoots)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Let’s go back to our registration.component.html file and do some design changes.

We also need to include one material CSS in our Style.scss file.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Now let’s run our application and see our registration page.

Material_Angular_Form

That’s cool, we have done it.

Create Home and Navigation Components

We know how to create new components now using generate command right, let’s create a new component for Home and Navigation.

ng g component home 

ng g component nav

As we used the commands to create the components, the same will be imported in our app.module.ts automatically, so we don’t need to worry about it.

Now let’s edit our nav component and use a material design for the navigation buttons.

Here routerLink property specifies the route where we need to redirect to. We are not done yet, we need to use this component on our app.component.html page to see this navigation.



  
    Welcome to {{title}}!

And also add our new route for our HomeComponent. So go to your app.module.ts and edit your route as follows.

const myRoots: Routes = [
  { path: '', component: HomeComponent },
  { path: 'register', component: RegistrationComponent }
];

Let’s give it a try now, I am sure that you will be seeing an output as preceding.

Nav_Demo

That’s all for today. In our next article, we will start to do some validations and set up two-way data binding, so that the model values can be passed to the server. Till then bye.

Conclusion

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Angular 5 Basic Demo Project Overview

SibeeshVenu — Wed, 15 Nov 2017 18:07:04 +0000

[toc]

Introduction

This post is a continuation of the Angular 5 series and you can find the first part of this series here What Is New and How to Set Up our First Angular 5 Application. So if you haven’t gone through the first part yet, I strongly recommend you to do that. In our first part, we saw the Angular 5 updates and how to set up your first application in Angular 5. In this post we are going to discuss few files and application overview, we will also be discussing some key points like Components, Declarations, Modules, Providers etc. So at the end of this article, you will have some basic understanding of Angular project structures and what it really matter when it comes to the project. I hope you will like this article.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

Source Code

You can always clone or download the source code here

Background

Though Angular 5 has exactly same project architecture as the previous version, we will be explaining some key elements so that the beginners can follow up this series. I hope you would not mind if you are an experienced professional. Thanks for understanding.

Understanding Angular Application

The Angular project has a clean architecture, it contains the folder structure as shown in the preceding image.

Angular_App_Folder_Structure

We are going to start developing our application in src/app folder which is our application root folder. For now, let’s go ahead and see what we have got in the existing files. Let us open the file app.component.ts.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

In Angular we are creating components for each selected functionalities, let’s say one component for login, and other for the register, other for navigation etc, so that each can be maintained separately. In each component, we have 3 parts.

Import section
Decoration
Export section

Import section helps us to import some existing functionalities available in the framework like we have included Component from Angular/core in the above code snippet.

The Decoration is the place where we decorate the component, giving a selector( which is unique to each component), Style the UI, Giving the template URL which points to a particular HTML file where we customize the component. We can also include our template in our decoration itself as a template:’here your custom HTML’.

The Export section includes the custom TypeScript code which is specific to that component. Let’s say it is a class, which holds its own functionalities.

Now let us just move our pointer to app.module.ts, this is the place where we register all of our modules, components, providers etc. We can consider this as a base class. Like components, it has a section for imports and export. It also has a @NgModule section, which contains our declarations (components), imports (modules), providers (services).

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I am not going to explain about app.component.css, app.component.html, app.component.spec.ts as you can see what it has, by seeing the code inside. So I am leaving that to you.

If you see the project folder, you can see a folder named Environment, as the name implies, it helps us to set the configurations for our environments, let’s say for development and production etc.

Index.html is the main page from which we call the app-root, remember we set the app.component’s selector as app-root?




  
  MyAngular5App

Please make sure that you are giving in your index.html file, orelse you will get an error in your agular app.

The tsconfig.app.json file is the place where we can set the configuration for our project, like setting the module versions, compiler options etc. You can see a sample file as below.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

If you have created your Angular app using Angular CLI, you will see a file named .angular-cli.json in your project. This is the file where all of your custom project settings rreside.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-angular5-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Last but not the least package.json is the file where your NPM packages are mentioned, and whenever you run npm install commands, this is the file that command look into.

{
  "name": "my-angular5-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

Once the package manager finishes running the install command, all the mentioned packages will be added to the folder node_modules.

In our next article, we will start developing some components in our Angular app. Till then bye.

Conclusion

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

What Is New and How to Set Up our First Angular 5 Application

SibeeshVenu — Wed, 15 Nov 2017 11:05:26 +0000

[toc]

Introduction

We all know that the Angular version 5 is released a few weeks back, aren’t you eager to know what is there we have got in Angular 5. What makes our development easy there? Well, here in this post I am going to discuss few updates in Angular 5. By saying that, I will not be discussing all the items which have been released with this version. Here, we will also be checking how to create our first Angular 5 application. So at the end of this article, you will have your own sample application with you. Cheers for that. I hope you will like this article.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

Source Code

You can always clone or download the source code here

Background

As I mentioned earlier, this post is going to give you an introduction to the changes or updates in Angular 5. The application we are going to create is a basic Angular application with the help Angular CLI and NPM (Node Package Manager). So if you have not installed NodeJS on your machine, please go ahead and install it from here. Now let’s see the key updates in Angular 5.

What is new in Angular 5?

Though there are quite a few updates, I would say more concentration was given to the area of performance and efficiency. Below is the list of key area updates.

AOT compiler

AOT is Ahead of Time compiler, what it does is, as the name implies, it converts all of our TypeScript codes to native JavaScript code to make sure that it supports in all the browsers. The same was being done by Just In Compiler in the previous version, so what makes the difference? AOT converts the code before it runs in the browser, whereas JIT converts it at runtime. Hence the page renders faster.

Optimizations

As I mentioned earlier, the development team was concentrating more on the performance aspects of Angular 5. Two of such improvements are,

Boost speed
Smaller Bundles

Package Updates

There are some updates in few packages, and some of them are,

Now Angular CLI 1.5 has Angular 5
RXJS version is been upgraded to 5.5
TypeScript is been updated to 2.4

New HttpClient

There are some changes in some modules as well, the new HttpClient module is faster and lighter than the previous version. Hence the old Http module is deprecated, however, you can still use the same in your applications, it is just that, the same will vanish in any future updates. The new module can be imported as below.

Import {HttpClientModule} from ‘@angular/common/http’

Other Updates

There are some other updates related to many modules and categories. Few of them are,

Some changes in form validation, specifically in blur and on submit
The pipes are more standardized and internationalized now
Old pipes are deprecated now
A new module ServerTransferStateModule is introduced

Sorry that I am not including any code snippets to highlight the actual changes, I will be writing an article very soon with full code changes.

Creating your first Angular 5 application

To create an Angular application easily, the first thing you may need to do is, Installing Angular CLI. I hope you had already done it. Let’s just jump into the process now.

Open your Node Package Manager Console and create a directory where we are going to download all the Angular files.

mkdir Angular5

Now we can move our cursor to that folder.

cd Angular5

Now we can check whether the Node and NPM is already installed or not.

D:\SVenu\FullStackDevelopment\Angular\Angular5>node -v

If it is installed you will get the version, for me it was v7.9.0

D:\SVenu\FullStackDevelopment\Angular\Angular5>npm -v

My NPM version is 4.2.0

By any chance, if you need to update your NPM version, you can always do that with the help of the preceding command.

D:\SVenu\FullStackDevelopment\Angular\Angular5>npm i -g npm

Once after I update my NPM version, the command npm -v was showing as 5.5.1. So now we are good to go. Our next step is to install Angular CLI, let’s do it.

D:\SVenu\FullStackDevelopment\Angular\Angular5>npm install @angular/cli -g

If you want to check the version of your Angular CLI, you can use the below command.

D:\SVenu\FullStackDevelopment\Angular\Angular5>ng -v

The result may look like below.

Angular CLI: 1.5.0
Node: 7.9.0
OS: win32 ia32
Angular:
…

Now it is time to create our Angular Project, please use the preceding command for the same.

D:\SVenu\FullStackDevelopment\Angular\Angular5>ng new MyAngular5App

Here MyAngular5App is the project name. Once you run the command, it will do 3 tasks.

Creating the components which are needed
Installing packages for tooling via npm.
Initializing git

Now if you go to your project directory, you can see all the files has been included there already. You can go ahead and open the files in any source code editors.

As the last step, we need to run our application.

D:\SVenu\FullStackDevelopment\Angular\Angular5>cd MyAngular5App

D:\SVenu\FullStackDevelopment\Angular\Angular5\MyAngular5App>ng serve

The above command will build your application and serve the port 4200 by default. You may see the preceding output in the command window.

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-11-15T07:45:17.925Z
Hash: dd334581365d3dd74dfd
Time: 21845ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 24.3 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 554 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 34.9 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 8.03 MB [initial] [rendered]

webpack: Compiled successfully.

Let’s run our application by running http://localhost:4200 now. I am sure you will get an Angular application as preceding.

Angular_5

Conclusion

Your turn. What do you think?

Kindest Regards
Sibeesh Venu