UI — Blog — Crojach Software

I would have thought that a global pandemic would slow things down for me but I had more work to do than ever which is a nice problem to have I guess :)
Writing blog posts had to go on a brief pause but after a quick two week break I am ready to try to get you excited about the ease of use in Ionic.
Since it’s quite hot in the northern hemisphere, the next few posts are all going to be light and won’t require a lot of brain power to process ;)

The problem

Ionic comes with a few built in colors but every now and then you run into the issue that you need to add one special color to make your app shine again. You can either change one of the predefined ones, especially if it’s a color that defines your app, or you can create a whole new color and use it later.

Changing one of the built in colors is easy as you just have to go into the theme folder and fiddle around with one of them. However, there is a limited number of candidates for that. Yo can pretty much only change primary, secondary, and tertiary because the remaining colors (success, warning, danger, dark, medium, and light) already have a pretty strict semantic meaning and adding a green hue to a warning color, for example, can lead to potential issues down the road.

Let’s check out how to solve this in a more elegant way.

The solution

The easiest way you can get a full color definition is to go to the Ionic colors documentation and define your new color.

I have given my color the name Crojach and selected a nice shade of light blue (I am partially color blind so give me a break here :)

Once you select the color you want, you will see some auto generated scss code below similar to this

:root {
  --ion-color-crojach: #4edfe9;
  --ion-color-crojach-rgb: 78,223,233;
  --ion-color-crojach-contrast: #000000;
  --ion-color-crojach-contrast-rgb: 0,0,0;
  --ion-color-crojach-shade: #45c4cd;
  --ion-color-crojach-tint: #60e2eb;
}

.ion-color-crojach {
  --ion-color-base: var(--ion-color-crojach);
  --ion-color-base-rgb: var(--ion-color-crojach-rgb);
  --ion-color-contrast: var(--ion-color-crojach-contrast);
  --ion-color-contrast-rgb: var(--ion-color-crojach-contrast-rgb);
  --ion-color-shade: var(--ion-color-crojach-shade);
  --ion-color-tint: var(--ion-color-crojach-tint);
}

It’s important to stick everything generated into your code, otherwise it won’t work.

The first part is just a new color definition. It defines the HEX and RGB colors as well as the contrast colors, shades and tints. It’s the same as you would see it for the predefined colors that come with Ionic.

The second, selector, definition is what your color gets translated into by Ionic. Once you set a {Color} to your element, Ionic will add an ion-color-{Color} to that element. It will then check out your css files and apply the required color.

Colors in action

Let’s put it all together now. You can add the color definition anywhere you want. Just make sure it’s referenced.

I have created a new file theme/colors.scss and added the above auto generated code into it.

We then import this file into the global.scss file and are ready to use it in our app.

// theme/colors.scss

:root {
  --ion-color-crojach: #4edfe9;
  --ion-color-crojach-rgb: 78,223,233;
  --ion-color-crojach-contrast: #000000;
  --ion-color-crojach-contrast-rgb: 0,0,0;
  --ion-color-crojach-shade: #45c4cd;
  --ion-color-crojach-tint: #60e2eb;
}

.ion-color-crojach {
  --ion-color-base: var(--ion-color-crojach);
  --ion-color-base-rgb: var(--ion-color-crojach-rgb);
  --ion-color-contrast: var(--ion-color-crojach-contrast);
  --ion-color-contrast-rgb: var(--ion-color-crojach-contrast-rgb);
  --ion-color-shade: var(--ion-color-crojach-shade);
  --ion-color-tint: var(--ion-color-crojach-tint);
}

// global.scss

...
@import "./theme/colors.scss"

// home.page.html
<ion-header>
    <ion-toolbar>
        <ion-title>
            Colors
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <div id="container">
        <ion-button color="crojach">
            Look how pretty I am
        </ion-button>
    </div>
</ion-content>

Once you run the app you will see something like this

It’s not the prettiest button (whatever the label says) but it’s a quick and easy way to generate more variety in your app.

Just keep in mind no to go overboard with the number of colors :)

As always, the full code is on Github.

Until next time,
Happy coding

While working on a project, a new requirement emerged where the client wanted to have a multi level menu displayed. After some digging around I didn’t find anything that was simple enough. Pretty much all of them were using some kind of id + level tags on menu items which then helped them know if they should expand something or not.

I like to keep things as simple as possible so I tried to take advantage of Angular’s component system and build something a little easier to understand.

Hello world (kind of)

Let’s first create an Ionic app with a predefined side menu and move from there. You just need to run this command in your terminal and Ionic will do the rest.

> ionic start multilevel-menu sidemenu

Now you can start your app with the following command

> ionic serve

This will start your (default) browser and you should see something like this:

Looks nice, but nothing too exciting.

1. Housekeeping

Before we start, let’s remove a bunch of things before we start. Let’s remove everything referencing list. Remove the entire list folder as well as all of it’s traces from the app.components.ts and app-routing.module.ts files. If you rerun ionic serve now, you will see just a single home menu item.

2. Creating a model

What better thing to have as a model for our multi level menu than a restaurant menu. Unfortunately, restaurant menus can get quite complicated but it will serve our needs perfectly.

We will create a very simple model with just three properties: name, id, and children. Create a new folder inside the app folder and name it models. Add another file, named menu-item.ts into it.

