import { Component , Input } from '@angular/core' ; import { MatSelectChange } from '@angular/material/select' ; import { Store } from '@ngrx/store' ; import { Observable } from 'rxjs' ; import * as fromMangol from '../../../../store/mangol.reducers' ; import * as MeasureActions from '../../../../store/measure/measure.actions' ; import { MeasureDictionary , MeasureMode } from '../../../../store/measure/measure.reducers' ; @ Component ( { selector : 'mangol-measure-select' , templateUrl : './measure-select.component.html' , styleUrls : [ './measure-select.component.scss' ] } ) export class MeasureSelectComponent { @ Input ( ) dictionary : MeasureDictionary ; modes$ : Observable < MeasureMode [ ] > ; selectedMode$ : Observable < MeasureMode > ; constructor ( private store ) { this . modes$ = this . store . select ( ( state ) => state . measure . modes ) ; this . selectedMode$ = this . store . select ( ( state ) => state . measure . mode ) ; } onSelectionChanged ( evt ) { if ( typeof evt . value === 'undefined' ) { this . store . dispatch ( new MeasureActions . SetMode ( null ) ) ; } else { const mode = evt . value ; this . store . dispatch ( new MeasureActions . SetMode ( mode ) ) ; } } }