Customizing the navigation bar color upon page load in Ionic

Hey there! I'm looking to switch up the color of my nav-bar every time a page loads. So, I gave this a shot in menu.html:

<ion-side-menus enable-menu-with-back-views="false">

<ion-side-menu-content>

    <ion-nav-bar class="{{headerClass}}">

        <ion-nav-buttons side="left">

            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>

        </ion-nav-buttons>

    </ion-nav-bar>

    <ion-nav-view name="side-menu21"></ion-nav-view>

</ion-side-menu-content>

<ion-side-menu side="left">

    <ion-header-bar class="bar-dark">

        <div class="title">Menu</div>

    </ion-header-bar>

    <ion-content padding="false" class="side-menu-left has-header">

        <ion-list>

            <ion-item ui-sref="menu.home" menu-close="" class="item-icon-left"><i class="icon ion-home assertive"></i>Persée</ion-item>

            <ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item>

            <ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item>

            <ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item>

            <ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left"><i class="icon ion-help calm"></i>FAQ</ion-item>

            <ion-item ui-sref="connexion" menu-close="" class="item-icon-left"><i class="icon ion-log-out"></i>Se deconnecter</ion-item>

        </ion-list>

    </ion-content>

</ion-side-menu>

And then in controller.js:

angular.module('app.controllers', [])
  .controller('homeCtrl', function($rootScope, $scope) {
    $rootScope.headerClass = 'bar-assertive';
  })

  .controller('reportingCtrl', function($rootScope, $scope) {
    $rootScope.headerClass = 'bar-balanced';
  })

  .controller('mediathequeCtrl', function($rootScope, $scope) {
    $rootScope.headerClass = 'bar-energized';
  })

  .controller('offreSFRCtrl', function($rootScope, $scope) {
    $rootScope.headerClass = 'bar-royal';
  })
  
  .controller('FAQCtrl', function($rootScope, $scope) {
    $rootScope.headerClass = 'bar-calm';
  })

  .controller('connexionCtrl', function($rootScope, $scope) {
  })

Appreciate any help!

javascripthtmlcssangularjsionic-framework

Answer №1

You have the ability to customize the header bar color of the navigation bar on each page transition

.run(function($rootScope, $location) {

    $rootScope.$on('$locationChangeStart', function(event, next, current) {

        if ($location.path() == '/menu/home') {
            $rootScope.headerClass = 'bar-assertive';
        } else if ($location.path() == '/menu/reporting') {
            $rootScope.headerClass = 'bar-balanced';
        } else if ($location.path() == '/menu/mediatheque') {
            $rootScope.headerClass = 'bar-energized';
        } else if ($location.path() == '/menu/offreSFR') {
            $rootScope.headerClass = 'bar-royal';
        } else if ($location.path() == '/menu/FAQ') {
            $rootScope.headerClass = 'bar-calm';
        }else{
           $rootScope.headerClass = 'bar-assertive';
        }
    });    

})

Check out this example

OR you can insert ion-nav-bar in every view

menu.html

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>        
        <ion-nav-view name="menu"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-dark">
            <div class="title">Menu</div>
        </ion-header-bar>
        <ion-content padding="false" class="side-menu-left has-header">
            <ion-list>
                <ion-item ui-sref="menu.home" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-home assertive"></i>Persée</ion-item>
                <ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item>
                <ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item>
                <ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item>
                <ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-help calm"></i>FAQ</ion-item>
                <ion-item ui-sref="connexion" menu-close="" class="item-icon-left bar-dark"><i class="icon ion-log-out"></i>Se deconnecter</ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

home.html

<ion-view title="Persée" cache-view="false">
    <ion-nav-bar class="bar-assertive">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>

repoerting.html

<ion-view title="Reporting">
    <ion-nav-bar class="bar-balanced">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>

mediatheque.html

<ion-view title="Mediatheque">
    <ion-nav-bar class="bar-energized">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>

offreSFR.html

<ion-view title="Offre SFR" cache-view="false">
    <ion-nav-bar class="bar-royal">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>

FAQ.html

<ion-view view-title="FAQ">
    <ion-nav-bar class="bar-calm">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for transferring information from ng-view to the navbar on the index.html page using AngularJS

Recently, I embarked on a journey to learn the MEAN stack and decided to challenge myself by building an authentication page from scratch instead of using the out-of-the-box solution. My main struggle lies in updating texts on my navbar. Here's a snip ...

javascripthtmlangularjstwitter-bootstrapmean-stack

Using AngularJS to connect components with expressions

