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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^