Stack Navigation In Onsen UI Using Angular7 Framework

In this tutorial, I am going to teach you how to implement the stack navigation in Onsen UI using angular7.

This tutorial is about Onsen UI and Angular framework. So, you should be familiar with Angular Framework before going to this tutorial.

Prerequisites:

  1. You should have installed Nodejs.
  2. You must be familiar with Javascript fundamentals(Arrays, Objects, Functions, etc..)

And I am dividing this tutorial into different sections such as

  1. Creating an Angular App
  2. Installing OnsenUI
  3. Setting Up Onsen UI app for Angular
  4. Navigation between pages

Ok, let’s get started.

Source code available here.

1.Creating an Angular App

You can quickly make an angular app using npm tool called angular-cli.

The angular-cli provides various commands to initialize, building, scaffolding and maintaining your angular applications.

Installing angular-cli

Type the following command in command prompt/terminal to install angular-cli.

npm install -g @angular-cli

Next, run the below command to create a new Angular application.

ng new onsen_angular

Next, it will ask that you want to add angular routing to your library or not.

stack navigation in onsen ui using angular 7 - routing prompt

Type y for yes and n for no then press enter.

Then it will ask you to select the CSS format. Select the default CSS format.

The rest will be done automatically by itself.

stack navigation in onsen ui and angular 7 - css prompting

To run the angular application go to the project directory and run the ng serve command.

cd onsen_angular

ng serve

Ok. Now you have installed and run the angular application.

2.Installing OnsenUI

Onsen UI is the best framework for building native-like mobile apps. It supports android and ios platforms.

It’s the best alternative for the Ionic framework. To read more about Onsen UI here is the link for you.

Installing Onsen UI

Step1: Open your Terminal/Command prompt.

Step2: Go to the project directory(angular application).

Ex: cd onsen_angular

Step3: Type the following command

npm install -g onsenui ngx --save

This is the only command you need to execute to install Onsen UI in your angular application.

Now you have installed angular and Onsen UI.

The easiest way to create an Onsen UI application is by installing Monaca CLI library. Monaca CLI library provides several commands to design, debug and build an Onsen UI applications. Using Monaca you can quickly create Onsen UI applications with Angular Js, Angular 2+, React and Vue.

But the major problem with this approach is, Monaca CLI is not working correctly in some windows terminals.

I tried this process in Windows 7 and Windows 10. I found it is not working as well.

If you are a Linux user, you can go with this approach.

Just install the Monaca-CLI library using the following command.

npm install monaca-cli.

Then type monaca new project_name.

It will prompt you to select the front-end framework and template.

Choose your front-end and the template. Then press enter.

Your Onsen UI app will be created within minutes.

3. Setting Up Onsen UI For Angular

In the previous sections, we have installed Angular and Onsen UI.

To make work Onsen UI for our Angular application, we need to load all the Onsen UI components into our Angular application.

Let’s do them step by step.

Step1: Importing OnsenModule to the root component.

Open the project folder in your favorite text editor. Then head over to the app.module.ts which is a root component.

Then add the following code at the top.

import { OnsenModule } from 'ngx-onsenui';

Now add the OnsenModule to the imports array.

imports: [ BrowserModule, AppRoutingModule, OnsenModule ],

This will load all the Onsen UI components into our Angular application.

Step2: Adding Custom elements schema

Next, we need to tell Angular that Onsen UI components are web components, not native components.

We can tell that by adding CUSTOM_ELEMENTS_SCHEMA.

Add the following code at the imports section.

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

Add CUSTOM_ELEMENTS_SCHEMA to schemas array.

Schemas:[
  CUSTOM_ELEMENTS_SCHEMA
]

Step3: Loading the CSS files of Onsen UI framework.

Go to style.css in your project folder.

Add the following lines in order at the top.

@import '../node_modules/onsenui/css/onsenui.css';
@import '../node_modules/onsenui/css/onsen-css-components.css';

That’s it. Now you have set up everything.

4. Navigating between pages.

Next, we are going to build the functionality to navigate between pages using the stack navigation feature of Onsen UI.

Onsen UI treats each component as an individual page in Angular framework. So, you don’t need to bother about creating pages. Just create components instead of pages.

Go to your project directory and create two components.

In my case, I have created two components such as first and second.

Creating components is an easy process. Just type the following commands in the terminal from your project folder.

ng new component first 
ng new component second

first.component.html

<ons-page>
<ons-toolbar> 
<div class="center"> First Page </div>
</ons-toolbar>
<div class="content">
<section style="margin:10px; text-align: center;">
<ons-button (click)="push()">Page2</ons-button>
</section>
</div>
</ons-page>

first.component.ts

import { Component, OnInit } from '@angular/core';
import { OnsNavigator } from 'ngx-onsenui';
import { SecondComponent } from '../second/second.component';
@Component({
selector: 'ons-page[app-first]',
templateUrl: './first.component.html',
styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {

constructor(private navigator: OnsNavigator) { }

ngOnInit() {
}

push(){
this.navigator.element.pushPage(SecondComponent);
}

}

Code Explanation:

  1. In the above code, first, we import OnsModule from ngx-onsen ui library.
  2. Then we imported the Second Module.
  3. Make sure that you wrap the value of the selector in ons-page[]. Because Onsen UI treats every component as a page in the Angular framework.
  4. Then we pass OnsNavigator as a dependency injection in a constructor function.
  5. Finally, we created a push method, which is to push the page to the top of the stack.

second.component.html

<ons-page>
    <ons-toolbar>

        <div class="center">

             Page2

        </div>          

    </ons-toolbar>

    <div class="content">

        <section style="margin-top:10px; text-align: center;">

                <ons-button (click)="pop()">Page1</ons-button>

        </section>

    </div>

</ons-page>

second.component.ts

import { Component, OnInit } from '@angular/core';
import { OnsNavigator } from 'ngx-onsenui';
import { FirstComponent } from '../first/first.component';

@Component({
selector:'ons-page[app-second]',
templateUrl:'./second.component.html',
styleUrls: ['./second.component.css']
})

export class SecondComponent implements OnInit {

constructor(privatenavigator:OnsNavigator) {

}

ngOnInit() {
}

pop(){
  this.navigator.element.popPage();
}
}

Code Explanation:

  1. In the above code, we import OnsNavigator and FirstComponent in the import section.
  2. Then we change the selector name to app-second to ons-page[app-second].
  3. Then we inject the OnsNavigator in the constructor function.
  4. Finally, we create a pop function which pops the page from the top of the stack.

Below are the sample screenshots for the above project.

When you run the application, you will get the following screen.

stack navigation in onsen ui and angular7 page2

If you click on the page2 button, you will get the below screen displayed.

stack navigation in onsen ui and angular7 page1

And if you click on the page1 button, you will get displayed with Page 1.

Hoping now you understand how to build the stack navigation in Onsen UI using Angular7. If you have any doubts, let me know in the comments section.

Thanks for reading!

Happy [email protected]

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes2
No0
Powered by Pixelbart

Leave a Reply

Your email address will not be published. Required fields are marked *