Hi,

I am using ionic5 with angular. My problem is when i add defaultHref the icon is visible. But when it is removed it is not visible. Is it necessary to mention this in ion-back-button. If not then why I face this problem.

Thanks.

Thanks for the Angular example, as for React its looks like you have to integrate directly with Capacitor.

https://capacitor.ionicframework.com/docs/apis/app#method-addListener-3

I am trying to add video calling in ionic 4 how I implement video chat in ionic framework any third party api

My ionic page is pushing to the top and squeezing when the keyboard opens. I tried below code snippet and it didn’t work.

 ionViewDidEnter() {
        this.platform.ready().then(() => {
            this.keyboard.disableScroll(true);
        });
    }

IonicModule.forRoot({scrollAssist: false}),

Below is my ionic info.

Ionic:

Ionic CLI : 5.4.13 (C:\Users\sr\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.11.10
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.1.2

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Ionic keyboard version:

"@ionic-native/keyboard": "^5.21.5",

Anyone can help please?

Generically, you can use a custom font using @font-face in your CSS. Here’s a very basic example:

@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Then, trivially, to use the font on a specific element:

`.classname {`
`    font-family: 'YourFontName';`
`}`

.classname {
    font-family: 'YourFontName';
}
``
(.classname is your selector).

Note that certain font-formats don’t work on all browsers; you can use special text’s generator to avoid too much effort converting.

You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS @font-face rules, so you don’t have to write your own).

while also preventing people from having free access to download the font, if possible

Nope, it isn’t possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren’t very practical.

I hope that helped!

Did you tried running the ionic command with administrator cmd? if not then please try that way once. and if yes then try reinstalling node and ionic and then reinstalling.

Same here trying to rebuild a package with new certificates. Tried with old ones exactly the same configuration that was working a while back and now failing with this error.
Looked at this https://ionic.zendesk.com/hc/en-us/articles/360042199513-iOS-Builds-fail-with-error-Seems-to-be-a-very-old-project-file-format-please-open-your-project-file-in-a-more-recent-version-of-Xcode-
BUT my old package build was fine with iOS project created with cordova-ios@4.5.5 and i can’t change to 5.1.1 as i want exactly the same build with only change in the certificates…
Any insight ?

Hello,
I used the mobile accessibility plugin to disable the font size from the device.
So user will change the font size from the device it will not reflect in the app. But if the user change the display size then the code is not working which we used and change of display size is effecting the app.

When using LARGE Screen Zoom and Normal Font Size in the Settings of this Android phone and using the same process shown in the video above in the first post, I am getting the same error with the screen rotation and the right side of the screen getting cut off.

The following are screenshots of the phone font and display settings and what it looks like when the screen is cut off.

Screen1720×1280 93.1 KB

Screen2720×1280 406 KB

it seems that every component that has a background, takes the background color you setted.
try to set the background color ONLY in your .scss file linked with the .html file

New router, setting up via the Netgear Up app.

Following the firmware update at some stage, I’ve lost all wireless, no wireless lights on or flashing. The power light continually flashes and the factory reset button does nothing.

Here are few steps which you can follow and can solve you question yourself

What I’ve tried so far:

1. I’ve held the FRS button for 7 seconds (repeatedly) and nothing happens.

2. I’ve held the FRS button for 10 seconds (repeatedly) and nothing happens.

3. I’ve held the FRS button for 45 seconds (repeatedly) and nothing happens.

4. I’ve held the FRS button for 60 seconds (repeatedly) and nothing happens.

5. Connecting directly to the PC via the ethernet cable, no access.

6. No access via 192.168.1.1, 192.168.1.2, 192.168.1.3, 192.168.1.4 and so on until I got to 15 and stopped trying.

7. Powered down both the router and the PC for several minutes before trying again and still no joy.

Eager to resolve this ASAP.

Thanks in advance.

Cheers,

Mech

Model R9000 Nighthawk X10 AC7200 Smart WiFi Router

Model: R9000|Nighthawk X10 AD7200 Smart WiFi Router

Whattt a great information it is. I was looking for the same from last so many days Thanks for the sharing I work on Netgear Router Reset for this i had need of a related post of mine. Thanks for the sharing for taking more information visit on it.

I am using fcm plugin for firebase push notification.while sending notification form console it shows successful bit not received on iPhone device.is there any ionic 4 bug or anything i missed in my code.

in scss write this:

#map {
    height: 100%;
    width: 100%;
}

#map-container {
    height: 100vh;
    width: auto;
}

in HTML:

<div id="map-container">

  <div id="map"></div>

</div>

image1240×448 35 KB

The Back Button is only visible when it is clickable. It is clickable when it has a default href or when you have a Navigation Stack which you can go back. Of course this is right, so please give me some more Details? In which case the button is hidden for you where you expect it?

I am migrating my ionic project from version 4 to version 5. For that, I have initially installed latest version of ionic 4 with this command