//src/app/models/menu-item.ts

export class MenuItem {
  name: string;
  id: number;
  children: Array<MenuItem>;
}

3. Creating some data

Based on this model, let’s creating some data for our app to use. We will create another folder named data inside the assets folder and add a new menu-items.ts file into it with the following content

//src/assets/data/menu-items.ts

export const menuItems = [
  {
    name: 'Appetizers',
    id: 1,
    children: [
      {
        name: 'Fresco Salsa',
        id: 6,
        children: null
      }
    ]
  },
  {
    name: 'Main dishes',
    id: 2,
    children: [
      {
        name: 'Beef',
        id: 7,
        children: [
          {
            name: 'Crispy Orange Beef',
            id: 10,
            children: null
          }
        ]
      },
      {
        name: 'Burger',
        id: 8,
        children: [
          {
            name: 'Chorizo Burger',
            id: 11,
            children: null
          }
        ]
      },
      {
        name: 'Vegetarian',
        id: 9,
        children: [
          {
            name: 'Chile Rellenos',
            id: 12,
            children: null
          }
        ]
      }
    ]
  },
  {
    name: 'Side dishes',
    id: 3,
    children: [
      {
        name: 'Baked potato',
        id: 13,
        children: null
      }
    ]
  },
  {
    name: 'Salads',
    id: 4,
    children: [
      {
        name: 'Taco Slaw',
        id: 14,
        children: null
      }
    ]
  },
  {
    name: 'Desserts',
    id: 5,
    children: [
      {
        name: 'Crepes',
        id: 15,
        children: null
      }
    ]
  }
];

It’s a mix of everything, so I hope there is something for you in this menu as well!

4. Final work before the good stuff

The last thing we have to do is go back to our app.component.ts and replace appPages with our new menuItems

//src/app/app.component.ts

import { menuItems } from '../assets/data/menu-items';

// ...

export class AppComponent {
  private menu = menuItems;
  // ...
}

The last thing we have to do is to remove the old markup used to render the menu and replace it with something simpler (for now). Let’s go into the app.component.html file and do that right now.

<!--src/app/app.component.html-->

<ion-menu-toggle auto-hide="false" *ngFor="let menuItem of menu">
  <ion-item>
    {{menuItem.name}}
  </ion-item>
</ion-menu-toggle>

Saving everything you should see your new menu in all it’s glory.

It’s pretty, isn’t it?

5. Brainstorming

Let’s think about how we are going to proceed here. From the model we can see that we have a menu item that can hold a bunch of menu items and so on.

What we will do then is to create a component which will pass its children to another component of the same type.

If the current component doesn’t have any children it’s a dish and we will display a simple button for the user to tap on, otherwise it’s just a category and we will display it differently.

6. Creating the component

If you are like me you don’t know all the bits and pieces a component needs right away. Lucky for us Ionic and Angular have us covered. Just switch to your terminal and type in the following command

> ionic g c menu-item

This will tell the Ionic (and underlying Angular) CLI to g(enerate) a new c(omponent) named menu-item.

We, also, need to let Ionic know about our new component so we will add it into the declarations array of the app.module.ts file.

//src/app/app.module.ts

import { MenuItemComponent } from './menu-item/menu-item.component';

// ...

@NgModule({
  declarations: [AppComponent, MenuItemComponent],
  
  /// ...
}

Let’s change the markup in app.component.html file to use the new component:

<!--src/app/app.component.html-->

 <ion-menu-toggle auto-hide="false" *ngFor="let menuItem of menu">
   <!-- <ion-item>
     {{menuItem.name}}
   </ion-item> -->
   <app-menu-item></app-menu-item>
 </ion-menu-toggle>

Saving it all now will result in this:

There is one last step until we can call it a day…

7. Finishing the component

As we discussed above, if the current menu item has children, we want it to display its name and pass its children down to another component of the same type. If there are no children, display a button which the user can click.

The final component will look something like this:

<!--src/app/menu-item/menu-item.component.html-->

<div>
  <p *ngIf="menuItem.children; else finalItem">
    <ion-button
      [color]="isRoot ? 'primary' : 'secondary'"
      [expand]="isRoot ? 'full' : 'block'"
      (click)="isOpen = !isOpen"
    >
      {{ menuItem.name }}
    </ion-button>

    <span *ngIf="isOpen">
      <app-menu-item
        *ngFor="let item of menuItem.children"
        [menuItem]="item"
      ></app-menu-item>
    </span>
  </p>
</div>

<ng-template #finalItem>
  <p>
    <ion-button color="light" expand="full" 
                (click)="onMenuItemSelected(menuItem)">
      {{ menuItem.name }}
    </ion-button>
  </p>
</ng-template>

The trick here is simply to toggle each component’s isOpen property and toggle between showing and hiding the children. Also, if you aren’t familiar with the if - else syntax from here, check out one of my previous posts.

Let’s just clean up the app.component.html a little and we are done

<!--src/app/app.component.html-->

<app-menu-item
  *ngFor="let menuItem of menu"
  [menuItem]="menuItem"
  [isRoot]="true">
</app-menu-item>

The final product will look like this:

If you had trouble following along, or just want to see the code fully. You can check it out here.

Until next time,
happy coding.

Adding custom colors to your Ionic app