IONIC 4 Snippet

ionic4snippet.md

https://www.joshmorony.com/the-ionic-4-migration-survival-guide/

this.router.navigateByUrl('/login');
this.router.navigate(['/detail', { id: itemId }]);
this.router.navigateByUrl(`/detail/${todo.id}`);

this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });

this.navCtrl.navigateForward('/route');
this.navCtrl.navigateBack('/route');
this.navCtrl.navigateRoot('/route');


const routes: Routes = [
  { path: 'login', component: LoginPage },
  { path: 'home', component: HomePage },
  { path: 'detail/:id', component: DetailPage },
  { path: '', redirectTo: '/login', pathMatch: 'full'}
];


const routes: Routes = [
  { path: 'login', loadChildren: './pages/login/login.module#LoginModule' },
  { path: 'home', loadChildren: './pages/home/home.module#HomeModule' },
  { path: 'detail/:id', loadChildren: './pages/detail/detail.module#DetailModule' },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
];

<ion-item [routerLink]="'/detail/' + item.id" routerDirection="forward">
<ion-item [href]="'/detail/' + todo.id">

Master-Detail

<ion-item [href]="'/detail/' + todo.id">
this.router.navigate(['/detail', { id: itemId }]);
this.router.navigateByUrl(`/detail/${todo.id}`);

export class DetailPage {
  private todo;
  constructor(private route: ActivatedRoute, private todoService: TodoService){  }
  ionViewWillEnter(){
    let todoId = this.route.snapshot.paramMap.get('id');
    this.todo = this.todoService.getTodo(todoId);
  }
}

pass data to modal via params

@Component()
export class SomeParentComponent {
  constructor(public modalController: ModalController) {}

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { 
        foo: 'hello',
        bar: 'world'
      }
    });
    return await modal.present();
  }
}


@Component()
export class ModalPage implements OnInit {
@Input() foo:any;
@Input() bar:any;

  ngOnInit() {
    console.log(`${foo} ${bar}`)
  }
}

html change

<button ion-button> to <ion-button>
 
<ion-navbar> to <ion-toolbar>

<ion-buttons end> to <ion-buttons slot="end">

replace (click) handlers with routerLink

ionViewDidLoad then you should swap them out for their Angular counterparts like ngOnInit or ngAfterViewInit

How to Pass Data to Modals in Ionic 4

Parent Component

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';

@Component()
export class SomeParentComponent {
  constructor(public modalController: ModalController) {}

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { 
        foo: 'hello',
        bar: 'world'
      }
    });
    return await modal.present();
  }
}

Modal Page Component

import { Component, OnInit } from '@angular/core';

@Component()
export class ModalPage implements OnInit {
  foo;
  bar;

  ngOnInit() {
    console.log(`${foo} ${bar}`)
  }
}

Build release

ionic cordova run android
ionic cordova run android --buildConfig=build.json
ionic cordova run android --prod --release -- -- --gradleArg=-PcdvBuildMultipleApks=true
ionic cordova run android --prod --release -- -- --keystore=filename.keystore --alias=myalias
ionic cordova run android --prod --release -- -- --minSdkVersion=21
ionic cordova run android --prod --release -- -- --versionCode=55
ionic cordova run android --prod --release --buildConfig=build.json
ionic cordova run android -l
ionic cordova run ios
ionic cordova run ios --buildConfig=build.json
ionic cordova run ios --livereload
ionic cordova run ios --livereload-url=http://localhost:8100
ionic cordova run ios --prod --release
ionic cordova run ios --prod --release -- --developmentTeam="ABCD" --codeSignIdentity="iPhone Developer" --packageType="app-store"
ionic cordova run ios --prod --release --buildConfig=build.json