python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

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