Below is my component definition: .component('paging', { templateUrl: "feature/todo-feature/paging/paging.html", controller: "PagingController", bindings: { "data": "<" } ...

javascriptangularjscomponents

Error message "I encountered an issue while attempting to execute the command 'npm run compile' due to TypeError: Cannot read properties of undefined (reading 'split')

\snabbdom\node_modules\ttypescript\lib\loadTypescript.js:29 var _e = ts.versionMajorMinor.split('.'), major = _e[0], minor = _e[1]; ^ TypeError: Unable to access properties of an undefined object (attempting 'split& ...

javascriptnpmparcel

Bootstrap 4 ordering feature is non-functional

I am looking to rearrange the layout for Desktop and mobile devices, currently this is how it's structured: On Med+ : https://i.sstatic.net/E9ZHo.png On small: https://i.sstatic.net/VG6j1.png The placement on Desktop is fine. However, on mobile I ...

cssbootstrap-4frontend

Test a JavaScript function within an Angular service using the Jasmine framework

I need to write a unit test for a JavaScript function within an Angular service using Jasmine. Here is the Angular service: angular.module("app.services").service("validationService", ["$q", function ($q) { this.validate = function (filter): ng. ...

javascriptangularjsunit-testingjasmine

Error: The object does not contain the specified method

After deploying a web app to a remote host, I encountered an unusual error. Uncaught TypeError: Object #<error> has no method 'endsWith' Key Information: The application functions perfectly on my local machine as the host. The error ari ...

javascriptjqueryjquery-chosen

Node.js client encounters ENOBUFS error due to excessive number of HTTP requests

Currently, I have the following setup: An end-to-end requests system where a node.js client communicates with a node.js server. However, the issue arises when the client fails with an ENOBUFS error in less than a minute. client: (function(){ var lo ...

javascriptnode.js

Having difficulty passing an array using AJAX

One of my current projects involves using a JavaScript function to send an array via AJAX to a PHP script on the server side. Below, I am including relevant excerpts of the code from my JavaScript AJAX function: $.ajax({ url: "bar2.php", type: ...

javascriptphpjqueryarraysajax

Rearrange the order of elements within an array and move elements around within it

I am looking to select an element from an array, relocate it to a different index, and then shift the elements in-between by 1 position. Consider this as drag-and-drop functionality, where if the starting index (from) is less than the destination index ( ...

javascriptarraysinsertrotationshift

What happens to the npm package if I transfer ownership of a github repository to a different user?

I was considering transferring a GitHub repository to another user or organization, but I have concerns about what will happen to older versions of the npm package associated with it. Let's say my Node.js package is named node-awesome-package. Versi ...

javascriptnode.jsgithubnpm

Issue still occurring: White screen remains on Android 5.0 devices and above

Currently, I am utilizing cordova 6 to manually hide the splashscreen using navigator.splashscreen.hide(). The application is built in angular and performs well on all android versions below 5.0. Yet, on Lollipop and Marshmallow, a white screen continues ...

angularjscordovaandroid-5.0-lollipop

Trigger a JavaScript alert message upon clicking the close button

I have encountered an issue with my current code. When I click on the close (X) button, it should display an error message stored in variable s. Previously, the script was functioning correctly but now it is not showing any alerts when I click on the close ...

javascript

Tips for eliminating the space within the '<td>' border tags

I am attempting to replicate the first table, but I keep getting results similar to the second table instead. My approach involved creating a table and filling the <td> tags with labels. However, after setting the borders to dark, there are unwanted ...

htmlasp.netcssuser-interface

Distinguishing Between Model and View State Management in AngularJS

As I work on a complex single page application in Angular, I find myself needing to manage two types of data. First, there is the Model data which pertains to information retrieved from and sent to the backend API server. Second, there is ViewState data wh ...

javascriptangularjs

Transform URL Structure with UrlRewrite and htaccess - A Step-by-Step Guide

Currently, I am using the following URL: http://server.com/index.php?page1=main&page2=contacts I would like to change it to: http://server.com/main/contacts Can anyone provide guidance on how to write an .htaccess file with sample code for this red ...

phphtml.htaccessurlurl-rewriting

How can I maintain the hover state even when the mouse is not hovering over it in CSS?

I have a lineup of 5 div boxes, and whenever you hover over one, it expands to fill the width of the screen. The default width of the blue div is set to cover the whole screen, allowing for the application of CSS to shrink it when hovering over the other ...

csshtmlhovertransition

Struggling to bypass server side rendering in Next.js and display dynamic component exclusively on the client side

In my pursuit to dynamically render a customized react component that includes react-owl-carousel within a next js application, I encountered a challenge. As I discovered, the react-owl-carousel component is not compatible with server-side rendering. To w ...

javascriptreactjsnext.js

Having trouble locating the module while importing MP3 files in a React project

UPDATE The issue stemmed from my limited understanding of the environment I was working in, but the responses provided below may be helpful for others facing similar challenges. EDIT: It appears that there is a problem with trying to import an mp3 file in ...

javascriptreactjstypescriptaudiojsx

Shimmering CSS Animation in iOS Versions 13 and below

Have you ever noticed a strange "blinking" effect when layering multiple CSS rotation keyframe animations on top of each other? Check out this Codepen example to see it in action: https://codepen.io/JoshuaVB/full/bGevLbR. @keyframes waves{ 0%{ transf ...

cssioscss-animations

AngularJS encountered an error while attempting to load a template: [$compile:tpload]

After developing my angularjs example app in my netbeans ide based local server, I encountered an issue when I tried to move the application to an nginx server. The browser displayed the following error message: Error: [$compile:tpload] Failed to load tem ...

javascriptangularjsnginx