{"id":5157,"date":"2019-09-16T21:34:39","date_gmt":"2019-09-16T19:34:39","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=5157"},"modified":"2019-09-16T21:34:39","modified_gmt":"2019-09-16T19:34:39","slug":"ionic-cookbook","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2019\/09\/16\/ionic-cookbook\/","title":{"rendered":"Ionic | Cookbook"},"content":{"rendered":"\n

Routing and Navigation<\/h2>\n\n\n\n

Basic Angular Router configuration<\/strong><\/h3>\n\n\n\n

Create a routing module that is ‘visible’ to all components in your app<\/h4>\n\n\n\n
\n
\n

With Angular CLI<\/p>\n<\/div>\n\n\n\n

\n
ng generate module app-routing<\/pre>\n\n\n\n
<\/p>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
With Ionic<\/p>\n<\/div>\n\n\n\n
\n
ionic start my-app blank --type=angular<\/pre>\n<\/div>\n<\/div>\n\n\n\n
Match URL paths to Pages\/Components<\/h4>\n\n\n\n
app-routing.modules.ts<\/strong><\/p>\n\n\n\n
const routes: Routes = [\n    { path: '', redirectTo: '\/home', pathMatch: 'full' },\n    { path: '**', redirectTo: '\/home', pathMatch: 'full' },\n    { path: 'home',  loadChildren: '.\/home\/home.module#HomePageModule'    },\n    { path: 'list',  loadChildren: '.\/list\/list.module#ListPageModule'    },\n    { path: 'about', loadChildren: '.\/about\/about.module#AboutPageModule' }\n]<\/pre>\n\n\n\n
Update routing module imports and exports<\/h4>\n\n\n\n
app-routing.modules.ts<\/strong><\/p>\n\n\n\n
imports { RouterModule, Routes } from '@angular\/routes';<\/pre>\n\n\n\n
@NgModule({\n    imports: [RouterModule.forRoot(routes)],\n    exports: [RouterModule]\n})<\/pre>\n\n\n\n
Do not forget to import the routing module to you main app module<\/strong><\/h4>\n\n\n\n
app.module<\/strong><\/p>\n\n\n\n
import { AppRoutingModule } from '.\/app-routing.module';<\/pre>\n\n\n\n
imports:[\n    AppRoutingModule\n]<\/pre>\n\n\n\n
Add a router-outlet to indicate where the pages will be rendered<\/h4>\n\n\n\n
app.component.html<\/strong><\/p>\n\n\n\n
<router-outlet><\/router-outlet><\/pre>\n\n\n\n
Basics<\/h3>\n\n\n\n
src\/app\/app-routing.module.ts<\/strong><\/p>\n\n\n\n
const routes: Routes = [\n   { path: 'hello', component: HelloPage }\n];<\/pre>\n\n\n\n
app.component.html<\/strong><\/p>\n\n\n\n
<router-outlet><\/router-outlet><\/pre>\n\n\n\n
  \/\/ Regular Route\n  { path: 'eager', component: MyComponent },\n\n  \/\/ Lazy Loaded Route (Page)\n  { path: 'lazy', loadChildren: '.\/lazy\/lazy.module#LazyPageModule' },\n\n    \/\/ Redirect\n  { path: 'here', redirectTo: 'there', pathMatch: 'full' }\n];<\/pre>\n\n\n\n
<ion-button href=\"\/hello\">Hello<\/ion-button>\n<a routerLink=\"\/hello\">Hello<\/a><\/pre>\n\n\n\n
<a [routerLink]=\"['\/product',product.id]\"><\/a><\/pre>\n\n\n\n
Navigate Programmatically<\/h3>\n\n\n\n
import { Component } from '@angular\/core';\nimport { Router } from '@angular\/router';\n\n@Component({ ... })\nexport class HomePage {\n  constructor(private router: Router) {}\n\n  go() {\n    this.router.navigateByUrl('\/animals');\n  }\n}<\/pre>\n\n\n\n
Navigate to Dynamic URLS<\/h3>\n\n\n\n
const routes: Routes = [\n  \/\/ Regular Route\n  { path: 'items\/:id', component: MyComponent },\n];<\/pre>\n\n\n\n
<ion-button href=\"\/items\/abc\">ABC<\/ion-button>\n<ion-button href=\"\/items\/xyz\">XYZ<\/ion-button><\/pre>\n\n\n\n
Passing parameter<\/h3>\n\n\n\n
Passing parameter with state service<\/h4>\n\n\n\n
export class ComponentA {\n   constructor(private stateService: StateService) {}\n   goToComponentB(): void {\n        this.stateService.data = {...};\n        this.router.navigate(['\/b']);\n    }\n}\nexport class ComponentB implements OnInit {\n    constructor(private stateService: StateService) {}\n    ngOnInit(): void {\n        this.data = this.stateService.data;\n        this.stateService.data = undefined;\n    }\n}<\/pre>\n\n\n\n
Passing parameter in link<\/h4>\n\n\n\n
export class ComponentA {\n   constructor(private router: Router) {}\n   \n   goToComponentB(): void {\n      this.router.navigate(['\/b'], {state: {data: {...}}});\n   }\n}<\/pre>\n\n\n\n
go() {\n   this.router.navigate(['..\/list'], { relativeTo: this.route });\n}<\/pre>\n\n\n\n
Passing parameter in routerlink directive<\/h4>\n\n\n\n
<a [routerLink]=\u201d\/b\u201d [state]=\u201d{ data: {...}}\u201d>Go to B<\/a><\/pre>\n\n\n\n
Extracting the data<\/h4>\n\n\n\n
The state property was added to Navigation<\/a><\/code> which is available through Router.getCurrentNavigation().extras.state<\/a><\/code>.<\/p>\n\n\n\n
Problem is that getCurrentNavigation <\/code>returns Navigation <\/code>only during<\/em><\/strong> the navigation and returns null <\/code>after the navigation ended. So the Navigation<\/code>is no longer available in Component\u2019s B onInit<\/code> lifecycle hook. We need to read the data from browser\u2019s history object:<\/p>\n\n\n\n
history.state.data<\/pre>\n\n\n\n
Extract Data from Routes with ActivatedRoute<\/h3>\n\n\n\n
When working with dynamic data, you need to extract the params from the URL.<\/p>\n\n\n\n
For example, you might want to read from the database when the user navigates to \/items\/:id<\/code>, using the ID from the route to make a query. <\/p>\n\n\n\n
Angular has an ActivatedRoute<\/a> service that allows us to grab information from the current route as a plain object or Observable.<\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\nimport { ActivatedRoute } from '@angular\/router';\n\n@Component({ ... })\nexport class ProfileComponent implements OnInit {\n\n  id: string;\n\n  constructor(private route: ActivatedRoute) {}\n\n  ngOnInit() {\n    this.id = this.route.snapshot.paramMap.get('id');\n  }\n}<\/pre>\n\n\n\n
Or if we need to react to changes, we can subscribe to an Observable.<\/p>\n\n\n\n
ngOnInit() {\n   this.route.paramMap.subscribe(params => {\n      this.products.forEach((p: Product) => {\n        if (p.id == params.id) {\n          this.product = p;\n        }\n      });\n    });\n}<\/pre>\n\n\n\n
ngOnInit() {\n   this.products.forEach((p: Product) => {\n      if (p.id == this.route.snapshot.params.id) {\n         this.product = p;\n      }\n   });\n}<\/pre>\n\n\n\n
Migrate from Ionic X to Ionic 4 Routing<\/h3>\n\n\n\n
Set Root<\/strong><\/p>\n\n\n\n
<ion-button href=\"\/support\" routerDirection=\"root\"><\/pre>\n\n\n\n
or in class<\/p>\n\n\n\n
this.navCtrl.navigateRoot('\/support');\n<\/pre>\n\n\n\n
Push<\/strong><\/p>\n\n\n\n
<ion-button href=\"\/products\/12\" routerDirection=\"forward\"><\/pre>\n\n\n\n
this.navCtrl.navigateForward('\/products\/12');<\/pre>\n\n\n\n
Pop<\/strong><\/p>\n\n\n\n
<ion-button href=\"\/products\" routerDirection=\"backward\"><\/pre>\n\n\n\n
<ion-back-button defaultHref=\"\/products\"><\/ion-back-button><\/pre>\n\n\n\n
Navigate backwards programatically:<\/p>\n\n\n\n
this.navCtrl.navigateBack('\/products');<\/pre>\n\n\n\n
Routing in Tabs<\/h3>\n\n\n\n
{\n  path: 'contact',\n  outlet: 'modal',\n  component: ContactModal\n}<\/pre>\n\n\n\n
http:\/\/...\/(modal:contact)<\/pre>\n\n\n\n
Lazy Loading<\/h3>\n\n\n\n
Code Snippets<\/h4>\n\n\n\n
\/\/ home.module.ts\n@NgModule({\n  imports: [\n    IonicModule,\n    RouterModule.forChild([{ path: '', component: HomePage }])\n  ],\n  declarations: [HomePage]\n})\nexport class HomePageModule {}<\/pre>\n\n\n\n
\/\/ app.module.ts\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    IonicModule.forRoot(),\n    RouterModule.forRoot([\n      { path: 'home', loadChildren: '.\/pages\/home\/home.module#HomePageModule' },\n      { path: '', redirectTo: 'home', pathMatch: 'full' }\n    ])\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}<\/pre>\n\n\n\n
Code Snippet<\/h4>\n\n\n\n
app-routing.module.ts<\/h5>\n\n\n\n
const routes: Routes = [\n  { path: 'about', loadChildren: '.\/about\/about.module#AboutPageModule' },\n];<\/pre>\n\n\n\n
about\/about.module.ts<\/h5>\n\n\n\n
const routes: Routes = [\n  { path: '', component: AboutPage },\n];<\/pre>\n\n\n\n
Using Guards<\/h3>\n\n\n\n
@Injectable({\n  providedIn: 'root'\n})\nexport class AuthGuard implements CanActivate {\n  constructor(private router: Router) {}\n\n  canActivate(\n    next: ActivatedRouteSnapshot,\n    state: RouterStateSnapshot\n  ): boolean {\n\n    const loggedIn = false; \/\/ replace with actual user auth checking logic\n\n    if (!loggedIn) {\n      this.router.navigate(['\/']);\n    }\n\n    return loggedIn;\n  }\n}<\/pre>\n\n\n\n
const routes: Routes = [\n  { path: 'special', component: SpecialPage, canActivate: [AuthGuard] },\n];<\/pre>\n\n\n\n
Troubleshooting of Routing<\/h3>\n\n\n\n
Enable tracing<\/h4>\n\n\n\n
 @NgModule({\n    imports: [\n        RouterModule.forRoot(routes, \n            { enableTracing: true }\n        )],\n    exports: [RouterModule],\n})\nexport class AppRoutingModule {}<\/pre>\n\n\n\n
Common Errors and mistakes<\/h4>\n\n\n\n
Placing global routing patterns at the front ot routing array<\/strong><\/p>\n\n\n\n
const routes: Routes = [\n    { path: '', redirectTo: '\/home', pathMatch: 'full' },\n    { path: '**', redirectTo: '\/home', pathMatch: 'full' },\n    { path: 'home', component: HomePageComponent },\n<\/pre>\n\n\n\n
Finding the right path is a sequential process in search all entries in route[] and select the first with a matting path. So, in our wrong example, every path matches the common pattern ‘**’.<\/p>\n\n\n\n
Solution: Put this matting pattenr at the end of the routes[] array<\/p>\n\n\n\n
const routes: Routes = [\n    { path: '', redirectTo: '\/home', pathMatch: 'full' },\n    { path: 'home', component: HomePageComponent },\n    { path: '**', redirectTo: '\/home', pathMatch: 'full' },<\/pre>\n\n\n\n
Storage<\/h2>\n\n\n\n
Configuration <\/h3>\n\n\n\n
import { IonicStorageModule } from '@ionic\/storage';\n\n@NgModule({\n  declarations: [\n    \/\/ ...\n  ],\n  imports: [\n    BrowserModule,\n    IonicModule.forRoot(MyApp),\n    IonicStorageModule.forRoot()\n  ],\n  bootstrap: [IonicApp],\n  entryComponents: [\n    \/\/ ...\n  ],\n  providers: [\n    \/\/ ...\n  ]\n})\nexport class AppModule {}<\/pre>\n\n\n\n
Finally, inject it into any of your components or pages:\n\nimport { Storage } from '@ionic\/storage';\n\nexport class MyApp {\n  constructor(private storage: Storage) {\n      storage.set('name', 'Max');\n\n      storage.get('age').then((val) => {\n          console.log('Your age is',  val);\n});\n}\n}<\/pre>\n\n\n\n
Code sample<\/h3>\n\n\n\n
class MyClass {\n  constructor(public storage: Storage) {}\n\n  async setData(key, value) {\n    const res = await this.storage.set(key, value);\n    console.log(res);\n  }\n\n  async getData(key) {\n    const keyVal = await this.storage.get(key);\n    console.log('Key is', keyVal);\n  }\n}<\/pre>\n\n\n\n
Storage with Capacitor <\/h2>\n\n\n\n
import { Plugins } from '@capacitor\/core';\n\nconst { Storage } = Plugins;\n\nasync setObject() {\n  await Storage.set({\n    key: 'user',\n    value: JSON.stringify({\n      id: 1,\n      name: 'Max'\n    })\n  });\n}\n\nasync getObject() {\n  const ret = await Storage.get({ key: 'user' });\n  const user = JSON.parse(ret.value);\n}\n\nasync setItem() {\n  await Storage.set({\n    key: 'name',\n    value: 'Max'\n  });\n}\n\nasync getItem() {\n  const value = await Storage.get({ key: 'name' });\n  console.log('Got item: ', value);\n}\n\nasync removeItem() {\n  await Storage.remove({ key: 'name' });\n}\n\nasync keys() {\n  const keys = await Storage.keys();\n  console.log('Got keys: ', keys);\n}\n\nasync clear() {\n  await Storage.clear();\n}<\/pre>\n\n\n\n
Components<\/h2>\n\n\n\n
Alerts<\/h3>\n\n\n\n
Code Snippets <\/h4>\n\n\n\n
showAlert() {\n  this.alertCtrl.create({\n    message: \"Hello There\",\n    subHeader: \"I'm a subheader\"\n  }).then(alert => alert.present());\n}\n\n\/\/ Or using async\/await\n\nasync showAlert() {\n  const alert = await this.alertCtrl.create({\n    message: \"Hello There\",\n    subHeader: \"I'm a subheader\"\n  });\n\n  await alert.present();\n}<\/pre>\n\n\n\n
Local Notifications<\/h2>\n\n\n\n
import { Plugins } from '@capacitor\/core';\nconst { LocalNotifications } = Plugins;\n\nLocalNotifications.schedule({\n  notifications: [\n    {\n      title: \"Title\",\n      body: \"Body\",\n      id: 1,\n      schedule: { at: new Date(Date.now() + 1000 * 5) },\n      sound: null,\n      attachments: null,\n      actionTypeId: \"\",\n      extra: null\n    }\n  ]\n});<\/pre>\n\n\n\n
Custom Components<\/h2>\n\n\n\n
Create custom component<\/h3>\n\n\n\n
$ ionic generate component components\/Sample\n> ng generate component components\/Sample\nCREATE src\/app\/components\/sample\/sample.component.scss (0 bytes)\nCREATE src\/app\/components\/sample\/sample.component.html (25 bytes)\nCREATE src\/app\/components\/sample\/sample.component.spec.ts (628 bytes)\nCREATE src\/app\/components\/sample\/sample.component.ts (270 bytes)\nUPDATE src\/app\/components\/components.module.ts (621 bytes)\n[OK] Generated component!\n<\/pre>\n\n\n\n
$ ionic generate module components\/Components --flat\n> ng generate module components\/Components --flat\nCREATE src\/app\/components\/components.module.ts (194 bytes)\n[OK] Generated module!\n<\/pre>\n\n\n\n
Modify selector for component in app\/components\/sample\/sample.component.ts<\/code><\/h3>\n\n\n\n
@Component({\n    selector: 'c-sample',\n    templateUrl: '.\/c-sample.component.html',\n    styleUrls: [ '.\/c-sample.component.scss' ]\n})\n<\/pre>\n\n\n\n
Rename files for component<\/h3>\n\n\n\n
cd src\/app\/components\/sample\nmv sample.component.html c-sample.component.scss\nmv sample.component.html c-sample.component.html\nmv sample.component.html c-sample.component.spec.ts\nmv sample.component.html c-sample.component.ts\n<\/pre>\n\n\n\n
Export created component in app\/components\/components.module.ts<\/code><\/h3>\n\n\n\n
import { NgModule } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\nimport { IonicModule } from '@ionic\/angular';\n\nimport { SampleComponent } from '.\/sample\/sample.component';\n\n@NgModule({\n    imports: [ CommonModule, IonicModule.forRoot(), ],\n    declarations: [ SampleComponent ],\n    exports: [ SampleComponent ],\n    entryComponents: [],\n})\nexport class ComponentsModule { }\n<\/pre>\n\n\n\n
Add page to display the component<\/h3>\n\n\n\n
$ ionic generate page pages\/Sample\n> ng generate page pages\/Sample\nCREATE src\/app\/pages\/sample\/sample.module.ts (543 bytes)\nCREATE src\/app\/pages\/sample\/sample.page.scss (0 bytes)\nCREATE src\/app\/pages\/sample\/sample.page.html (133 bytes)\nCREATE src\/app\/pages\/sample\/sample.page.spec.ts (691 bytes)\nCREATE src\/app\/pages\/sample\/sample.page.ts (256 bytes)\nUPDATE src\/app\/app-routing.module.ts (539 bytes)\n[OK] Generated page!<\/pre>\n\n\n\n
Add custom component to new page sample.page.html<\/code><\/h3>\n\n\n\n
<ion-content padding>\n    <c-sample><\/c-sample>\n<\/ion-content><\/pre>\n\n\n\n
Register components module in sample.module.ts<\/code><\/h3>\n\n\n\n
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\nimport { FormsModule } from '@angular\/forms';\nimport { Routes, RouterModule } from '@angular\/router';\nimport { IonicModule } from '@ionic\/angular';\n\nimport { ComponentsModule } from 'src\/app\/components\/components.module';\nimport { SamplePage } from '.\/sample.page';\n\nconst routes: Routes = [ { path: '', component: SamplePage } ];\n\n@NgModule({\n    declarations: [SamplePage],\n    imports: [\n        CommonModule,  IonicModule,\n        RouterModule.forChild(routes),\n        ComponentsModule\n    ],\n    schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class SamplePageModule {}<\/pre>\n\n\n\n
Check Routing in app-routing.modules.ts<\/code><\/h3>\n\n\n\n
const routes: Routes = [\n  { path: '', redirectTo: 'home', pathMatch: 'full' },\n  { path: 'home',   loadChildren: '.\/pages\/home\/home.module#HomePageModule' },\n  { path: 'list',   loadChildren: '.\/pages\/list\/list.module#ListPageModule' },\n  { path: 'sample', loadChildren: '.\/pages\/sample\/sample.module#SamplePageModule' }\n];\n<\/pre>\n\n\n\n
Add new page to sidemenu in app.components.ts<\/code><\/h3>\n\n\n\n
  public appPages = [\n    { title: 'Home', url: '\/home', icon: 'home' },\n    { title: 'List', url: '\/list', icon: 'list' },\n    { title: 'Sample Component', url: '\/sample', icon: 'list' }\n  ];<\/pre>\n\n\n\n
Directives<\/h2>\n\n\n\n
Pipes<\/h2>\n\n\n\n
<\/p>\n\n\n\n
HTML Elements<\/h2>\n\n\n\n
Access HTML Element from Page Class<\/h3>\n\n\n\n
<div #box><\/div><\/pre>\n\n\n\n
@ViewChild('box', {static: false}) el_box:ElementRef;\nbox: any;\n\nconstructor() {\n    this.box = this.el_box.nativeElement;\n}<\/pre>\n\n\n\n
Grabbing Ionic Components with ViewChild<\/h3>\n\n\n\n
Let\u2019s imagine we have a HomePage<\/code> component that looks like this and we want to close the menu when an item is clicked.<\/p>\n\n\n\n
<ion-menu>\n<\/ion-menu><\/pre>\n\n\n\n
Our goal is to access the ion-menu<\/code> from the TypeScript code so we can call its API methods, like open()<\/code> and close()<\/code>.<\/p>\n\n\n\n
import { Component, ViewChild } from '@angular\/core';\nimport { Menu } from '@ionic\/angular';\n\n@Component(...)\nexport class HomePage {\n\n  @ViewChild(Menu, {static: false})) menu: Menu;\n\n  onDrag() {\n    this.menu.close();\n  }\n}<\/pre>\n\n\n\n
Explanation:<\/strong><\/p>\n\n\n\n
{ static: false }<\/p><\/blockquote>\n\n\n\n
If you set static false<\/strong>, the component ALWAYS gets initialized after the view initialization in time for the ngAfterViewInit\/ngAfterContentInit<\/code> callback functions.<\/p>\n\n\n\n
{ static: true}<\/p><\/blockquote>\n\n\n\n
If you set static true<\/strong>, the initialization will take place at the view initialization at ngOnInit<\/code><\/p>\n\n\n\n
Shortcut: Use Template Variables<\/h3>\n\n\n\n
There\u2019s actually a very convenient shortcut to using ViewChild in a component. We never have to leave the HTML by setting a template variable in Angular. In this example we reference the menu component with a hashtag and variable name #mymenu<\/code>.<\/p>\n\n\n\n
<ion-menu #mymenu>\n  <ion-item (click)=\"mymenu.close()\"><\/ion-item><\/pre>\n\n\n\n
Grabbing Multiple Components with ViewChildren<\/h3>\n\n\n\n
You might also run into a situation where there are multiple components of the same type on the page, such as multiple FABs:<\/p>\n\n\n\n
<ion-fab><\/ion-fab>\n<ion-fab><\/ion-fab>\n<ion-fab><\/ion-fab><\/pre>\n\n\n\n
ViewChildren<\/code> is almost the same, but it will grab all elements that match this component and return them as an Array.<\/p>\n\n\n\n
import { Component, ViewChildren } from '@angular\/core';\nimport { Fab } from '@ionic\/angular';\n\n@Component(...)\nexport class HomePage {\n\n  @ViewChildren(Fab, {static: false})) fabs: Fab[];\n\n\n  closeFirst() {\n    this.fabs[0].close();\n  }\n}<\/pre>\n\n\n\n
Now that you know about ViewChild<\/code>, you should have no problem accessing the API methods found on Ionic\u2019s web components.<\/p>\n\n\n\n
Loops in HTML Elements<\/h2>\n\n\n\n
<ul>\n   <li *ngFor=\"let number of [0,1,2,3,4]\">\n      {{number}}\n   <\/li>\n<\/ul><\/pre>\n\n\n\n
<ul>\n  <li *ngFor='#key of [1,2]'>\n    {{key}}\n  <\/li>\n<\/ul><\/pre>\n\n\n\n
<ul>\n  <li *ngFor='#val of \"0123\".split(\"\")'>{{val}}<\/li>\n<\/ul><\/pre>\n\n\n\n
<ul>\n  <li *ngFor='#val of counter(5) ;#i= index'>{{i}}<\/li>\n<\/ul>\n\nexport class AppComponent {\n  demoNumber = 5 ;\n\n  counter = Array;\n\n  numberReturn(length){\n    return new Array(length);\n  }\n}<\/pre>\n\n\n\n
Display Array<\/h3>\n\n\n\n
<ion-grid class=\"board\">\n  <ion-row *ngFor=\"let r of [0,1,2]\">\n    <ion-col col-4 class=\"cell\" *ngFor=\"let c of [0,1,2]\" (click)=\"handle(c+r*3)\">\n            {{squares[c+r*3]}}\n    <\/ion-col>\n  <\/ion-row>\n<\/ion-grid><\/pre>\n\n\n\n
Add function to Button click<\/h3>\n\n\n\n
<ion-item (click)=\"onClick($event)\"><\/pre>\n\n\n\n
onClick(ev: any){\n\tthis.log('onClick', 'event=' + ev);\n}<\/pre>\n\n\n\n
Change CSS class on click<\/h3>\n\n\n\n
Add handler to html element <\/p>\n\n\n\n
<a class=\"btn\" (click)='toggleClass($event)'>\n    <ion-icon class=\"icon\" name=\"bluetooth\"><\/ion-icon>\n<\/a><\/pre>\n\n\n\n
Import Render2 in page.ts<\/p>\n\n\n\n
import { Component, OnInit, Renderer2 } from '@angular\/core';\n...\n\nconstructor(private renderer: Renderer2) { }<\/pre>\n\n\n\n
Write handler to toggle class<\/p>\n\n\n\n
toggleClass(event: any) {\n    const classname = 'active';\n\n    if (event.target.classList.contains(classname)) {\n        this.renderer.removeClass(event.target, classname);\n    } else {\n        this.renderer.addClass(event.target, classname);\n    }\n}<\/pre>\n\n\n\n
Migrating to Ionic 4<\/h2>\n\n\n\n
Replace Http Module with HttpClient<\/h3>\n\n\n\n
Changes in  app.module.ts<\/p>\n\n\n\n
\n
\n
<\/pre>\n<\/div>\n\n\n\n
\n
import { HttpClientModule } from '@angular\/common\/http';<\/pre>\n\n\n\n
@NgModule({\n    declarations: [AppComponent],\n    entryComponents: [],\n    imports: [\n        ...\n        HttpClientModule\n        ...\n    ],<\/pre>\n<\/div>\n<\/div>\n\n\n\n
Changes in  service.ts<\/p>\n\n\n\n
\n
\n
import { Http } from '@angular\/http';<\/pre>\n<\/div>\n\n\n\n
\n
import { HttpClient } from '@angular\/common\/http';<\/pre>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
constructor(public http: Http) { }<\/pre>\n<\/div>\n\n\n\n
\n
constructor(public httpClient: HttpClient) { }<\/pre>\n<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n
\n
Troubleshooting<\/h2>\n\n\n\n
ERROR: Unexpected end of JSON input while parsing near<\/h4>\n\n\n\n
npm cache clean --force\nnpm install -g @angular\/cli<\/pre>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
Routing and Navigation Basic Angular Router configuration Create a routing module that is ‘visible’ to all components in your app With Angular CLI With Ionic Match URL paths to Pages\/Components app-routing.modules.ts Update routing module imports and exports app-routing.modules.ts Do not forget to import the routing module to you main app module app.module Add a router-outlet to indicate where the pages will be rendered app.component.html Basics src\/app\/app-routing.module.ts app.component.html Navigate Programmatically Navigate to Dynamic URLS Passing parameter Passing parameter with state service Passing parameter in link Passing parameter in routerlink directive Extracting the data The state property was added to Navigation which is available through Router.getCurrentNavigation().extras.state. […]<\/p>\n","protected":false},"author":1,"featured_media":318,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[16,98,35],"tags":[],"class_list":["post-5157","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cookbook","category-ionic","category-ionic-4"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2016\/12\/ionic_1.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/5157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=5157"}],"version-history":[{"count":0,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/5157\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/318"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=5157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=5157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=5157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}