Activate sub-pages from a main page

I am new to ionic 2, and find myself in the following situation.

I have 3 main stages in my app which are on the same level. Each of these stages uses the navigation stack to navigate to various subpages within that stage.

In the second main stage, there are 4 sub-pages (forms) that the user needs to visit in no particular order. So ideally I would like to have a main tab page in this second main stage that links to 4 cards or subpages.

To this end, I would like to have some indication as to the state of completeness of each of these subpages. I can see 2 options for the 2nd main stage:

1 - Use tabs. But the question is
(1) can you have tabs not located on the main page (i.e. with the @page instead of @app)? I have tried this so far without success.

2 - Have a list of buttons that can change color depending on the status. Here the question is
(2) can you change the color of a component (say, button) in the js file?

Or maybe there are more obvious solutions to implement this?

Thanks

  1. Yes you can use tabs in any page. Doesn’t have to be the main page.

  2. Yes you can change the colors of the buttons dynamically. Use [ngClass] attribute to set the color according to the value of a property. Let me know if you would like an example for this.

The way I structure my app is by using the .push() method in my NavController object for every page that requires a back button. If some pages consist of a form only that needs to be filled out and bring the user back to the previous page, I use a Modal.

Also I always ensure to structure my app in a way where every piece of code could be used for as many purposes as possible. Thanks to TypeScript and the way Angular 2 and Ionic 2 are written. Building modular applications is much easier now.

3 Likes

@ihadeed
nice written and explained :thumbsup:

1 Like

Thank you!
Please do let me know if you have any other questions :slightly_smiling:

I actually just finished a full Ionic 2 app, and I’m finishing up another one too.

Thanks heaps for that explanation - it helps me a great deal. I’m still trying to work out how to use ngClass at the moment. If you could direct me to an example in ionic 2 maybe, that would be great!

In your TypeScript/JavaScript have a property under your Page class that will hold the dynamic value. For instance we will call it buttonColor.

this.buttonColor = 1;

Change that value to whatever you want it at any time you would like to change the color of that button.

Then in your html do the follwing:
<button [ngClass]="{primary: buttonColor ==1, secondary: buttonColor==2, danger: buttonColor=3}">Test button</button>

  • Instead of primary, secondary, and danger you can use any other button class or use your own classes.
  • Instead of setting the value of our property ( this.buttonColor ) to a number, you can set it to anything else that suits your needs. I recommend a boolean if you only have two options. Or a string if you need to remember what each option refers to (numbers can get confusing).

Alternatively you may use ngStyle which will allow you to add dynamic styling to an object. Example:

this.buttonColor = '#f0f0f0';

<button [ngStyle]="{'background-color': buttonColor}">Test</button>

Wow - thanks for taking the time helping me out, your swift response is very much appreciated. I always get caught out thinking things are much more complex than they really are. You really make it sound so simple.

1 Like

Angular and Ionic are the simplest yet most powerful frameworks I’ve ever came across. If you ever look at something and think it’s too complex then you probably just need to get your hands dirty with some code and get familiar with it!

Happy coding :slightly_smiling:

Does [ngClass] work in ionic 2?

I tried many variations on your example but it just ignores the [ngClass], always defaulting the button color to blue. I ended up doing a simple
<ion-content> <button full [ngClass]="{danger: true, primary: false, secondary: false}">TEST</button> </ion-content>

It does not throw any errors either, just acts as if the [ngClass] wasn’t there.

I also added

import {ngClass} from 'angular2/common';

at the top, just in case, although I believe the directive is built-in anyway…

The second option you mentioned using [ngStyle] works fine.

ps: can’t seem to get code indentation in the preformatted text in this forum …