Getting started with MEAN (Mysql, Express, Angular 6, Node) Part-4

I will explain about user registration using angular 6.

Create 3 components sign in and signup & API service using angular-cli.

ng g component components/user/signin
ng g component components/user/signup
ng g service services/api
ng g component components/user/userslist

Now check the files in src/components/user and src/services. Paste the below code in respected files.

install Cryptojs for encrypting the password

npm install crypto-js

src/app/app.modules.ts

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

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

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

import { HeaderComponent } from './components/ui/header/header.component';

import { FooterComponent } from './components/ui/footer/footer.component';

import { SigninComponent } from './components/user/signin/signin.component';

import { SignupComponent } from './components/user/signup/signup.component';

import { ApiService } from './services/api.service';

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

import { HttpModule } from '@angular/http';

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

import { UserslistComponent } from './components/user/userslist/userslist.component';

const appRoutes: Routes = [

  { path: 'signin', component: SigninComponent },

  { path: 'signup', component: SignupComponent },

  {path:'users', component : UserslistComponent},

  { path: '',

    redirectTo: '/signin',

    pathMatch: 'full'

  },

];

@NgModule({

  declarations: [

    AppComponent,

    HeaderComponent,

    FooterComponent,

    SigninComponent,

    SignupComponent,

    UserslistComponent

  ],

  imports: [

    BrowserModule,

    HttpModule,

    FormsModule,

    RouterModule.forRoot(

      appRoutes,

      { enableTracing: true } // <-- debugging purposes only

    )

  ],

  providers: [ApiService],

  bootstrap: [AppComponent]

})

export class AppModule { }

src/app/components/ui/header/header.componet.html

src/app/app.component.html

<app-header></app-header>

   <router-outlet></router-outlet>

<app-footer></app-footer>

Then Write the API service.

src/app/services/api.service.ts

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

import { Http } from '@angular/http';

import { map } from "rxjs/operators";

import * as CryptoJS from 'crypto-js';

import { unwrapResolvedMetadata } from '@angular/compiler';

@Injectable({

  providedIn: 'root'

})

export class ApiService {

  base = "http://localhost:3000";

  key : any;

  iv : any;

  constructor(private http: Http) { 

    this.key = CryptoJS.enc.Hex.parse("8500641681234567");

    this.iv  = CryptoJS.enc.Hex.parse("2811da22377d62fcfdb02f29aad77d9e");

  }

  getUsersList(){

    return this.http.get(this.base+'/get-users').pipe(map(res=>res.json()));

  }

  signupuser(user){

    user.password = this.encryptdata(user.password);

    return this.http.post(this.base+"/create-user",user).pipe(map(res=>res.json()));

  }

  encryptdata(values): string {

    var encrypted ;

    encrypted = CryptoJS.AES.encrypt(values, this.key, {

      mode: CryptoJS.mode.ECB,

      padding: CryptoJS.pad.NoPadding

    });

    return CryptoJS.enc.Hex.stringify(encrypted.ciphertext);

  }

}

src/app/components/user/userslist/userslist.component.ts

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

import { ApiService } from '../../../services/api.service';

@Component({

  selector: 'app-userslist',

  templateUrl: './userslist.component.html',

  styleUrls: ['./userslist.component.css']

})

export class UserslistComponent implements OnInit {
  users : any;

  constructor(private api:ApiService) { }

  ngOnInit() {

    this.api.getUsersList().subscribe(users=>{this.users=users});

  }

}

src/app/components/user/userslist/userslist.component.html

Now we go with signup screen. First, design the screen in HTML and assign the names for that inputs using ng-model.

src/app/components/user/signup/signup.component.ts

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

import { ApiService } from '../../../services/api.service'

@Component({

selector:'app-signup',

templateUrl:'./signup.component.html',

styleUrls: ['./signup.component.css']

})

export class SignupComponent implements OnInit {

user:usr;

showalert:boolean;

alertmsg:string;

constructor(privateapi:ApiService) { }

ngOnInit() {

this.showalert=false;

this.alertmsg='';

this.user= {

name :'',

password :'',

email :'',

phone :'',

roleId :2

};

}

saveuser(){

if(this.user.name&&this.user.email&&this.user.password&&this.user.phone){

this.api.signupuser(this.user).subscribe((res)=>{

this.showalert=true;

if(res.status){

this.alertmsg='User Created Successfully.';

this.user= {

name :'',

password :'',

email :'',

phone :'',

roleId :2

};

}else{

this.alertmsg='User Not Created.';

}

});

}else{

this.showalert=true;

this.alertmsg="Please fill all the fields..";

}

}

}

interface usr {

name:string,

password:string,

email:string,

phone:string,

roleId:number

}

src/app/components/user/signup/signup.component.html