Generating New Pages in Angular 4 Ionic 3 CLI

Generating New Pages in Angular 4 Apps using Ionic 3 CLI!

Generating New Pages in Angular 4 Apps using Ionic 3 CLI and Manually

Let’s start adding new pages. The ionic generate command is used to create new structure and files automatically. We can also create new structure and files manually as per our requirements.

Syntax - ionic generate [<type>] [<name>]

Generated Command -


The given name is normalized into an appropriate naming convention. The given name is normalized into an appropriate naming convention. Ionic generate page login creates a page by the name of login-page and the directory- src/pages/login/

The entire generated files are looks like -
-        html
-        ts
-        scss



See the below screen for Login, Register and Users -


For example, you can see the above generated files in the project directory (src/pages/login) code looks like -

Login.html -
<ion-header>
  <ion-navbar>
    <ion-title>login</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding> </ion-content>

Login.module.ts –
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';

@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
  ],
})
export class LoginPageModule {}


login.scss-
page-login {
  .lnk{
      background-colorgray !important;
  }
}

Login.ts –
import { Component } from '@angular/core';
import { IonicPageNavControllerNavParams } from 'ionic-angular';

/**
 * Generated class for the Login page.
 */
@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(public navCtrlNavControllerpublic navParamsNavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }
}


I hope you are enjoying with this post! Please share with you friends. Thank you so much!

ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions