Ionic

Is Angular better than React?

Angular and React are both great front-end frameworks used for building dynamic web applications. While both have their own set of benefits, Angular has a slight edge over React in certain areas.

Here are a few reasons why Angular is a little better than React:

Comprehensive framework: Angular is a full-featured framework that provides many features out of the box, such as built-in routing, form validation, and dependency injection. React, on the other hand, is a lightweight library that only provides the essential tools needed to build a web application.

Two-way data binding: Angular’s two-way data binding allows for efficient data synchronization between the model and the view, making it easier to manage complex applications. React, on the other hand, uses a one-way data flow, which can sometimes lead to more complex code and a steeper learning curve.

Strongly-typed language: Angular uses TypeScript, a strongly-typed language that allows for better code organization, catch errors early on, and provide better tooling support. React, on the other hand, uses JavaScript, which is a dynamically-typed language that can sometimes lead to errors that are difficult to catch.

Consistent coding standards: Angular has a set of coding standards and best practices that help ensure that code is consistent and maintainable, making it easier for developers to work on large codebases. React, on the other hand, is more flexible, which can sometimes lead to inconsistencies in code style and structure.

While React is still a great option for building web applications, Angular’s comprehensive framework, two-way data binding, strongly-typed language, and consistent coding standards give it a slight edge over React in terms of ease of use, maintainability, and scalability.

How to fix ion-checkbox stealing clicks on ion-item elements

How to fix ion-checkbox stealing clicks on ion-item elements.

I found this annoying issue with Ionic 5 where clicking on ion-label inside ion-item can’t be clicked if there is also an ion-checkbox element.

You have to change the z-index on the element you want clickable.

// component css
ion-label{
   z-index: 3;
}

You can also disable button property on ion-item, check the docs here.

You can also apply this to any other element you want to use inside ion-item. Good luck!

Implement App Tracking Transparency for Ionic Angular and Cordova iOS app

How to use the https://github.com/chemerisuk/cordova-plugin-idfa plugin in Ionic v3.

I had some issues using the example provided so I had to call the exec directly:

// first install the plugin
// cordova plugin add cordova-plugin-idfa
// npm i cordova-plugin-idfa --save

// add permissions to config.xml under ios platform
<platform name="ios">
    <edit-config target="NSUserTrackingUsageDescription" file="*-Info.plist" mode="merge">
        <string> My tracking usage description </string>
    </edit-config>
</platform>


// has to be called after platform is ready
// this.platform.ready().then(() => {}

askTrackingPermission() {
    if (this.platform.is('cordova') && this.platform.is('ios')) {

      if (window.cordova) {
        console.log('trying to request permission ');
        window.cordova.exec(win, fail, 'idfa', "requestPermission", []);
      }
    }

    function win(res) {
      console.log('success ' + JSON.stringify(res));
    }
    function fail(res) {
      console.log('fail ' + JSON.stringify(res));
    }
  }

readTrackingPermission() {

    if (this.platform.is('cordova') && this.platform.is('ios')) {

      if (window.cordova) {
        window.cordova.exec(win, fail, 'idfa', "getInfo", []);
      }
    }

    function win(res) {
      console.log('success  ' + JSON.stringify(res));
    }
    function fail(res) {
      console.log('fail ' + JSON.stringify(res));
    }
  }

Also, you can only test this from the iOS simulator (or device) running 14.5.1+ iOS. In your iOS device settings check privacy->tracking (setting) it has to be allowed to ask. And you will only be able to ask the user once.

Good luck!

How to Open PDF/File in Ionic on Android

How to Open PDF/File in Ionic on Android?

If you recently tried to open a file in Ionic from the application dir using `fileOpener2` plugin you may have encountered an error `File Not Found` which could indicate permission error.

It turns out you can’t open a file from `applicationDirectory` directly, you have to copy it into another directory:

if (this.platform.is('android')) {
  const self = this;
  const targetFile = self.file.dataDirectory + '/' + yourFileName;
		
  self.file.copyFile(self.file.applicationDirectory + 'www/assets/', yourFileName, 
                     self.file.dataDirectory, yourFileName).
           then(function (res) {
	     self.fileOpener.open(targetFile, 'application/pdf');
	});
}

Install the Cordova Plugin here:

https://github.com/pwlin/cordova-plugin-file-opener2
https://ionicframework.com/docs/native/file-opener

How To Create Downloadable CSV File in JS/Angular

 
import { SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
private sanitizer: DomSanitizer;

downloadCSV() {

  let blob = new Blob([yourdata], { type: 'text/csv' });
  let urlPath = this.sanitizer.sanitize(SecurityContext.URL,
this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob)));
    
  let tempLink = document.createElement('a');
  tempLink.href = urlPath;
  tempLink.setAttribute('download', 'download.csv');
  tempLink.click();
}

Google Android Play Store Target API Requirement Change

From Google:

Hello Google Play Developer,

This is a reminder that starting November 1, 2019, updates to apps and games on Google Play will be required to target Android 9 (API level 28) or higher. After this date, the Play Console will prevent you from submitting new APKs with a targetSdkVersion less than 28.

Configuring your app to target a recent API level ensures that users benefit from significant security and performance improvements, while still allowing your app to run on older Android versions (down to the minSdkVersion).

Android 9 (API level 28) introduces a number of changes to the Android system. The following behavior changes apply exclusively to apps that are targeting API level 28 or higher. Apps that set targetSdkVersion to API level 28 or higher must modify their apps to support these behaviors properly, where applicable to the app.

To target the api in your Cordova app set these min and target version in config.xml

    <preference name="android-minSdkVersion" value="23" />
    <preference name="android-targetSdkVersion" value="28" />

iOS Deprecated API Usage Warning Ionic using UIWebView

Apple will no longer support web apps that use UIWebView. The apps and libraries need to be migrated to use WkWebView.

The latest Ionic already uses WkWebView, but several Cordova plugins still rely on UIWebView which is a problem.

https://ionicframework.com/docs/v3/wkwebview/

If you’re using Ionic you need to upgrade to iOS Cordova 5

cordova platform remove ios
cordova platform add ios@5.0.0

Also you might need to remove additional plugins that use UIWebView such as inappbrowser. 

cordova plugin rm cordova-plugin-inappbrowser

More information about the breaking changes can be found here:

https://cordova.apache.org/news/2018/08/01/future-cordova-ios-webview.html

How to mask and unmask input element password type in Ionic / Angluar

How to mask and unmask input element password type in ionic/angular/js:

  
this.togglePasswordField = function () {
     console.log("toggle password field called");
     if (document.getElementById("passwordElement").type == "password") {
        document.getElementById("passwordElement").type = "text";

         document.getElementById("passwordHideIcon").classList.remove("ion-eye");
         document.getElementById("passwordHideIcon").classList.add("ion-eye-disabled");
     }
     else {
          document.getElementById("passwordElement").type = "password";
          document.getElementById("passwordHideIcon").classList.remove("ion-eye-disabled");
          document.getElementById("passwordHideIcon").classList.add("ion-eye");     
          }
    }

This way only uses basic html element manipulation.

passwordHideIcon element is a button that calls the function and uses the ionic icon for eyes and eyes disabled.

How to Disable Android Back Button in Ionic 1 / Angular

To disable back button in Android put one of the codes below in your app.js in the .run function.

// app.js

// Disable Back in Entire App
$ionicPlatform.registerBackButtonAction(function(){
  event.preventDefault();
}, 100);

Or Conditionally Disable Back:

// app.js

$ionicPlatform.registerBackButtonAction(function(){
  if($ionicHistory.currentStateName === 'someStateName'){
    event.preventDefault();
  }else{
    $ionicHistory.goBack();
  }
}, 100);

Ionic Slider Input Doesn’t Work in Popups on iOS

The issue seems to be in the modal.js file of the ionic library

https://github.com/driftyco/ionic/blob/1.x/js/angular/service/modal.js#L194

The temporary fix:

var isInScroll = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'scroll');
if (isInScroll !== null && !isInScroll) {
    e.preventDefault();
}

Another possible solution is to add the class=”scroll” to your input element that is of type range.

Link to the github issue.