Explore information related to ionic


How to use Ionic Auth Guard to Login and Rout to pages


This article will guide you on how to create Login and Routing to pages using #Ionic Auth Guard.
Auth-guard makes use of CanActivate interface and it checks for if the user is logged in or not. If it returns true, then the execution for the requested route will continue, and if it returns false, that the requested route will be kicked off and the default route will be shown.
To create a login page in ionic 4:
1. GETTING STARTED. After making sure you have the latest version on Ionic and Cordova installed, let's go and create an #app now and integrate authentication in it.
2. Update app/app. #module.
3. Create User Model.
4. Updating Services.
5. Add #Auth #Guard.
6. Update Pages.

Read More



Getting Device version and Device Name in Ionic


This article will guide you on how to get the Device’s version & Name in Ionic.
To Get #Device #version and Device Name in #Ionic:
1. Install cordova-plugin-device / @ionic-native/device : $ ionic #cordova plugin add cordova-plugin-device. 2. Install cordova-plugin-device-name : $ ionic cordova plugin add cordova-plugin-device-name.
3. Once the above two are installed/added to the #project, they should show up in the project's package.
In order to Display Version number on Ionic iOS and Android Builds:
i. Use the Supermodular2 starter app and set it all up and running.
ii. Use Ionic's plugin #App Version.
iii. Build the app and display the #version number.

Read More



Custom Component and Shared Module in Ionic


This article will guide you on how to create custom components and shared modules in Ionic App.
#IonicModule is an #NgModule that #bootstraps an #Ionic #App. By passing a root component, IonicModule will make sure that all of the components, directives, and providers from the framework are imported. Any configuration for the app can be passed as the second argument to forRoot .
To create a shared module and include that new shared module as an import for the page modules that need the header:
shared.module.ts

import { NgModule } from '@angular/core';
import {CommonModule} from '@angular/common';
import {HeaderComponent} from './header/header.component';
import {IonicModule} from '@ionic/angular';

@NgModule({
    imports: [
        CommonModule,
        IonicModule
    ],
    declarations: [HeaderComponent],
    exports: [HeaderComponent]
})
export class SharedModule {}

Then for the home.module.ts
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    SharedModule,
    RouterModule.forChild(routes),  
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Read More



Hiding and Showing Tabs on certain pages in Ionic


This article will guide you on the steps to hide and show tabs on certain pages. Here, you will see that your tabs automatically hide when you navigate to a page in the hideTabBarPages array.
Ionic 4 uses Angular's #routing system, instead of the #Ionic 3 method of navController. Here, we will be leveraging this change, to allow us to pragmatically hide the tab bar on pages of our choice while leaving it visible everywhere else.

Read More



Export data into Excel in Ionic Application using XLSX


This article will guide you on the steps to #export data into excel file using #XLSX.

How do I export #data from angular to excel?

Environment setup involves;

Step 1: Downloading the XLSX Module.

Step 2: Downloading the File-Saver Module.

Step 3: Creating a Download #Excel button.

Step 4: Writing exportexcel() method.

Step 5: HTML #Table from which the data will be downloaded.

Read More



Adding Multi Language Translation Feature in Ionic Application using ngx-translate


This article will guide you on the steps to add a #multi-language translation feature in #Ionic Application using #NGX-translate. This is possible by first creating an ionic app. Next, installing the Language Translation library. Then adding the language files for each language. After that, we create #languageConfig service to have translation-related methods in one place. Finally, we use translation pipes to translate text into HTML pages.

Read More




For Linux Tutorials

We create Linux HowTos and Tutorials for Sys Admins. Visit us on LinuxAPT.com

Also for Tech related tips, Visit forum.outsourcepath.com or General Technical tips on www.outsourcepath.com






Focus on your business, not your servers.

Click Here to Learn More