Building a Food Recipes Mobile App with Ionic 3x and Angular 5 - Part 2


Few years ago, developers had to learn native languages such as Objective C for iOS, Java for Android and C# for Windows Phone to build mobile apps. Those days are gone now as we have mobile frameworks such as Ionic, Sencha Touch, JQuery Mobile, Kendo UI etc. which allow developers to build mobile apps using the web technologies such as HTML, CSS and JavaScript. These types of apps are called hybrid apps and they are hosted inside a native application or wrapper that utilizes a mobile platform’s WebView. This wrapper is responsible for loading HTML, CSS and JavaScript in a WebView when the mobile app is started. One of the most popular native wrappers is Apache Cordova which not only enables hybrid apps to access device capabilities such as accelerometer, camera, contacts and more but also allow you to have a single code base for multiple platforms. This tutorial series will teach you how to build such hybrid mobile app using one of the most beautiful, free and open source front end mobile apps library called Ionic and a very popular web and mobile apps development framework made by Google called Angular.

Building a Food Recipes Mobile App with Ionic 3x and Angular 5

This tutorial is part of a serious of tutorials

Ionic app Themes and Styles

Ionic apps support themes by default. The easiest way to change app theme is to update the $colors map in src/theme/variables.scss file.

Ionic App Themes

The fastest way to change the theme of your Ionic app is to set a new value for primary, since Ionic uses the primary color by default to style most components. Colors can be removed from the map if they aren’t being used, but primary should not be removed.

$colors: (
  primary:    #CF0000,
  secondary:  #F53D3D,
  danger:     #f53d3d,
  light:      #F5F5F5,
  dark:       #2D3238, 
);

Ionic Angular App Themes and Colors

You can also add custom colors in the $colors map

$colors: (
  primary:    #CF0000,
  secondary:  #F53D3D,
  danger:     #f53d3d,
  light:      #F5F5F5,
  dark:       #2D3238,
  twitter:    #55acee 
);

Ionic makes the $colors keys available as a property to many components. For example, to use our twitter color, add the key as a property:

<button ion-button color="twitter">Twitter Button</button>

You can also use the color function to access any of the $colors in your custom styles:

my-custom-component {
    background: color($colors, twitter, base);
}

The color function will look up the right color based on the map and the compile output would be similar to the following:

my-custom-component {
    background: #55acee;
}

Sass Variables

If you are not familiar with Sass then you may have found $colors map declaration little confusing. I will recommend you to learn more about Sass language here. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. One of its features is to declare Sass variables once and use it in multiple places. Variables begin with dollar signs and are set like CSS properties. You can change the value of the variable in one place, and all instances where it is used will be changed, too. For example, if you wanted to set the same height for two different selectors, you could create a variable called $control-height:

$control-height: 40px;

Then, you can use this variable in multiple places.

.header {
    height: $control-height;
}

.sub-header {
    height: $control-height;
}

When translated to CSS, it becomes the following:

.header {
    height: 40px;
}
.sub-header {
    height: 40px;
}

This is extremely useful if you later decide to change the controls height, you only have to update the $control-height variable in one place. Sass variables go hand in hand with Ionic. You can modify the Sass variables directly, so that they update entire app quickly and the CSS file that gets generated has the customization you want.

Customizing app Sidebar

It is time to customize the side bar of our app. Open the app.components.ts file map from src/app folder and you will see the following array of pages declared MyApp component.

pages: Array<{title: string, component: any}>;

You will also notice the following definition of pages array. Every page has a title and a component associated with it. Ionic uses this pages array to create side bar navigation in Ionic apps.

this.pages = [
    { title: 'Home', component: HomePage },
    { title: 'List', component: ListPage }
];

Rename the List page title to Recipes and save the file and you will notice that your updated title will automatically be displaced in the app sidebar in browser.

this.pages = [
    { title: 'Home', icon:'md-home', component: HomePage },
    { title: 'Recipes', icon:'md-cafe',component: ListPage }
];

You can also change the app title by opening the app.html file from src/app folder and updated the value shown in the ion-title element. To change the appearance of the side bar you need to associate a class e.g. my-sidemenu to it. Notice how the Angular ngFor loop is used to iterate over the array of pages we have seen above.

<ion-menu [content]="content" type="push" side="left" class="my-sidemenu">
  <ion-header>
    <ion-toolbar>
      <ion-title>Recipes App</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

Finally, you need to define few styles to customize the look and feel of app sidebar. Open the app.scss file from src/app folder and define following styles in it.

.my-sidemenu .content{
    background-color: #CF0000;
}
.my-sidemenu .toolbar .toolbar-background {
    background-color: #2D3238;
}
.my-sidemenu .toolbar .toolbar-title {
    color: #FFFFFF;
}
.my-sidemenu .content .list {
    background-color: transparent;
}
.my-sidemenu .content .list .item {
    background-color: transparent;
    color: #FFFFFF;
}
.my-sidemenu .content .list .item .item-inner {
    margin-left: 8px;
}

After above changes, our food recipes app will look like the following screenshot.

Ionic Angular App Sidebar with Theme

Customizing app Navbar

It is time to customize our food recipes app navigation bar. Open the app.html file from src/app folder and add a class my-navbar to the ion-nav component.

<ion-nav [root]="rootPage" #content swipeBackEnabled="false" class="my-navbar"></ion-nav>

Define the following styles in app.scss file to customize the navigation bar.

.my-navbar .toolbar .toolbar-background {
    background-color: #2D3238;
}
.my-navbar .toolbar-content .toolbar-title {
    color: #FFFFFF;
}
.my-navbar .toolbar .icon {
    color: #FFFFFF;
}
.my-navbar .back-button-text{
    color: #FFFFFF;
}

Ionic Angular App Navbar Theme

In this part of the tutorial series, you have learned how to use Themes and Styles in Ionic Apps. You have also learned about customizing sidebar and navbar of Ionic app. In Part 3, we will learn how to create pages in Ionic apps and how to provide navigation of newly created pages. 

This tutorial is part of a serious of tutorials


 

 

About author


User avatar

Waqas Anwar

Founder of EzzyLearning.com, Senior Consultant, Microsoft .NET and Web Technologies

Add Comment