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
Stayed Informed -
Angular 4 Documents and Ionic 3 CLI Angular 4
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-color: gray !important;
}
}
Login.ts –
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the Login page.
*/
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
}
I hope you are enjoying with this post! Please share with you friends. Thank you so much!