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.

3 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’m trying to import styles for a functional component like so:

import { h } from '@stencil/core';

import './uk-button.scss';

export const UkButton = ({ element: Element, ...rest }, children) => (
  <Element class="uk-button uk-button-default" {...rest}>
    {children}
  </Element>
);

I can create a CSS bundle using rollup-plugin-scss, here’s the excerpt from stencil.config.ts:

rollupPlugins: {
    after: [rollupScss({ includePaths: ['../../../node_modules/'] })],
  },

But the CSS bundle isn’t referenced in any of the built component files as far as I can tell.

Is it possible to import styles like this?

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

I am not able to find Download link for Ionic Studio can anyone help on this.
Thank you in Advance

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

Hello,

I would like to build my app based on Ionic React into native apps (ios/android).
The first thing that I felt was it really fairly fast comparing with native apps while using the app.
However, the first launching of the app is a little bit slow although I build it in production mode. It takes about 3 seconds running the application.
I’d like to reduce this. Is this time-taking while it moves bridgeActivity to MainActivity with WebView?

How can I minimize this? I wanted it to be as quickly as possible.
I made my capacitor.config.json like this as well:

{
...,
  "plugins": {
    "PushNotifications": {
      "presentationOptions": [
        "badge",
        "sound",
        "alert"
      ]
    },
...
}
}

Thank you.

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) {
    console.log("dark mode service", this.darkModeService);
    this.darkModeService.darkModeChange.subscribe(value => {
      console.log('clicked the dark mode toggle'); //Not being called
      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

I have just migrated my project from Cordova to capacitor 2.0. But there is an issue with this Cordova plugin.

While using Cordova, I had to use this plugin with the Cordova platform browser. I had to add platform browser and run on the same.

Now with capacitor how can I use this plugin on browser? I can’t see the browser platform in capacitor

Thank you in advance

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!

1 post - 1 participant

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.

<ion-item>
  	<ion-label position="stacked">Estilo: </ion-label>
  	<ion-select okText="Ok" cancelText="Cancelar" placeholder="Selecione uma" [(ngModel)]="modalColor" value="{{modalColor}}" [disabled]="modalGps">
		<ion-select-option value="yellow">Amarelo</ion-select-option>
		<ion-select-option value="red">Vermelho</ion-select-option>
		<ion-select-option value="pink">Rosa</ion-select-option>
		<ion-select-option value="purple">Roxo</ion-select-option>
		<ion-select-option value="blue">Azul</ion-select-option>
		<ion-select-option value="gray">Cinza</ion-select-option>
		<ion-select-option value="white">Branco</ion-select-option>
		<ion-select-option value="black">Preto</ion-select-option>
	</ion-select>
</ion-item>

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

A simple question… Is Live Update feature necessary? And if I want only deploy to app stores? I will deploy very rarely, mainly after many tests.
However: the free plan will updates only 100 downloads/month. Deploy to app stores has no limitations I hope.

Thanks.

1 post - 1 participant

Read full topic

For an Ionic (4) project I try to scan for iBeacons on an Android device. The sample code I use is the same as described in the documentation, except the UUID and the identifier (I checked those and they look correct).

delegate.didEnterRegion()
  .subscribe(
    data => {
      console.log('didEnterRegion: ', data);
    }
  );

let beaconRegion = this.ibeacon.BeaconRegion('deskBeacon','F7826DA6-ASDF-ASDF-8024-BC5B71E0893E');

this.ibeacon.startMonitoringForRegion(beaconRegion)
  .then(
    () => console.log('Native layer received the request to monitoring'),
    error => console.error('Native layer failed to begin monitoring: ', error)
  );

It all looks like its working well as it reach the didEnterRegion() with the following data:

eventType: "didEnterRegion"
region:
  identifier: "my_identifier"
  typeName: "BeaconRegion"
  uuid: "my_id"

The only problem is that the return value (IBeaconPluginResult) is not the same as described in the documentation (https://ionicframework.com/docs/v3/native/ibeacon/#IBeaconPluginResult), as its missing the array of beacons.

Also I implemented the didRangeBeaconsInRegion delegate, but it never reaches the callback.

 delegate.didRangeBeaconsInRegion()
          .subscribe(
              data => console.log('didRangeBeaconsInRegion: ', data),
              error => console.error()
          );

I also downloaded the Locate Beacon app from the Google Play Store which detects the beacon.

What am I doing wrong? Am I missing something?

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