There seems to be a draggable prop on IonMenu but it doesn’t work.

1 post - 1 participant

Read full topic

Is it possible to enable and disable a tab in Ionic3 application?

I try to use *ngIf to do that in html, but each time when setting is changed from false to true, an new tab is added; when setting is changed from true to false, the tab doesn’t disappear.

html is:

<ion-tabs>
  <ion-tab [root]="tab0Root" [tabTitle]="tab0Title" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab1Root" [tabTitle]="tab1Title" tabIcon="people"></ion-tab>
  <ion-tab *ngIf="setting==true" [root]="tab2Root" [tabTitle]="tab2Title" tabIcon="setting"></ion-tab>
</ion-tabs>

Thanks.

2 posts - 2 participants

Read full topic

Hello there,

Quick question, as I unable to find anything related on the docs:

For some context, I have the following IonReactRouter and its IonRouterOutlet

Whenever I click on the TabBarButton that points to route “/home/sale/all”, it’s icon get highlighted as expected.

However, whenever an action within “/home/profile” redirects the user to “/home/sale/edit/:id”, TabBarButton for route “/home/sale/all” gets highlighted, why?

Thanks a lot

1 post - 1 participant

Read full topic

I’ve been developing with Windows for some time and have bought a Mac for IOS development but I can’t get past the installation process!

I have NOT used sudo anywhere!

I have installed nvm, and also changed folder permissions to get past the permissions problems and now I am getting this error…

% npm install -g ionic/cli

npm ERR! Error while executing:

npm ERR! /usr/bin/git ls-remote -h -t ssh://git@github.com/ionic/cli.git

npm ERR!

npm ERR! git@github.com: Permission denied (publickey).

npm ERR! fatal: Could not read from remote repository.

npm ERR!

npm ERR! Please make sure you have the correct access rights

npm ERR! and the repository exists.

npm ERR!

npm ERR! exited with error code: 128

I thought Macs were supposed to be easy!

Can somebody please tell me what I have done wrong and how to get past this?

1 post - 1 participant

Read full topic

When I run ng build or ng serve everything goes well but ng build --prod just goes bad
Some output

src/app/das orhboard/cotizaciones/add/add.page.html:179:9 - error NG8001: 'ion-column' is not a known element:
1. If 'ion-column' is an Angular component, then verify that it is part of this module.
'@NgModule.schemas' of this component to suppress this message.
179         <ion-column>
            ~~~~~~~~~~~~

  src/app/dashboard/cotizaciones/add/add.page.ts:22:16
    22   templateUrl: './add.page.html',
                      ~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AddPage.

[ERROR] An error occurred while running subprocess ng.

1 post - 1 participant

Read full topic

When IOS app connect tzone with BLE service
It is not sending data
See here in connect response:
{“characteristics”:[{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B11-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B12-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B13-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B14-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B15-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B16-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B17-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”],“isNotifying”:false,“characteristic”:“27763B18-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B19-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B20-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Notify”],“isNotifying”:false,“characteristic”:“27763B21-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B22-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”],“isNotifying”:false,“characteristic”:“27763B23-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B27-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B28-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B29-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B2A-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B2B-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B31-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“Read”,“Write”],“isNotifying”:false,“characteristic”:“27763B40-999C-4D6A-9FC4-C7272BE10900”,“service”:“27763B10-999C-4D6A-9FC4-C7272BE10900”},{“properties”:[“WriteWithoutResponse”],“isNotifying”:false,“characteristic”:“00001532-1212-EFDE-1523-785FEABCD123”,“service”:“00001530-1212-EFDE-1523-785FEABCD123”},{“properties”:[“Write”,“Notify”],“isNotifying”:false,“characteristic”:“00001531-1212-EFDE-1523-785FEABCD123”,“service”:“00001530-1212-EFDE-1523-785FEABCD123”},{“properties”:[“Read”],“isNotifying”:false,“characteristic”:“00001534-1212-EFDE-1523-785FEABCD123”,“service”:“00001530-1212-EFDE-1523-785FEABCD123”}],“id”:“D162ED8C-C3FD-483F-0CBA-09D5FC344BBC”,“rssi”:-42,“advertising”:{“kCBAdvDataLocalName”:“DRG-286”,“kCBAdvDataIsConnectable”:1,“kCBAdvDataServiceData”:{“CBFF”:{}}},“name”:“DRG-286”,“services”:[“27763B10-999C-4D6A-9FC4-C7272BE10900”,“00001530-1212-EFDE-1523-785FEABCD123”]}