npm install @ionic/angular@^4.0.0

But now it is giving me this error

ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/global.scss)
[ng] Module build failed (from ./node_modules/postcss-loader/src/index.js):
[ng] Error: Failed to find '@ionic/angular/css/display.css'
[ng]   in [
[ng]     D:\client\app\src
[ng]   ]
[ng]     at resolveModule.catch.catch (D:\client\app\node_modules\postcss-import\lib\resolve-id.js:35:13)

Here is my global.scss

/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

@import '~firebaseui/dist/firebaseui.css';


.address-modal{

    .modal-wrapper {
    position: absolute;  
    bottom: 0;  
    height: 80%;

  }
}

I can’t understand what is going wrong. Thank you in advance

Hello guys, I have this code :

popupIsOpen = false;
const marker: Marker = this.map.addMarkerSync(markerData);
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(this.markerClick);

markerClick(params: any) {
        this.popupIsOpen = !this.popupIsOpen;
        const marker: Marker = params[1] as Marker;
}

The template :

<ion-content>
    <div id="map_canvas"></div>
</ion-content>
<div [ngClass]="{'overlay': popupIsOpen, 'hidden': !popupIsOpen}">
    <ion-card>
        <ion-card-content>
            <ion-button (click)="popupIsOpen=!popupIsOpen">close</ion-button>
             Content
        </ion-card-content>
    </ion-card>
</div>

The popup is not displayed when I click on marker. What I’m doing wrong ? Thx in advance.

I would use [src] = “functionToGetImageDependingOnMode()”

then in your ts, use an if statement to see if document.body.classList.value === dark and return the image you want…

I just want to know why it is hiding and thanks for the answer

Hi everyone,

I have cordova printer plugin added to my project, the plugin is imported in my project app.module.ts (included in providers).

The plugin works well with iOS, put with android, I don’t get any error via the console, the checking for printing support is done with no errors, I even see my pre-set console messages, but nothing happens on the phone when I press the print button. The file is pdf and it’s generated by pdfmake and already saved in Documents folder on android device… the file is there and has no problems.

Console logs from android studio:

V/Capacitor/Plugin: To native (Cordova plugin): callbackId: File1163166029, service: File, action: resolveLocalFileSystemURI, actionArgs: ["file:\/\/\/storage\/emulated\/0\/Documents\/Doc-1582115145298.pdf"]
V/Capacitor/Plugin: To native (Cordova plugin): callbackId: Printer1163166030, service: Printer, action: check, actionArgs: [null]
I/Capacitor/Console: File: http://localhost/myapp-module-es2015.js - Line 70632 - Msg: printing available
I/Capacitor/Console: File: http://localhost/myapp-module-es2015.js - Line 70634 - Msg: trying to print...
V/Capacitor/Plugin: To native (Cordova plugin): callbackId: Printer1163166031, service: Printer, action: print, actionArgs: ["file:\/\/\/storage\/emulated\/0\/Documents\/Doc-1582115145298.pdf",{"name":"Doc-1582115145298.pdf","orientation":"portrait"}]

Plugin details:

"@ionic-native/printer": "^5.21.5",
"cordova-plugin-printer": "^0.8.0",

My package.json content:

{
  "name": "myapp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/fire": "^5.4.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@angular/service-worker": "^8.2.14",
    "@capacitor/android": "^1.5.0",
    "@capacitor/core": "1.4.0",
    "@capacitor/ios": "^1.5.0",
    "@ionic-native/background-mode": "^5.21.5",
    "@ionic-native/camera": "^5.21.5",
    "@ionic-native/core": "^5.21.5",
    "@ionic-native/file": "^5.21.5",
    "@ionic-native/file-opener": "^5.21.5",
    "@ionic-native/printer": "^5.21.5",
    "@ionic-native/social-sharing": "^5.21.5",
    "@ionic/angular": "^4.7.1",
    "@ionic/pwa-elements": "^1.4.2",
    "cordova-plugin-background-mode": "^0.7.3",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-opener2": "^3.0.0",
    "cordova-plugin-printer": "^0.8.0",
    "cordova-plugin-x-socialsharing": "^5.6.4",
    "core-js": "^3.6.4",
    "es6-promise-plugin": "^4.2.2",
    "firebase": "^7.8.1",
    "moment": "^2.24.0",
    "pdfmake": "^0.1.64",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "^0.803.25",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@capacitor/cli": "^1.5.0",
    "@ionic/angular-toolkit": "^2.1.1",
    "@ionic/lab": "3.0.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "My App",
  "cordova": {
    "plugins": {
      "cordova-plugin-camera": {},
      "cordova-plugin-background-mode": {},
      "cordova-plugin-file": {},
      "cordova-plugin-file-opener2": {},
      "cordova-plugin-printer": {},
      "cordova-plugin-x-socialsharing": {}
    }
  }
}

Please see my code below:

async printPdf() {
    const exists = await this.checkFile();
    if (exists) {
      this.printer.check().then(
        () => {
          console.log('printing available');
          this.printer.pick().then(
            () => {
              console.log('trying to print...');
              this.printer.print(this.orgUri, {name: `Doc-${this.reportId}.pdf`, orientation: 'portrait'}).catch(
                () => {
                  this.utilServ.toastUtil({
                    message: 'Failed to print PDF file. Please try again',
                    color: 'dark',
                    duration: '3500',
                    position: 'top',
                    animated: 'true'
                  });
                });
            }
          );
        }, async (err) => {
          const alrt = await this.alrtCtrl.create({
            header: 'Printing Error',
            message: `Printing Not Supported On This Device`,
            cssClass: 'alert-box',
            buttons: [
              {
                text: 'Okay',
                role: 'Cancel'
              }
            ]
          });
        }
      );
    } else {
      this.noFileAlert();
    }
  }

I also did try using isAvailable() method instead of check(), using print() without pick(), but it always gives same result as seen above on android logs console, and with every method mentioned, iOS works fine and print successfully.

My ‘ionic info’ command result:

Ionic:

   Ionic CLI                     : 5.4.14 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.2

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.4.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (5 plugins total)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.14.1 (/usr/local/bin/node)
   npm    : 6.13.7
   OS     : macOS Catalina

Android details (real device):

OS: Android 9.0 (Havoc OS 2.9)
Xiaomi: Mi 5

By the way, printing from other apps like Drive PDF Viewer works on my phone, so I can safely say it’s not a printing service problem.

I did google every possible keyword that came to mind but no luck yet, so I really hope anyone can shed some light on what the problem is and how it can be fixed… Thanks a lot.

//html

<ion-navbar>

    <ion-title>

        Ionic Blank

    </ion-title>

</ion-navbar>

<div class="container">

    <div id="arrow-left" class="arrow"></div>

    <div id="slider">

        <div class="slide slide1">

            <div class="slide-content">

                <span>Lorem ipsum dolor</span>

            </div>

        </div>

        <div class="slide slide2">

            <div class="slide-content">

                <span>Lorem ipsum dolor</span>

            </div>

        </div>

        <div class="slide slide3">

            <div class="slide-content">

                <span>Lorem ipsum dolor</span>

            </div>

        </div>

    </div>

    <div id="arrow-right" class="arrow"></div>

</div>

////scss
page-home {

body,

#slider,

.container,

.slide-content {

    margin: 0;

    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    width: 100%;

    height: 50vh;

    overflow-x: hidden;

}

.container {

    position: relative;

}

.slide {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.slide1 {

    background-image: url('https://images.pexels.com/photos/3370381/pexels-photo-3370381.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');

}

.slide2 {

    background-image: url('https://images.pexels.com/photos/6105/flowers-shoes-white-modern.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500');

}

.slide3 {

    background-image: url('https://images.pexels.com/photos/2970502/pexels-photo-2970502.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');

}

.slide-content {

    display: flex;

    justify-content: center;

    align-items: flex-end;

    text-align: center;

}

.slide-content span {

    font-size: 3rem;

    color: #fff;

}

.arrow {

    cursor: pointer;

    position: absolute;

    top: 50%;

    margin-top: -15px;

    width: 0;

    height: 0;

    border-style: solid;

}

#arrow-left {

    border-width: 10px 15px 10px 0;

    border-color: transparent #fff transparent transparent;

    left: 0;

    margin-left: 15px;

}

#arrow-right {

    border-width: 10px 0 10px 15px;

    border-color: transparent transparent transparent #fff;

    right: 0;

    margin-right: 15px;

}

}

//ts
import { Component } from ‘@angular/core’;

import { NavController } from ‘ionic-angular’;

@Component({

selector: ‘page-home’,

templateUrl: ‘home.html’

})

export class HomePage {

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){

let sliderImages:any = document.querySelectorAll(".slide");

let arrowLeft:any = document.querySelector("#arrow-left");

let arrowRight:any = document.querySelector("#arrow-right");

let current = 0;



function initial() {

  for (let i = 0; i < sliderImages.length; i++) {

    sliderImages[i].style.display = "none";

  }

}



function startSlide() {

  initial();

  sliderImages[0].style.display = "block";

}



function slideLeft() {

  initial();

  sliderImages[current - 1].style.display = "block";

  current--;

}



function slideRight() {

  initial();

  sliderImages[current + 1].style.display = "block";

  current++;

}



arrowLeft.addEventListener("click", function() {

  if (current == 0) {

    current = sliderImages.length;

  }

  slideLeft();

});



arrowRight.addEventListener("click", function() {

  if (current == sliderImages.length - 1) {

    current = -1;

  }

  slideRight();

});



startSlide();

  }

}