DEV'S

Angular 5 - Registration Form - WebService

app.component.html

<div class="container">
    <div class="header">
        <app-not-found></app-not-found>
    </div>
    <div class="leftNav">

        <ul>
            <li routerLinkActive="active"><a routerLink="home">Home</a></li>
            <li routerLinkActive="active"><a routerLink="register">Register</a></li>
        </ul>

    </div>
    <div class="mainBar">
        <router-outlet></router-outlet>

    </div>

    <div class="footerBar">Footer</div>
</div>

app.component.ts

import { Component} from ‘@angular/core’;
import { OnInit, OnDestroy } from ‘@angular/core/src/metadata/lifecycle_hooks’;

@Component({
  selector: ‘app-root’,
  templateUrl: ‘./app.component.html’,
  styleUrls: [’./app.component.css’]
})
export class AppComponent implements OnInit, OnDestroy{
  public title:string = ‘app’;
  message:string = "hello";

  constructor(){
    console.log("App Component Constructor called");
  }

  public ngOnInit(){
    console.log("App Component init called");
  }

  public ngOnDestroy(){
    console.log("App Component destroy called");
  }

}

app.module.ts

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes} from ‘@angular/router’
import { HttpClientModule } from ‘@angular/common/http’
import { FormsModule} from ‘@angular/forms’

import { AppComponent } from ‘./app.component’;
import { HomeComponent } from ‘./home/home.component’;
import { RegisterComponent } from ‘./register/register.component’;
import { NotFoundComponent } from ‘./not-found/not-found.component’;
import { AppService } from ‘./app.service’;