it is sending blank in kCBAdvDataServiceData.CBFF

Please suggest why it is happening.

1 post - 1 participant

Read full topic

What are the Other methods can we use to connect with the Sensor except the ble?
Can you suggest some other method.

1 post - 1 participant

Read full topic

I have an Ionic 3 app and I’m using Firebase to send push notification. I have 2 project in Firebase, one for dev and other one for production. Is it possible to use both google-services.json file so that when I build the app in Android it gets the right one depending on the environment?

1 post - 1 participant

Read full topic

I am trying to implement a dark mode toggle, and when I toggle dark mode the tabs should change to a different design. When I trigger the event in my settings page, I don’t get anything emitted when I subscribe in the tabs.page.ts

darkmode.service.ts

@Injectable({})
export class DarkmodeService {
  darkMode: boolean;
  darkModeChange: BehaviorSubject<boolean> = new BehaviorSubject(
    window.matchMedia("(prefers-color-scheme: dark)").matches,
  );

  constructor() {
    this.darkModeChange.subscribe(value => {
      this.darkMode = value;
      document.body.classList.toggle("dark", value);
    });
  }

  toggleDarkMode() {
    this.darkModeChange.next(!this.darkMode);
  }
}

settings.page.ts

export class SettingsPage implements OnInit {
  darkMode: boolean;
  constructor(private darkModeService: DarkmodeService) {
    this.darkMode = this.darkModeService.darkMode;
  }

  ngOnInit() {}

  toggle() {
    this.darkModeService.toggleDarkMode();
  }
}

tabs.page.ts

export class TabsPage implements OnInit {
  @ViewChild("myTabs", { static: true }) tabs: IonTabs;
  darkMode: boolean;

  constructor(private darkModeService: DarkmodeService) {
    this.darkModeService.darkModeChange.subscribe(value => {
      console.log('clicked the dark mode toggle'); //Not being called when I click the toggle
      this.darkMode = value;
      this.onDarkModeChange();
    });
  }

 onDarkModeChange() {
   ...
  }
}

Can anyone see why I’m not seeing any value in the tabs.page.ts when I click on the toggle in settings.page.ts? If I subscribe to it on the settings page I can see it being called. It might be to do with my understanding of observables. Any tips are much appreciated

1 post - 1 participant

Read full topic

Hi All, I am using MediaCapture plugin to record video in my app. Its working in almost all the devices but not working in Android 10(Nokia and OnePlus). After capturing the video app is getting re-start. Can anyone please help me with issue.

1 post - 1 participant

Read full topic

I want to add a video capture and play feature in my ionic 3 app. I use media capture plugin, the code is give as below. The app is build and run on Android platform, my phone is HUAWEI Mate 9. It seems the video is successfully recorded, but when I play it, I get err: Uncaught (in promise) DOMException: Failed to load because no supported source was found.
console log shows path and url are:

path:  file:///data/user/0/hello.app/files/VID_20200709_210743.mp4
url:  /data/user/0/hello.app/files/VID_20200709_210743.mp4

I don’t know what is the problem, could you please help?
.ts file

