Side Menu does not call function

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

Does your code have a toggleAppMode function?

It would be helpful to see your code, and as text please.

It works when it is not in the side menu

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';

  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') {
      }else {

    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.


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">

        <button icon-only item-end style="margin-right:-15px">
            <ion-icon name="more-outline"></ion-icon>
    <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>


<ion-content padding>
    <ion-list no-padding>
        <button menuClose ion-item icon-left detail-none no-lines>
            <ion-icon name="person"></ion-icon>
        <button menuClose ion-item icon-left detail-none no-lines>
            <ion-icon name="list"></ion-icon>
        <button menuClose ion-item icon-left detail-none>
            <ion-icon name="storm"></ion-icon>

        <button menuClose ion-item icon-left detail-none no-lines>
            Settings and privacy
        <button menuClose ion-item icon-left detail-none no-lines>
            Help Center



    <div class="bottom_bar">
        <button ion-button icon-only clear (click)="toggleAppMode()">
            <ion-icon name="moon-outline"></ion-icon>

        <button ion-button icon-only clear style="float:right">
            <ion-icon name="barcode-outline"></ion-icon>


<ion-footer-bar class="bar bar-footer">
        <a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>

    <button ion-button icon-only>
        <ion-icon name="send"></ion-icon>
    <button ion-button icon-only>
        <ion-icon name="send"></ion-icon>

<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.

1 Like

My bad!!! Thanks alot, It now works thumbs up