My App does not recognize a function in my app.html for the Sidemenu for a button as shown below
Here is my code
Here is the error
My App does not recognize a function in my app.html for the Sidemenu for a button as shown below
Does your code have a toggleAppMode
function?
It would be helpful to see your code, and as text please.
The side menu won’t be able to access functions from your HomePage
, so you’ll have to move the function to app.component.ts
.
Perhaps you missed the “as text please” bit earlier. Here are a bunch of reasons why posting images of text is rude, selfish, lazy, and counterproductive to the entire point of support forums.
app.component.ts file
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { SettingsProvider } from '../providers/settings/settings';
import { TabsPage } from '../pages/tabs/tabs';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = TabsPage;
selectedMode: String;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private settings: SettingsProvider) {
this.settings.getActiveMode().subscribe(val => this.selectedMode = val);
toggleAppMode() {
if (this.selectedMode == 'nightmode') {
this.settings.setActiveMode('lightmode');
}else {
this.settings.setActiveMode('nightmode');
}
}
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}
app.html file
<ion-menu [content]="content">
<ion-header padding>
<ion-item no-lines style="margin-top:10px">
<ion-avatar item-start style="margin-left:-15px">
<img src="./assets/img/new.png">
</ion-avatar>
<button icon-only item-end style="margin-right:-15px">
<ion-icon name="more-outline"></ion-icon>
</button>
</ion-item>
<h6 style="margin:-4px"><b>Adnan Baba-Ahmed</b></h6>
<small style="margin:-5px; color:grey">@Adnanu_</small> <br>
<div id="followingandfollowers">
<small><b>967 </b></small><small id="followingandfollowersText"> Following</small>
<small><b>4,549 </b></small><small id="followingandfollowersText"> Followers</small>
</div>
</ion-header>
<ion-content padding>
<ion-list no-padding>
<button menuClose ion-item icon-left detail-none no-lines>
<ion-icon name="person"></ion-icon>
Profile
</button>
<button menuClose ion-item icon-left detail-none no-lines>
<ion-icon name="list"></ion-icon>
List
</button>
<button menuClose ion-item icon-left detail-none>
<ion-icon name="storm"></ion-icon>
Moments
</button>
<button menuClose ion-item icon-left detail-none no-lines>
Settings and privacy
</button>
<button menuClose ion-item icon-left detail-none no-lines>
Help Center
</button>
</ion-list>
</ion-content>
<ion-footer>
<div class="bottom_bar">
<button ion-button icon-only clear (click)="toggleAppMode()">
<ion-icon name="moon-outline"></ion-icon>
</button>
<button ion-button icon-only clear style="float:right">
<ion-icon name="barcode-outline"></ion-icon>
</button>
</div>
</ion-footer>
<!-->
<ion-footer-bar class="bar bar-footer">
<a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>
</ion-footer-bar>
<button ion-button icon-only>
<ion-icon name="send"></ion-icon>
</button>
<button ion-button icon-only>
<ion-icon name="send"></ion-icon>
</button>
<!-->
</ion-menu>
<ion-nav [root]="rootPage" #content [class]="selectedMode"></ion-nav>
This seems to be inside MyApp
’s constructor. Move it outside if you want it to be callable.
My bad!!! Thanks alot, It now works thumbs up