captureVideo(){
    let options: CaptureVideoOptions = {
      limit: 1,
      duration: 10
    };
    this.mediaCapture.captureVideo(options).then((res: MediaFile[]) =>{
      let capturedFile = res[0]
      console.log('my file: ', capturedFile);

      let fileName = capturedFile.name;
      let dir = capturedFile['localURL'].split('/');
      dir.pop()
      let fromDirectory = dir.join('/');
      let toDirectory = this.file.dataDirectory;

      this.file.copyFile(fromDirectory, fileName, toDirectory, fileName).then(res=>{
        this.storeMediaFiles({name: fileName, size: capturedFile.size});
      })
    })
  }

  play(myFile){
    console.log('play:', myFile);
    if(myFile.name.indexOf('.amr')>-1 || myFile.name.indexOf('.wav')>-1){
      const audioFile: MediaObject = this.media.create(myFile.localURL);
      audioFile.play();
    } else {
      let path = this.file.dataDirectory + myFile.name;
      console.log("path: ", path)
      let url = path.replace(/^file:\/\//,'')
      console.log("url: ", url)
      let video = this.myVideo.nativeElement;
      video.src = url;
      video.play()
    }
  }

  storeMediaFiles(files){
    console.log("store: ", files)
    this.storage.get(MEDIA_FILES_KEY).then(res =>{
      if(res){
        let arr = JSON.parse(res);
        arr = arr.concat(files)
        this.storage.set(MEDIA_FILES_KEY, JSON.stringify(arr))
      } else{
        this.storage.set(MEDIA_FILES_KEY, JSON.stringify(files))
      }
      this.mediaFiles = this.mediaFiles.concat(files)
    })
  }

.html

  <button ion-button full (click)="captureVideo()">Capture Video</button>

  <ion-list>
    <ion-item *ngFor="let file of mediaFiles" tappable (click)="play(file)" text-wrap>
      {{file.name}}
      <p>{{file.size / 1000 / 1000 | number}} MB</p>
    </ion-item>
  </ion-list>
  <video controls autoplay #myvideo style="width: 100%; height: 30%;"></video>

1 post - 1 participant

Read full topic

Hello, I am trying to use the Flic2 SDK (https://github.com/50ButtonsEach/flic2lib-android) with Ionic Angular, does anyone know of a way I could use it in ionic development?

Anything is appreciated, thanks!

3 posts - 2 participants

Read full topic

It came to my attention recently that our production application doesn’t route correctly on an iPhone 6s. The user who had the problem was running the latest iOS (13.5.1) but I managed to obtain an iPhone 6s running an older version (11.4.1) that shows the same symptoms.

The app is using Ionic 5 and Angular 9. It’s not very fancy. We have a side menu and the main content.

The symptoms are the user is on our main home page (app-home) and taps a link which routes them to another page (app-device). This is pretty standard Angular router.navigate(). When tapping the link, the new page animates in and display. However, on the iPhone 6s, nothing is shown.

So I connected the Safari debugger to my app on iPhone 11 and iPhone 6s. Here are the results:

The iPhone 11 (and every other device) shows the pages under the ion-router-outlet. When navigating to app-device, it adds it under ion-router-outlet. Tapping back will remove it.

ionic-111958×591 337 KB

Now when I repeat the steps on the iPhone 6s, something interesting happens.

ionic-6s1949×559 322 KB

You’ll see the page app-device is being added outside of the ion-router-outlet. Because of this, it is not displaying to the user.

Has anyone else seen this? What is causing this and what is the fix?

app.component.html

<ion-app>
  <ion-split-pane contentId="main">
    <ion-menu contentId="main">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of navigation">
            <ion-item>etc</ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

   Ionic CLI                     : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.3
   @angular-devkit/build-angular : 0.900.7
   @angular-devkit/schematics    : 9.0.7
   @angular/cli                  : 9.0.7
   @ionic/angular-toolkit        : 2.2.0

1 post - 1 participant

Read full topic

Problem description

I don’t really know if what is happening is indeed a double click event, I’m having a really hard time debugging this problem.

I have a map component inside a page called ‘map’, in this page I can create and edit some geometries. When I toggle a ‘edit’ tool on and select one of these geometries a modal opens with some properties of this geometry which I can edit and save. One of this properties is the color, which is selected with ion-select. When I click in the input of ion-select a kind of popover pops up for the color selection.

My problem is that, when the geometry of the map is aligned in the same position that the ion-select input, this popover opens automatically, like it was clicked. None of the others inputs are affected in the same way, which would be the selection of these inputs.

Images to illustrate the problem

working736×530 109 KB

not_working740×532 335 KB

Some system information

Ionic:

   Ionic CLI                     : 6.10.1 
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.2
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0

1 post - 1 participant

Read full topic

I need convert input type=“file”, to base64 in ionic 5, a have problema with FileRead reader.onload = () => resolve(reader.result); is not working, this message is send to me.

2 posts - 2 participants

Read full topic

Hi, I am using paypal plugin in my project which uses UIwebview which app store started rejecting, if I remove paypal from my project then my project submit successfully to app store. But I want to use Paypal in my project. Please help?

1 post - 1 participant

Read full topic

Hi,
is there a way to build a AFrame.io Ionic app with Angular or React?
any hint appreciated

1 post - 1 participant

Read full topic

Hey there!

I follow this documentation to use ScreenOrientation in my app : https://ionicframework.com/docs/native/screen-orientation

First, I installed libraries using this steps :

npm install cordova-plugin-screen-orientation
npm install @ionic-native/screen-orientation
ionic cap sync

Then, in my component.ts file, I just imported it and try to declare in my constructor like this :

import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Subscription } from 'rxjs';
import { SliderModel } from './slider.model';
import { HomeService } from '../home.service';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

@Component({
  selector: 'app-slider-images',
  templateUrl: './slider-images.component.html',
  styleUrls: ['./slider-images.component.scss']
})
export class SliderImagesComponent implements OnInit, OnDestroy {
  
  sliderImgs: SliderModel[];
  private sliderImgsSub : Subscription;

  isLoaded = false;
  
  @ViewChild('slideWithNav2', { static: false }) slideWithNav2: IonSlides;

  sliderTwo: any;
  
  slideOptsTwo = {
    initialSlide: 1,
    slidesPerView: 2.8,
    loop: true,
    autoplay: true,
    centeredSlides: true,
    spaceBetween: 5
  };
  
  constructor(private homeService: HomeService, private screenOrientation: ScreenOrientation) {
    this.sliderTwo =
    {
      isBeginningSlide: true,
      isEndSlide: false,
      slidesItems: []
    };
  }

  ngOnInit() {
    this.sliderImgsSub = this.homeService.fetchImage().subscribe(sliderImages => {
      this.sliderImgs = sliderImages;
      for(let row in this.sliderImgs) {
        const imageUrl = {
          imageB64: this.sliderImgs[row].imageB64,
        };
        this.sliderTwo.slidesItems.push(imageUrl);
      }
      this.isLoaded = true;
    });
  }

  ngOnDestroy() {
    if(this.sliderImgsSub) {
      this.sliderImgsSub.unsubscribe();
    }
  }
}

At this moment, I got a problem, this error message is displayed :

Can't resolve all parameters for SliderImagesComponent in /Users/godaltristan/Desktop/Ionic Development/src/app/home/slider-images/slider-images.component.ts: ([object Object], ?).

I also tried to set ScreenOrientation in providers from my app.module.ts but I got the same error message.

I need ScreenOrientation to update the slidesPerView value in my sliderTwo object when orientation change, but I can’t achieved this.

Tried many solutions on many forums but nothing works.
Does anyone have a solution ?

Thanks.

1 post - 1 participant

Read full topic

Hey,

I’m new with Ionic React and I’m looking for the correct way to integrate custom fonts and a custom icon set into my project, so that it’s working on all platforms as intended.

Custom Icon set
My goal is to make my custom icons work with IonIcon so that I can use the default styling options like “size” and the CSS variables (e…g --ioinc-stroke-weight).

What I did so far:

1. I added the icon set (all icons are svgs) into “public/assets/customicons/”
2. I imported IonIcon into my components where needed
3. Integrated the (e.g. <IonIcon src="…/assets/customicons/6m.svg" size={‘large’} />)

So far the icons are displayed as intended and custom attributes “size” is working.
But, I’m not able to set the icon color or stroke-width programmatically. All the icons have set a default attributes (e.g. < g fill=“none” fill-rule=“evenodd” stroke="#092A5E" stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“8” >). Even if I remove those default attributes, I’m not able to set them via CSS variables

Question 1: Is “public/assets/customicons/” the correct folder to store the icons?
Question 2: How can I make it work that I can change the color of the icon via CSS?

Custom Font

Goal: I want that the custom font is shown on all platforms

What I did so far:

1. Added the custom fonts in “src/assets/fonts/”
2. Created a “fonts.css” in “src/theme/” where I integrated the font via “@font-face”
   @font-face {
   font-family: ‘FONTNAME’;
   src: url(’…/assets/fonts/FONTNAME.ttf’);
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   }
3. assigned the font to differnet elements

Question 1: Is this the correct folder to store the custom fonts? (I wasn’t able to do the same when the custom font was saved under “public/assets/fonts/” like the icon set)

Unfortunately, I wasn’t able to find any docs, tutorials or posts on any of these topics.

Thanks for your help!

1 post - 1 participant

Read full topic

Is there a guide on how “In App Browser” is used in a React Ionic project?

The current doc (https://ionicframework.com/docs/native/in-app-browser/) on In App Browser seems to be targeted at Angular.

In particular, I’m trying the following code:

import { InAppBrowser } from '@ionic-native/in-app-browser';
// ...
const browser = InAppBrowser.create("some url");
browser.on('loadstart').subscribe(event => {
  // ...
})

This code is able to open.a new browser, but I’m seeing an error “Cannot read property ‘subscribe’ of undefined”, which I don’t understand why. Can someone give an example of how I should use “In App Browser” in Ionic + React?

1 post - 1 participant

Read full topic