Cascading in angular

Cascading in angular

country.ts

exportclassCountry{

constructor(publicid:number, publicname:string){}

}

state.ts

exportclassState{

constructor(publicid:number, publiccountryid:number, publicname:string ){}

}

dist.ts

exportclassDist{

constructor(publicid:number, publicstateid:number, publicname:string ){}

}

hello.component.ts

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

@Component({

selector:'hello',

template:'<h1>Hello {{name}} !</h1>'

})

exportclassHelloComponent{

    @Input() name:string;}

}

select.service.ts

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

import { Country } from'./country';

import { State } from'./state';

import { Dist } from'./dist';

@Injectable()

exportclassSelectService {

getCountries() {

return [

newCountry(1, 'USA'),

newCountry(2, 'India'),

        ];

    }

getStates() {

return [

newState(1, 1, 'Arizona'),

newState(2, 1, 'Alaska'),

newState(3, 1, 'Florida'),

newState(4, 1, 'Hawaii'),

newState(5, 2, 'Delhi'),

newState(6, 2, 'KolKata'),

newState(7, 2, 'Chennai'),

newState(8, 2, 'Mumbai'),

newState(9, 2, 'Banglore'),

newState(10, 2, 'Hyderabad')

        ];

    }

getDist() {

return [

newDist(1, 10, 'Ranga Reddy'),

newDist(2, 10, 'Sanga Reddy'),

newDist(3, 10, 'Chevella'),

newDist(4, 10, 'Warangal'),

newDist(5, 10, 'Karim Nagar'),

newDist(6, 10, 'Nalgonda'),

newDist(7, 10, 'Adilabad'),

newDist(8, 10, 'Jagitial'),

newDist(9, 9, 'Bengaluru Urban'),

newDist(10, 9, 'Bengaluru Rural'),

newDist(11, 9, 'Kolar'),

newDist(12, 9, 'Davanagere'),

newDist(13, 9, 'Ramanagara'),

newDist(14, 9, 'Shivamogga'),

newDist(15, 9, 'Tumakuru'),

newDist(16, 8, 'Mumbai City'),

newDist(17, 8, 'Mumbai Suburban'),

newDist(18, 8, 'Thane'),

newDist(19, 8, 'Palghar'),

newDist(20, 8, 'Raigad'),

newDist(21, 8, 'Ratnagiri'),

newDist(22, 8, 'Sindhudurg'),

newDist(23, 7, 'Chennai'),

newDist(24, 7, 'Vellore'),

newDist(25, 7, 'Thiruvannamalai'),

newDist(26, 7, 'Cuddalore'),

newDist(27, 7, 'Villuppuram'),

newDist(28, 7, 'Kancheepuram'),

newDist(29, 7, 'Thiruvallur'),

newDist(30, 7, 'Kallakurichi'),

newDist(31, 6, 'Alipurduar'),

newDist(32, 6, 'Bankura'),

newDist(33, 6, 'Paschim Bardhaman'),

newDist(34, 6, 'Purba Bardhaman'),

newDist(35, 6, 'Birbhum'),

newDist(36, 6, 'Cooch Behar'),

newDist(37, 6, 'Darjeeling'),

newDist(38, 6, 'Uttar Dinajpur'),

newDist(39, 6, 'Hooghly'),

newDist(40, 6, 'Howrah'),

newDist(41, 6, 'Kolkata'),

newDist(42, 5, 'New Delhi'),

newDist(43, 5, 'North Delhi'),

newDist(44, 5, 'North West Delhi'),

newDist(45, 5, 'West Delhi'),

newDist(46, 5, 'South West Delhi'),

newDist(47, 5, 'South Delhi'),

newDist(48, 5, 'Central Delhi'),

newDist(49, 5, 'Shahdara'),

newDist(50, 5, 'East Delhi'),

newDist(51, 1, 'Tom O’Halleran'),

newDist(52, 1, 'Martha McSally'),

newDist(53, 1, 'Raúl Grijalva'),

newDist(54, 1, 'Paul Gosar'),

newDist(55, 1, 'Andy Biggs'),

newDist(56, 1, 'David Schweikert'),

newDist(57, 1, 'Ruben Gallego'),

newDist(58, 1, 'Debbie Lesko'),

newDist(59, 2, 'Barrow'),

newDist(60, 2, 'Kaktovik'),

newDist(61, 2, 'Fort Yukon'),

newDist(62, 2, 'Galena'),

newDist(63, 2, 'Selawik'),

newDist(64, 2, 'Point Hope'),

newDist(65, 2, 'Holy Cross'),

newDist(66, 2, 'Bethel'),

newDist(67, 2, 'Naknek'),

newDist(68, 3, 'Walton'),

newDist(69, 3, 'Holmes'),

newDist(70, 3, 'Jackson'),

newDist(71, 3, 'Leon'),

newDist(72, 3, 'Liberty'),

newDist(73, 3, 'Taylor'),

newDist(74, 3, 'Dixie'),

newDist(75, 3, 'Citrus'),

newDist(76, 3, 'Pasco'),

newDist(77, 4, 'Colorado'),

newDist(78, 4, 'Idaho'),

newDist(79, 4, 'Oregon'),

newDist(80, 4, 'Montana'),

newDist(81, 4, 'lowa'),

newDist(82, 4, 'Ohio'),

newDist(83, 4, 'Missouri'),

newDist(84, 4, 'Kansas'),

newDist(85, 4, 'Geogia'),

        ];

    }

}

app.component.ts

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

// import { Observable } from 'rxjs/Observable';

// import {Observer} from "rxjs/Observer"

import { Country } from'./country';

import { State } from'./state';

import { Dist } from'./dist';

import { SelectService } from'./select.service';

import { from } from'rxjs';

import { DISABLED } from'@angular/forms/src/model';

@Component({

selector:'app-root',

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

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

})

exportclassAppComponentimplementsOnInit {

title = 'cascading';

selectedCountry: Country = newCountry(0, '0');

selectedState: State = newState(0, 0, '0');

countries: Country[];

states: State[];

distric: Dist[];

StateEnabled: boolean = true;

DistEnabled: boolean = true;

constructor(privateselectServices: SelectService) { }

ngOnInit() {

this.countries = this.selectServices.getCountries();

this.onSelect(this.selectedCountry.id);   

  }

onSelect(countryid) {

this.states = this.selectServices.getStates().filter((item) =>item.countryid == countryid);

this.StateEnabled = false;

  }

onStateSelect(stateid) {

this.distric = this.selectServices.getDist().filter((item) =>item.stateid == stateid);

  }

}

app.component.htmls

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

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

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

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

import { HelloComponent } from'./hello.component';

import { SelectService } from'./select.service';

@NgModule({

declarations: [AppComponent, HelloComponent],

imports: [BrowserModule, FormsModule],

providers: [SelectService],

bootstrap: [AppComponent]

})

exportclassAppModule { }

app.module.ts

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

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

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

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

import { HelloComponent } from'./hello.component';

import { SelectService } from'./select.service';

@NgModule({

declarations: [AppComponent, HelloComponent],

imports: [BrowserModule, FormsModule],

providers: [SelectService],

bootstrap: [AppComponent]

})

exportclassAppModule { }

Output