const r:Routes = [
  {path:’‘, redirectTo:‘home’, pathMatch:‘full’},
  {path:‘home’,component:HomeComponent},
  {path:‘register’,component:RegisterComponent},
  {path:’**’,component:NotFoundComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    RegisterComponent,
    NotFoundComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,FormsModule,RouterModule.forRoot(r)
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.service.ts

import { Injectable } from ‘@angular/core’;
import { HttpClient, HttpHeaders } from ‘@angular/common/http’;
import { Observable } from ‘rxjs/Observable’;
const URL:string = "http://vasudevkumaran.com/ang/";
@Injectable()
export class AppService {

  constructor(private httpClient:HttpClient) { }

  public sendRegistration(path:string,payload:any):Observable<any>{
    var headerParams:HttpHeaders = new HttpHeaders();
    headerParams.append(‘Content-Type’,‘application/json’);
    return this.httpClient.post(URL+path,payload,{headers:headerParams});
  }

}

home.component.html

<p>
    {{message}}
</p>

<p>
    {{formdata}}
</p>

<button (click)="onButtonPressed()">Change Text</button>
<form (ngSubmit)="onFormSumbit()" #baseFrom="ngForm">
    <input type="text" name="usertext" placeholder="Write something" [(ngModel)]="formdata">

    <div *ngIf="formdata == ‘admin’">
        Hi, your username is correct!!!
    </div>

    <select (change)="onDropDownChanged()" [(ngModel)]="selectedGender" name="selectedGender">
      <option *ngFor="let genderObj of gender" [value]="genderObj">{{genderObj}}</option>
    </select> {{selectedGender}}
    <div>
        <input type="checkbox" name="movies" [(ngModel)]="choice.movies"> Movies
    </div>
    <div>
        <input type="checkbox" name="travel" [(ngModel)]="choice.travel"> Travel
    </div>

    <div>
        <input type="radio" name="gender" [(ngModel)]="selectedGender" [value]="gender[0]"> Male
    </div>
    <div>
        <input type="radio" name="gender" [(ngModel)]="selectedGender" [value]="gender[1]"> Female
    </div>

    <div>
        <input type="radio" name="gender" [(ngModel)]="selectedGender" [value]="gender[2]"> Other
    </div>

    <ul>
        <li *ngFor="let genderObj of gender">{{genderObj}}</li>
    </ul>

    <button type="submit">Submit</button>

</form>

home.component.ts

import { Component, OnInit } from ‘@angular/core’;
import { OnDestroy, AfterViewInit } from ‘@angular/core/src/metadata/lifecycle_hooks’;
import { NgForm } from ‘@angular/forms’;
@Component({
  selector: ‘app-home’,
  templateUrl: ‘./home.component.html’,
  styleUrls: [’./home.component.css’]
})
export class HomeComponent implements OnInit , OnDestroy, AfterViewInit{

  public message:string = "Hello this is Home page";
  public formdata:string = "";
  public gender:Array<String> = ["Male","Female","Other"];
  public selectedGender = "Female";
  public choice:any = {movies:true,travel:true};
  constructor() { 

    console.log("Home constructor called");
  }

  ngOnInit() {
    console.log("Home init called");
  }

  ngOnDestroy(){
    console.log("Home destroy called");
  }

  ngAfterViewInit(){
    console.log("Home after init called");
  }

  public onButtonPressed(){
    this.message = "Hi this message got changed";
  }

  public onDropDownChanged(){

  }

  public onFormSumbit(){
    console.log("Form submitted");
    console.log(this.choice);
  }

}

register.component.html

<form (ngSubmit)="onRegisterPressed()" #regForm="ngForm">
    <div>
        <label>First name</label>
        <input type="text" name="firstname" [(ngModel)]="user.firstname" placeholder="Enter First name" required>
    </div>
    <div>
        <label>Last name</label>
        <input type="text" name="lastname" [(ngModel)]="user.lastname" placeholder="Enter Last name" required>
    </div>
    <div>
        <label>Username</label>
        <input type="text" name="username" [(ngModel)]="user.username" placeholder="Enter Username" required>
    </div>
    <div>
        <label>Password</label>
        <input type="password" name="password" [(ngModel)]="user.password" placeholder="Enter Password" required>
    </div>
    <div style="margin-top: 10px">
        <label>Gender</label>
    </div>
    <div>
        <input type="radio" name="gender" [(ngModel)]="user.gender" value="1"> Male
    </div>
    <div>
        <input type="radio" name="gender" [(ngModel)]="user.gender" value="2"> Female
    </div>
    <div>
        <label>Area of Interest</label>
    </div>
    <div>
        <input type="checkbox" name="is_business" [(ngModel)]="isBusiness"> Business
    </div>
    <div>
        <input type="checkbox" name="is_travel" [(ngModel)]="isTravel"> Travel
    </div>
    <div>
        <input type="checkbox" name="is_holidays" [(ngModel)]="isHolidays"> Holidays
    </div>

    <div>
        <button type="submit" [disabled]="!regForm.form.valid">Register</button>
    </div>

</form>

register.component.ts

import { Component, OnInit } from ‘@angular/core’;
import { OnDestroy, AfterViewInit } from ‘@angular/core/src/metadata/lifecycle_hooks’;
import { AppService } from ‘../app.service’;
import { Title } from ‘@angular/platform-browser’;
import { Subscription } from ‘rxjs/Subscription’;

@Component({
  selector: ‘app-register’,
  templateUrl: ‘./register.component.html’,
  styleUrls: [’./register.component.css’]
})
export class RegisterComponent implements OnInit, OnDestroy, AfterViewInit {
  public user:any = {gender:"2"};
  public isBusiness = false;
  public isTravel = false;
  public isHolidays = false;
  private regSub:Subscription;
  constructor(private service:AppService, private pageTitle:Title) { 
    this.pageTitle.setTitle("Register");
    console.log("Register constructor called");
    
  }

  ngOnInit() {
    console.log("Register init called");
  }

  ngOnDestroy(){
    console.log("Register destroy called");
    if (this.regSub){
      this.regSub.unsubscribe();
    }
  }

  ngAfterViewInit(){
    console.log("Register after init called");
  }

  public onRegisterPressed(){
    
    
    this.user.is_business = 2;
    this.user.is_travel = 2;
    this.user.is_holidays = 2;
    if (this.isBusiness){
      this.user.is_business = 1;
    }
    if (this.isHolidays){
      this.user.is_holidays = 1;
    }
    if (this.isTravel){
      this.user.is_travel = 1;
    }

    console.log(this.user);

    this.regSub = this.service.sendRegistration(‘registration’,this.user).subscribe(data =>{
      console.log(data);

      if (data.result == ‘OK’){
        window.alert("Successfully registered");
        this.user = {gender:"2"};
      }else{
        window.alert(data.message);
      }
     
    });
  }

}

not-found.component.html

<p>
    This page does not exists
</p>

not-found.component.ts

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

@Component({
  selector: ‘app-not-found’,
  templateUrl: ‘./not-found.component.html’,
  styleUrls: [’./not-found.component.css’]
})
export class NotFoundComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

mystyle.css

.container {
    width: 1000px;
    height: 1000px;
    margin: 0 auto;
    background-color: antiquewhite;
}

.header {
    height: 50px;
    width: 1000px;
    float: left;
    background-color: darkolivegreen;
}

.leftNav {
    width: 180px;
    height: 880px;
    float: left;
    padding: 10px;
    background-color: coral;
}

.mainBar {
    width: 580px;
    height: 880px;
    float: left;
    padding: 10px;
    background-color: blanchedalmond;
}

.rightNav {
    background-color: cadetblue;
}

.footerBar {
    height: 50px;
    width: 1000px;
    background-color: black;
    float: left;
}

input {
    width: 180px;
    height: 30px;
    margin-top: 10px;
}

#saveBtn {
    width: 180px;
    height: 30px;
    margin-top: 10px;
}

#studentList {
    list-style: none;
    list-style-position: outside;
    margin-left: -40px;
}

#studentList li {
    padding: 10px;
    margin-top: 10px;
    background-color: darkcyan;
    color: white;
    cursor: pointer;
}

#studentList li:hover {
    background-color: cadetblue;
    ;
}

ul {
    list-style: none;
}

li {
    width: 90px;
    height: 30px;
    margin-top: 3px;
    background-color: azure;
    padding-top: 10px;
    padding-left: 10px;
    color: blue;
}

li a {
    text-decoration: none;
    color: blue;
}

li.active {
    background-color: blue;
}

li.active a {
    color: white;
}

label {
    display: block;
}

HTML5

2018-11-27 21:35:02
1) Ionic - Angular Videos
2018-06-29 05:46:32
2) Service - Broadcast Receiver
2018-06-28 03:55:43
3) Activity - Bundle - Option Menu - ActionBar
2018-06-27 03:27:57
4) Relative Layout
2018-06-25 03:14:55
5) LinearLayout Calc
2018-02-08 05:14:15
6) PHP HelloWorld
2018-01-19 04:57:25
7) Angular 5 - Material Design - Reactive Form - Continued
2018-01-19 04:06:05
8) Feedback
2018-01-19 02:07:18
9) Angular 5 - Material Design
2018-01-18 03:05:47
10) Angular 5 - Custom Directives,Pipes - Promise And Observables
2018-01-17 22:51:45
11) Angular 5 - Component Interaction
2018-01-17 03:14:26
12) Angular 5 - Registration Form - WebService
2018-01-17 01:46:34
13) Angular 5 - Directives
2018-01-16 23:13:47
14) Angular 5 - Lifecycle Hooks - Routing
2018-01-16 21:36:25
15) CRUD Example - TS - LocalStorage - Delete
2018-01-16 13:34:40
16) Shopping App - Api Calls - JSON
2018-01-16 03:17:09
17) CRUD Example - TS - LocalStorage - View - Add
2018-01-15 23:57:32
18) TypeScript - Part 2
2018-01-15 23:02:07
19) TypeScript - Part 1
2018-01-15 04:46:29
20) TypeScript To JavaScript
2018-01-15 00:48:22
21) First Angular5 App
2016-01-17 23:47:13
22) JQuery Mobile - My Account Page Addon
2016-01-16 02:38:09
23) HTML5 - CSS - JavaScript Exam Preparation
2016-01-14 02:34:08
24) JQuery Validation Plugin - Basics
2016-01-13 02:35:46
25) Final - JQuery Mobile - IndexedDB Addon
2016-01-12 03:23:20
26) JQuery Mobile - IndexedDB Addon
2016-01-11 00:08:42
27) Students Record - JQuery Mobile App
2016-01-09 04:03:04
28) JQuery Mobile PageChange Event
2016-01-08 03:51:55
29) Beginning JQuery Mobile
2016-01-07 03:47:24
30) WebWorker Example
2016-01-06 04:11:18
31) IndexedDB - ObjectStore - Tansaction - Cursor - Part 2
2016-01-05 03:46:35
32) Student Record - IndexedDB Migration
2016-01-04 23:47:55
33) IndexedDB - ObjectStore - Tansaction - Cursor
2016-01-04 04:48:33
34) Single Page Design And Geolocation Example With Ajax
2016-01-03 23:39:19
35) Drag And Drop Example
2016-01-03 01:57:50
36) Beginning Responsive WebDesign Using JQuery
2016-01-03 01:56:17
37) HTML5 Canvas Simple Example
2016-01-03 01:55:11
38) JQuery Object - Context - Function Callbacks
2015-12-29 23:28:49
39) JQuery DOM Manipulation And LocalStorage
2015-11-30 23:50:59
40) JavaScript EventListeners
2015-11-30 04:34:08
41) MultiPage Design
2015-11-28 03:02:52
42) HTML Box Design
2015-07-03 03:09:55
43) KO Custom Component
2015-07-02 23:25:36
44) KO Custom Binding And Template Binding
2015-07-01 23:27:04
45) KO Simplelist
2015-07-01 01:44:40
46) KO Introduction And JQuery Simple List
2015-01-29 00:34:17
47) Canvas - DragDrop - Video - Audio Example
2015-01-28 03:57:05
48) CSS Media Type - IndexedDB WHERE And LIKE Clause
2015-01-27 02:24:12
49) IndexedDB Simple Example
2015-01-24 00:11:32
50) Students Record - JQueryMobile - GeoLocation - Ajax Addon
2015-01-24 00:08:19
51) GeoLocation And Ajax Example
2015-01-21 05:23:32
52) Students Record - JQueryMobile - SessionStorage - Login State
2015-01-19 23:33:29
53) JQueryMobile - Page Change - Popup Addon
2015-01-19 00:21:28
54) JQueryMobile - Data-Role Introduction
2015-01-17 03:22:07
55) Handle PageLinks
2015-01-16 04:28:20
56) Simple HTML5 Calculator
2015-01-16 03:03:45
57) Load External DOM - Ajax In Simple Way
2015-01-16 03:01:48
58) JQuery Document Ready - Placement Of Script Tag
2015-01-13 22:54:25
59) Dynamic Layout Technique Using JQuery
2015-01-13 04:04:19
60) JQuery - Introduction
2015-01-12 23:45:02
61) LocalStorage - CRUD
2015-01-12 00:06:03
62) JSON - LocalStorage Example
2015-01-11 22:47:24
63) JavaScript - Data Persistency Using LocalStorage - SessionStorage
2015-01-10 03:17:01
64) HTML - JavaScript - Dynamic Table
2015-01-10 00:32:26
65) JavaScript Introduction
2015-01-09 04:07:47
66) CSS - Continued
2015-01-08 03:26:39
67) CSS - Margin - Padding - HTML5 Semantic Elements
2015-01-07 22:44:01
68) HTML-CSS Introduction
2014-11-25 14:27:00
69) Angular JS Simple Example
2014-10-16 05:01:39
70) CSS Media Example - Different CSS For Desktop - Tablet - Phone Screen Sizes
2014-10-15 04:20:11
71) Miscellaneous In Addition To Previous Exercises
2014-10-15 04:13:45
72) Some Useful RegEx
2014-10-14 02:57:45
73) Shopping List App Using IndexedDB
2014-10-14 00:04:10
74) IndexedDB Introduction
2014-10-14 00:00:01
75) JavaScript Prototyping
2014-10-11 03:50:47
76) Introduction To Canvas Drawing - Tabs - Popup Warning Dialog
2014-10-11 00:03:50
77) Popup - Validation - Shopping List App Updated
2014-10-10 22:34:42
78) RegEx Pattern For Validation - Shopping List App
2014-10-10 05:12:13
79) Password Lock-Shopping List App
2014-10-09 22:49:34
80) JQuery Shopping - Updated
2014-10-09 05:10:00
81) JQuery Mobile Forms - Save Checkbox - Radio Button Checked States
2014-10-08 22:18:40
82) JQuery Mobile Forms - Additional Data-role Attribute Values
2014-10-08 02:17:48
83) JQuery Shopping List Alternate Approach. JQ Append & Pagechange
2014-10-07 03:02:43
84) JQuery Mobile Page Change Events
2014-10-06 02:19:53
85) JQuery Mobile Data- Attribute Reference
2014-10-06 00:13:01
86) Shopping List Using LocalStorage
2014-10-06 00:10:02
87) JQuery Mobile Introduction
2014-10-06 00:07:40
88) JQuery Page Loading Technique
2014-10-06 00:05:39
89) Mobile Ready Page Extended - Load Multiple Pages Using JQuery
2014-10-06 00:00:27
90) A Mobile First Design Using JQuery - Window-Size
2014-10-05 23:58:01
91) JavaScript Array - Create - Update - Delete
2014-10-05 23:55:43
92) JQuery CSS Capabilities - A Mobile Ready Page
2014-10-05 23:52:42
93) JQuery Introduction - Unit Conversion Using JQuery
2014-10-05 23:49:58
94) JavaScript - DOM Manipulation-Table-Calculator
2014-10-05 23:40:06
95) GeoLocation
2014-10-05 23:37:36
96) Margin And Border Radius
2014-10-05 23:34:06
97) HTML5 Semantic Elements, CSS,SVG Examples
2014-10-05 23:28:45
98) HTML,CSS Selectors

© Vasudev.H / Email: tech3in@live.com