Cascading Ex2 in angular
Cascading
App.components.html
<divclass="container">
<divstyle="text-align:center">
<h1>Welcome to {{title}}!!</h1>
</div>
<divclass="form-group">
<labelclass="control-label"for="Country">Country:</label>
<select*ngIf="getCountries()"[(ngModel)]="selectedCountry"(change)="onSelectCountry($event.target.value)"class="form-control"id="country">
<optionvalue="0">Select Country</option>
<option*ngFor="let
country of getCountries()"value= {{country.id}}>{{country.name}}</option>
</select>
</div>
<divclass="form-group">
<labelclass="control-label"for="States">States:</label>
<select*ngIf="states"[(ngModel)]="selectedState"(change)="onSelectState($event.target.value)"class="form-control"id="state">
<optionvalue="0">Select State</option>
<option*ngFor="let
state of states"value= {{state.id}}>{{state.name}}</option>
</select>
</div>
<divclass="form-group">
<labelclass="control-label"for="City">City:</label>
<selectclass="form-control"id="city">
<option*ngIf="!selectedState"value="0">Select City</option>
<option*ngFor="let
city of cities"value= {{city.id}}>{{city.name}}</option>
</select>
</div>
</div>
app.component.ts
import { Component } from'@angular/core';
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls: ['./app.component.css']
})
exportclassAppComponent {
selectedCountry = 0;
selectedState = 0;
title = 'app';
states = [];
cities = [];
onSelectCountry(country_id: number) {
this.selectedCountry = country_id;
this.selectedState = 0;
this.cities = [];
this.states = this.getStates().filter((item) => {
returnitem.country_id === Number(country_id)
});
}
onSelectState(state_id: number) {
this.selectedState = state_id;
this.cities = this.getCity().filter((item) => {
returnitem.state_id === Number(state_id)
});
}
getCountries() {
return [
{ id:1, name:'India' },
{ id:2, name:'USA' },
{ id:3, name:'Australia' }
];
}
getStates() {
return [
{ id:1, country_id:1, name:'Andhra Pradesh' },
{ id:2, country_id:1, name:'Madhya Pradesh' },
{ id:3, country_id:2, name:'San Francisco' },
{ id:4, country_id:2, name:'Los Angeles' },
{ id:5, country_id:3, name:'New South Wales' },
{ id:6, country_id:3, name:'Victoria' },
]
}
getCity() {
return [
{ id:1, state_id:1, name:'Guntur' },
{ id:2, state_id:1, name:'Vijayawada' },
{ id:3, state_id:1, name:'Nellore' },
{ id:4, state_id:1, name:'Kadapa' },
{ id:5, state_id:2, name:'Warangal' },
{ id:6, state_id:2, name:'Hyderabad' },
{ id:7, state_id:2, name:'Karimnagar' },
{ id:8, state_id:2, name:'Kadapa' },
{ id:9, state_id:3, name:'SOMA' },
{ id:10, state_id:3, name:'Richmond' },
{ id:11, state_id:3, name:'Sunset' },
{ id:12, state_id:4, name:'Burbank' },
{ id:13, state_id:4, name:'Hollywood' },
{ id:14, state_id:5, name:'Sunset' },
{ id:15, state_id:5, name:'Burbank' },
{ id:16, state_id:5, name:'Hollywood' },
{ id:17, state_id:6, name:'Benalla' },
{ id:18, state_id:6, name:'Melbourne' },
]
}
}
App.module.ts
import { BrowserModule } from'@angular/platform-browser';
import { NgModule } from'@angular/core';
import { FormsModule } from'@angular/forms';
import { HttpModule } from'@angular/http';
import { AppComponent } from'./app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
exportclassAppModule { }
Index.ts
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>PROJECTNAME</title>
<basehref="/">
<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cosmo/bootstrap.min.css"integrity="sha384-h21C2fcDk/eFsW9sC9h0dhokq5pDinLNklTKoxIZRUn3+hvmgQSffLLQ4G4l2eEr"crossorigin="anonymous">
<metaname="viewport"content="width=device-width,
initial-scale=1">
<linkrel="icon"type="image/x-icon"href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Output
No comments:
Post a Comment