Posts

How to navigate to another page in ionic | Navigation in ionic

How to navigate to another page in ionic Angular navigation plays most important role in ionic app.The Angular Router is one of the most important libraries in an Angular application. Without navigation, apps would be single view/single context apps or would not be able to maintain their navigation state on browser reloads. There are different ways to navigate from one page to another page. Initially our app-routing.module.ts file look like below. path: ' ' , load index page and redirect to home page. import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)}, { path: 'slideshow', loadChildren: './slideshow/slideshow.module#SlideshowPageModule'}, @NgMod
2 comments
Read more

How create login page in ionic with round input type?

Image
How create login Page in Ionic with round input type. As we have discussed how to create a new project in previous section. Now we will see how create a new page for login with rounded input type and button.Go to the created project(myApplication) and write the command below - C:\Users\USERNAME\IonicProject\myApplication>ionic g page login(pagename) We then notice that created page in app folder has login.page.ts , login.page.html , login.page.scss and login.module.ts files. Our html page will look like below: <ion-header> <ion-toolbar> <ion-title>login</ion-title> </ion-toolbar> </ion-header> <section class="log_banner"> <div class="container"> <div class="logo-center2"> <img src="assets/images/logo.png"> </div> <div class="logo-center1"> <form> <input type="text" placeholder="Enter Email" name="email" require
2 comments
Read more

What is ionic framework?

Image
Ionic Framework: Ionic Framework is an open source UI toolkit for building high-quality well performing mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).Ionic Framework is focused on the front-end user experience, or UI interaction of an app (controls, interactions, gestures, animations). It is very easy to learn, and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a front-end framework using a simple script include. Ionic 3 vs ionic 4: 1.There are great changes in the navigation and in the Router, which are a big update. 2. Ionic 3 used a navigation based on a simple stack where the new pages were pushed on top of the stack and when we wanted to navigate backwards we simply made a pop of the last page. 3. In Ionic 4 The Angular Router is one of the most important libraries from an Angular application. Without it, apps would not be able to maintain their navigation state on br
1 comment
Read more

How install Ionic and develop first Ionic application || What is Ionic Framework || Ionic Framework Tutorial

Image
How Install Ionic:  Before proceeding we must have to download and install node.js (recommended for most users), make sure the latest version of Node.js and npm are installed. To check version, type on command prompt.  node --version npm--version Install the Ionic CLI (Command Line Interface) $ npm install -g ionic  // write on command prompt g here stands for globally and  npm - node package manager. All required packages are downloaded to the system.  What is ionic CLI? The Ionic CLI is built with TypeScript and Node.js. CLI is a inbuilt tool provide interface to developer such as installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. Start an App : Ionic provide two default template or starter tabs and sidemenu . We can use blank for fresh blank project. Create an Ionic app using one of the pre-made app templates, or a blank one to start fresh. The three most common starters are
Post a Comment
Read more