How do I make my title stick to color Primary as well as my icon?

Question

I built a menu interconnected with the tabs component in Ionic, I can make my icon stay in the color Primary when a menu item is active, so far so good. But my title always stays in the default color I set for when the menu is inactive. Trying to make color Binding I found some errors, for example: It doesn’t allow me to make Binding over H5, H4, H3 and if I do Binding over the ion-item, it fills any ion-item with color Primary, and I just need the title property to stay in color Primary, as with the icon, my code is as follows::

  import { Component, ViewChild } from '@angular/core';
  import { IonicPage, NavController, NavParams, Nav, MenuController, 
           ToastController  } from 'ionic-angular';
  import { FirebaseListObservable, AngularFireDatabase } from 
           'angularfire2/database';
  import * as firebase from 'firebase';
  import { AngularFireAuth } from 'angularfire2/auth';

   export interface PaginaInterface{
          titulo: string;
          nomePagina: string;
          tabComponent?: any;
          index?: any;
          icon: string;
   }

  @IonicPage()
  @Component({
    selector: 'page-menu',
    templateUrl: 'menu.html',
  })
 export class MenuPage {

 usuarioLogado: any;
 usuarioUid: any;

 itensUsuariosFirebase: FirebaseListObservable<any[]>;
 empresasFirebase: FirebaseListObservable<any[]>;
 usuario: any;
 idUsuario: any;
 usuarioFoto: any;

 dadosUsuario: any;
 keyUsuario: any;

 dadosEmpresa: any;

 rootPage = 'TabsPage';

 @ViewChild(Nav) nav: Nav;

 paginas: PaginaInterface[] = [
 {titulo: 'Início', nomePagina: 'TabsPage', tabComponent: 'HomePage', index: 
         0, icon: 'custom-home-page'},
 {titulo: 'Itens', nomePagina: 'TabsPage', tabComponent: 'ItensPage', index: 
         1, icon: 'custom-package'},
//{titulo: '', nomePagina: 'TabsPage', tabComponent: '', index: 2, icon: 
       'add-circle'},
 {titulo: 'Vendas', nomePagina: 'TabsPage', tabComponent: 'VendasPage', 
        index: 3, icon: 'custom-files'},
 {titulo: 'Contatos', nomePagina: 'TabsPage', tabComponent: 'ContatosPage', 
        index: 4, icon: 'custom-user'},
 {titulo: 'Condicionais', nomePagina: 'CondicionaisPage', tabComponent: '', 
        icon: 'custom-bag'},
 {titulo: 'Compras', nomePagina: 'ComprasPage', tabComponent: '', icon: 
       'custom-bag'},
 {titulo: 'Financeiro', nomePagina: 'FinanceiroPage', tabComponent: '', 
       icon: 'custom-bar-chart'},
 //{titulo: 'Configurações', nomePagina: 'ConfiguracoesPage', tabComponent: 
       '', icon: 'custom-settings'}
 ]

 constructor(public navCtrl: NavController, 
          public navParams: NavParams,
          public db: AngularFireDatabase,
          public auth: AngularFireAuth,
          public menuCtrl: MenuController,
          public toastCtrl: ToastController) {

          if(this.navParams.get('facebookUsuario')){
            let userFace = this.navParams.get('facebookUsuario');
            console.log(userFace);
            this.idUsuario = userFace.uid;
            this.usuarioFoto = userFace.photoURL;
          }

          if(this.navParams.get('googleUsuario')){
            let userGoogle = this.navParams.get('googleUsuario');
            console.log(userGoogle);
            this.idUsuario = userGoogle.uid;
            this.usuarioFoto = userGoogle.photoURL;
          }

          if(firebase.auth().currentUser == null || 
             firebase.auth().currentUser == undefined){
            this.navCtrl.setRoot('LoginPage');
          } else {
            this.usuario = firebase.auth().currentUser;
            this.idUsuario = firebase.auth().currentUser.uid;
            this.usuarioFoto = firebase.auth().currentUser.photoURL;
          }

          let pathUsuarios = `/usuarios_adm_proprietarios/`;
            this.itensUsuariosFirebase = this.db.list(pathUsuarios, {
              query: {
                orderByChild: 'uidUsuario',
                equalTo: this.idUsuario
              }
          });

          let pathEmpresas = `/empresas/`;
          this.empresasFirebase = this.db.list(pathEmpresas, {
            query: {
              orderByChild: 'uidAdministrador',
              equalTo: this.idUsuario
            }
          });

          this.itensUsuariosFirebase.subscribe( data => {
            this.dadosUsuario = data;

            this.empresasFirebase.subscribe( data => {
              this.dadosEmpresa = data;
              if(this.dadosEmpresa.length == 0){
                this.navCtrl.setRoot('DadosEmpresaPage', {keyUsuario: 
                this.dadosUsuario[0].key, uidUsuarioLogado: 
                     this.idUsuario});
                this.toastCadastrarEmpresa();
              }
            })
          })

  }

  toastCadastrarEmpresa(){
    const toast = this.toastCtrl.create({
    message: 'É necessário cadastrar a empresa para prosseguir...',
    duration: 3000,
    position: 'bottom'
  });
  toast.present();
  }

  abrirPagina(pagina: PaginaInterface){
  let params = {};

  if(pagina.index){
    params = {tabIndex: pagina.index};
  }

  if(this.nav.getActiveChildNavs().length && pagina.index != undefined){
    this.nav.getActiveChildNavs()[0].select(pagina.index);
  } else {
  this.nav.setRoot(pagina.nomePagina, params);
  }
  }

  paginaAtiva(pagina: PaginaInterface){
  let childNav = this.nav.getActiveChildNavs()[0];

  if(childNav){
    if(childNav.getSelected() && childNav.getSelected().root === 
    pagina.tabComponent){
    return 'primary';
  }
  return;
  }

  if(this.nav.getActive() && this.nav.getActive().name === 
    pagina.nomePagina){
  return 'primary';
  }
 }



}

My html is:

   <ion-list>
    <ion-item class="item-menu" *ngFor="let p of paginas" 
          (click)="abrirPagina(p)" menuClose>
          <ion-icon item-start [name]="p.icon" [color]="paginaAtiva(p)"> 
          </ion-icon>
          {{p.titulo}}
    </ion-item>
    <ion-item class="item-menu" (click)="desconectar()">
         <ion-icon item-start name="custom-close"></ion-icon>
         <h5>Sair</h5>
    </ion-item>
   </ion-list>

Answer 1

To put color in an H tag (Headings), you need to do the following:

<h5 ion-text color="primary">Título</h5>

You can find more about in the documentation: Typography