import { Component , OnInit } from '@angular/core' ; import { ActivatedRoute , Router } from '@angular/router' ; import { SegmentModel } from '../../models/segment.model' ; @ Component ( { selector : 'home-page' , templateUrl : 'home.page.html' , styleUrls : [ 'home.page.scss' ] , } ) export class HomePage implements OnInit { public segments : SegmentModel [ ] = [ { key : 'simple-service' , label : 'Basic' } , { key : 'ingredients' , label : 'Ingredients' } , { key : 'team-picker' , label : 'Pick Teams' } , { key : 'country-picker' , label : 'Pick Countries' } ] ; public selectedSegment : string = this . segments [ 0 ] . key ; constructor ( private route , private router ) { } ngOnInit ( ) { this . route . fragment . subscribe ( ( fragment ) => { this . setSegment ( fragment ) ; } ) ; } onClickSegment ( event ) { if ( event . detail && typeof event . detail . value === 'string' ) { const segment = event . detail . value ; this . setSegment ( segment ) ; } } setSegment ( segment ) { if ( typeof segment === 'string' ) { segment = segment . toLowerCase ( ) ; const arrayHas = this . segments . some ( ( candidate ) => { return candidate . key === segment ; } ) ; if ( arrayHas ) { this . selectedSegment = segment ; this . router . navigate ( [ ] , { fragment : segment } ) . then ( ) ; } } } }