Random Ionic Tips: Tabs and Text Color

This article comprises of following ionic tips

1. Set Root Nav and Tabs
2. How to apply text color in Ionic

Set Root Nav and Tabs

My app structure is like

The Red Box tells that I am on Login Screen . After successfully login, I was redirected to the Tabs Page. Tabs Page next decides where to go next. For Instance I was redirected to the Home Page, now my app looks like

Now if I want to logout, I would go the profile page. There I am using a service which handles the logout logic as follows.

public logout(){
  this.auth.logout();
  this.navCtrl.setRoot('Login');
}

The third line redirects the app to Login Screen. The flow diagram depicts following state of our application.

Get Root Nav

Why we have two Login(s). We are not properly redirected, we are still inside the tab Page. Read more about Nav Controller

Actually In tabbed interface, the navCtrl.setRoot('Login') would reroute the current active tab. We need to access Login Page from Root by adding following code snippets.

import { ... App } from 'ionic-angular';
constructor(
  ...
  private app: App
){}

logout(){
  this.auth.logout();
  this.app.getRootNav().setRoot('Login');
}

How to apply Foreground color in Ionic

The color attribute is widely used in Ionic components, be it a button, a navbar, a header. Just give it a color="primary" and you are all set. Your component is now customized with the color property. Usually this color property is used to change the Background color.

Things get a little tricky when we want to change the text color. For instance applying color="secondary" won’t have any effect on p or h1 tags.

There are two ways to get around this

Using ion-text

Just add ion-text along with color property

This starter project is our way of helping you get a functional app running in record time.

Using color classes

Ionic creates color classes for each platforms i-e Android, iOS and Windows based on the colors defined in variable.scss

.text-md-primary
.text-md-secondary
...
.text-ios-primary
.text-ios-secondary
...
.text-wp-primary
.text-wp-secondary

You can also see it through this animated gif

More Ways

I want you to add your views and thoughts on things discussed in this article. Stay tuned for next random ionic tips.