import { Component, ElementRef, ViewChild } from '@angular/core'; import '@alan-ai/alan-button'; import { Platform, NavController } from '@ionic/angular'; import { Router, NavigationEnd } from '@angular/router' @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'], }) export class AppComponent { constructor( private navCtrl: NavController, private router: Router ) { /* Subscribe to router events */ this.router.events.subscribe((event) => { if (event instanceof NavigationEnd) { console.log(event.url); /* will be "/tabs/tab1" or "/tabs/tab2" depending on the open tab */ /* Set visual state */ this.alanBtnComponent.nativeElement.setVisualState({ tab: parseInt(event.url.replace('/tabs/tab', ''), 10) }); } }); } @ViewChild('alanBtnEl', {static:false}) alanBtnComponent: ElementRef; ngAfterViewInit() { this.alanBtnComponent.nativeElement.addEventListener('command', (data) => { const commandData = (data).detail; if (commandData.command === 'navigation') { /* Call client code that will react to the received command */ this.navCtrl.navigateForward([`/tabs/tab${commandData.tabNumber}`]); } }); } }