Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- export interface IState {
- state: string;
- }
- export interface ICity {
- state: string;
- city: string;
- }
- import { Injectable } from '@angular/core';
- import { Http, Response } from '@angular/http';
- import { Observable } from 'rxjs/Observable';
- import 'rxjs/add/operator/map';
- import 'rxjs/add/operator/distinct';
- import 'rxjs/add/operator/catch';
- import { ICity } from './city.interface'
- @Injectable()
- export class CityService {
- private _urlCity = '../../api/city.json';
- constructor(private _http: Http) { }
- getCity(stateName:string): Observable<ICity[]> {
- return this._http.get(this._urlCity)
- .map((response: Response) => <ICity[]>response.json())
- .catch(this.handleError);
- }
- private handleError(error: Response) {
- console.error('I found something bad');
- console.error(error);
- return Observable.throw(error.json().error || 'Server error ...');
- }
- }
- <div class="card-container">
- <md-card>
- <md-card-title>
- <h3>Testing Cascade Material Design</h3>
- </md-card-title>
- <md-card-content>
- <div *ngIf='allStates'>
- <form novalidate [formGroup]="myForm">
- <div class="flex-container" fxLayout="row" fxLayoutAlign="left left">
- <div class="flex-container" fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="space-around space-around" fxFlex="97%">
- <div class="flex-oneStudent" fxFlex="10%">
- <md-select placeholder="State" formControlName="state" required="true" (change)="onSelect($event.target.value)">
- <md-option *ngFor="let oneState of allStates" [value]="oneState.state">
- {{ oneState.state }}
- </md-option>
- </md-select>
- </div>
- <div class="flex-oneStudent" fxFlex="20%">
- <md-select placeholder="City" formControlName="city" required="true">
- <md-option *ngFor="let oneCity of cityByState" [value]="oneCity.city">
- {{ oneCity.city }}
- </md-option>
- </md-select>
- </div>
- <div fxFlex="67%"> </div>
- </div>
- </div>
- </form>
- </div>
- </md-card-content>
- </md-card>
- import { Component, OnInit } from '@angular/core';
- import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
- import { StateService } from '../State/state.service';
- import { CityService } from '../City/city.service';
- import { IState } from '../State/state.interface';
- import { ICity } from '../City/city.interface';
- import * as _ from 'lodash';
- @Component({
- selector: 'app-main',
- templateUrl: './main.component.html',
- styleUrls: ['./main.component.css']
- })
- export class MainComponent implements OnInit {
- myForm: FormGroup;
- allStates: IState[];
- cityByState: ICity[];
- constructor(public fb: FormBuilder,
- private _StateService: StateService,
- private _CityService: CityService
- ) { }
- ngOnInit() {
- this.myForm = this.fb.group({
- state: '',
- city: ''
- });
- this._StateService.getState()
- .subscribe(
- stateData => this.allStates = _.uniqBy(stateData, 'state')
- );
- }
- onSelect(stateName) {
- console.log ('User selected ' + stateName);
- this._CityService.getCity(stateName)
- .subscribe(
- cityData => this.cityByState = _.filter(cityData, function(o) { return o.state == stateName})
- );
- }
- }
- @Output() change: EventEmitter<MdSelectChange> = new EventEmitter<MdSelectChange>();
- export class MdSelectChange {
- constructor(public source: MdSelect, public value: any) { }
- }
- (change)="onSelect($event.target.value)"
- (change)="onSelect($event.value)"
- (selectionChange)="onSelect($event.value)"
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement