{"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 […]<\/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}]}}