@itosoft wrote:

hi
how can i plave sidemenu to the rightside to support RTL app
open from right to left
i am using ionic4 on ionic stdio

Posts: 2

Participants: 2

Read full topic

@KevinB1 wrote:

Hi, I was not able to customize the toolbar in ionic v5 as I did in Ionic v4.

A very simple case:

My footer:

<ion-footer class="ion-no-border">
  <ion-toolbar>
      <ion-button expand="block" fill="solid" (click)="continue()">
        {{'Continue' | localize}}
      </ion-button>
  </ion-toolbar>
</ion-footer>

With CSS:

    ion-toolbar {
         --background: transparent !important;
         --ion-color-base: transparent !important;
    }

Result in Ionic 4:

• Transparent Footer
• Button has my global button colors: (background: ion-color-primary + text: ion-color-light)

Result in Ionic 5:

• Footer is not Transparent
• Button in footer has the color defined for footer and ignores and CSS styling the button itself

What I would like to achive:

• The footer should be transparent
• The buttons should be the color (background + text) that I specify for them

The documentation says very little, but the breaking changes mentions:

This is most important when changing the global theme, as updating the toolbar color
will automatically update the hover states for all of the buttons in a toolbar, regardless of their fill and without having to know what each opacity is.

How could I proceed?

Do I even have to use the toolbar in the footer, or can I put a button directly into it? (documentation says always use footer with toolbar with buttons)

Here is an image on how the dom looks like. You can see that the button in the toolbar uses the toolbar colors instead of the button colors:

Capture1251×584 131 KB

Posts: 1

Participants: 1

Read full topic

@mirkobalzarini wrote:

Hi all,
I’m having problems using geolocation plugin in my Ionic 5 project with Angular (I’m using VisualStudio Code, if can help).
I’ve added cordova-plugin-geolocation to my project and then installed the @ionic/native geolocation plugin.
As indicated by the various tutorials that I found, I added to app.module.ts:

import { Geolocation } from ‘@ionic-native/geolocation/ngx’

but when I try to insert it in providers list,

providers: [
StatusBar,
SplashScreen,
Geolocation,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
]

VS Code reports me following problem:

Type ‘GeolocationOriginal’ is not assignable to type ‘Provider’.
Type ‘GeolocationOriginal’ is missing the following properties from type ‘any’: length, pop, push, concat, and 26 more.

And so I can’t compile…
I really don’t understand what’s wrong in my code.
Thanks in advance.

Posts: 1

Participants: 1

Read full topic

@cyferhyb wrote:

i have some issues with logout in my app, i use Laravel passport used for authentication but after logout user data not reset for next user login

async logout(){
  this.logoutconfirm();
  }
  async logoutconfirm() {
    const alerts = await this.alertController.create({
      message: 'Do you want to logout?',
      cssClass: 'log-buttonzz',
      buttons: [
        {
          text: 'Yes',
          handler: async () => {            
            await this.laravelIp.logout();
            localStorage.removeItem('token');
            await  this.navCntl.navigateRoot('/'); 
          }
        },
        {
          text: 'No',
          role: 'cancel',
          handler: (blah) => {
                  }
        },
      ]
    });
    await alerts.present();
  }

Posts: 1

Participants: 1

Read full topic

@gkamlesh21 wrote:

The problem:

Currently, we support several protocols: 433MHz, Infrared, WiFi, Bluetooth, Zigbee, Z-Wave.

The problem: The device-inclusion process is different for every protocol. 433 MHz and Infrared devices are unidirectional. Thus, the devices need to be “taught”. WiFi and Bluetooth-Devices are automatically discovered - which is the easiest way for the user. Zigbee-devices are automatically discovered as long as the Zigbee-Devices are brought into “pairing”-mode. Therefore, there are a few help-screens that show the user how to “reset” their ZigBee-device to start device pairing.

Unfortunately, this principle will not work for the Z-Wave protocol.

Target-State

With Z-Wave devices, the Device-Inclusion-Workflow should be like that:

• The user needs to start the Z-Wave device inclusion process by pressing a button inside the app (This feature is currently not implemented yet into the Ionic App!!!).
• The user then needs to press the “Pair”-Button on the Z-Wave-Product
• Device-Inclusion starts
• The user now sees the screen “New device discovered” - and is redirected to the device list and can control the Z-Wave device

The problem just is: How is this new “feature” being implemented in the easiest possible way without destroying the existing UX-Flows that actually work and are easy to understand

Posts: 1

Participants: 1

Read full topic

@briansone wrote:

Hi, I’m new to Ionic & working through the Ionic Angular Camera app example after running ‘ionic serve’ I get the following Typescript errors. I copy/pasted the example code from the web page to the already existing folders so it looks to me like the error is during compilation… any ideas?

Error:

ERROR in src/app/services/photo.service.ts:6:1 - error TS1128: Declaration or statement expected.
[ng] 6 public async addNewToGallery() {
[ng] ~~~~~~
[ng] src/app/services/photo.service.ts:6:14 - error TS1005: ‘;’ expected.
[ng] 6 public async addNewToGallery() {
[ng] ~~~~~~~~~~~~~~~
[ng] src/app/services/photo.service.ts:6:32 - error TS1005: ‘;’ expected.
[ng] 6 public async addNewToGallery() {
[ng] ~
[ng] src/app/tab2/tab2.page.ts:3:20 - error TS1005: ‘,’ expected.
[ng] 3 constructor(public photoService: PhotoService) { }
[ng] ~~~~~~~~~~~~
[ng] src/app/tab2/tab2.page.ts:3:32 - error TS1005: ‘,’ expected.
[ng] 3 constructor(public photoService: PhotoService) { }
[ng] ~
[ng] src/app/tab2/tab2.page.ts:3:48 - error TS1005: ‘;’ expected.
[ng] 3 constructor(public photoService: PhotoService) { }
[ng] ~
[ng]

My code, src/app/services/photo.service.ts

import { Plugins, CameraResultType, Capacitor, FilesystemDirectory, 
  CameraPhoto, CameraSource } from '@capacitor/core';

const { Camera, Filesystem, Storage } = Plugins;

public async addNewToGallery() {
  // Take a photo
  const capturedPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri, 
    source: CameraSource.Camera, 
    quality: 100 
  });
}

My code, src/app/tab2/tab2.page.ts:

import { PhotoService } from '../services/photo.service';

constructor(public photoService: PhotoService) { }

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am trying to display a map on my ionic app using Leaflet, but when I’m getting this error message:

TypeError: Cannot read property ‘addLayer’ of undefined

map: Map;

  constructor(private router: Router) { }

  ngOnInit() {
    this.loadMap();
  }

  loadMap() {
    tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
      })

      .addTo(this.map);
  }

Can someone please tell me why this is happening?

Posts: 1

Participants: 1

Read full topic

@smbu wrote:

Hi all,

I’m creating a pwa to scan a barcode and so far, I got this working

HTML:

  <div>
    <ion-button mode="md" size="large" expand="block" type="button" color="success" (click)="fileInput.click()">
      <ion-icon slot="start" name="barcode-outline"></ion-icon>scan barcode
    </ion-button>
    <input style="display: none" #fileInput type="file" accept="image/*" (change)="preview($event)">
  </div>

  <div class="mb-3" *ngIf="previewUrl" align="center">
    <br>
    <img [src]="previewUrl"  id="barcode"  width="320"/>
  </div>

  <div align="center" *ngIf="scanResult">
    <p style="font-weight: bolder; font-size: 25px; color: rgb(114, 114, 114);"> {{ scanResult }} </p>
  </div>

  <div align="center" *ngIf="scanError">
    <p style="font-weight: bolder; font-size: 25px; color: rgb(114, 114, 114);"> {{ scanError }} </p>
  </div>

TS:

@ViewChild("fileInput", { read: ElementRef, static: true }) fileInput: ElementRef;

  scanResult = null;
  scanError = null;

  fileData: File = null;
  previewUrl: any = null;
...
  preview(fileInput: any) {
    this.fileData = <File>fileInput.target.files[0];
    // Show preview 
    if (this.fileData != undefined) {
      if (this.fileData.type.match(/image\/*/)) {
        var reader = new FileReader();
        reader.readAsDataURL(this.fileData);
        reader.onload = () => {
          this.previewUrl = reader.result;

          const codeReader = new ZXing.BrowserBarcodeReader();
            console.log('barcode reader initialized');
            const imgnew = new Image();
            imgnew.src = this.previewUrl;

            document.body.appendChild(imgnew);
            codeReader
              .decodeFromImage(imgnew)
              .then(result => {
                this.scanError = null;
                console.log(result);
                this.scanResult = result.getText();
              })
              .catch(err => {
                this.scanResult = null;
                this.scanError = err;
                console.error(err);
              });
        },
          reader.onerror = error => console.log(error);
      }
    }
  }

The variabel “scanResult” is correct and gets immediately updated in the HTML.
But I need to resize the image to be able to decode the barcode on bigger images so I came up with this:

preview(fileInput: any) {
    this.fileData = <File>fileInput.target.files[0];
    if (this.fileData != undefined) {
     if (this.fileData.type.match(/image\/*/)) {
      const reader = new FileReader();
      reader.readAsDataURL(this.fileData);
      reader.onload = () => {
        this.previewUrl = reader.result;
        const img = new Image();
        img.src = this.previewUrl;
        img.onload = () => {
          const elem = document.createElement('canvas');
          const width = 320;
          const scaleFactor = width / img.width;
          elem.width = width;
          elem.height = img.height * scaleFactor;
          const ctx = elem.getContext('2d');
          ctx.drawImage(img, 0, 0, width, img.height * scaleFactor);
          ctx.canvas.toBlob(async (blob) => {
            const file = new File([blob], 'barcode.jpeg', {
              type: 'image/jpeg',
              lastModified: Date.now()
            });

            const codeReader = new ZXing.BrowserBarcodeReader();
            console.log('barcode reader initialized');
            const imgnew = new Image();
            imgnew.src = ctx.canvas.toDataURL(file.name);
            document.body.appendChild(imgnew);
            codeReader
              .decodeFromImage(imgnew)
              .then(result => {
                this.scanError = null;
                console.log(result);
                this.scanResult = result.getText();
              })
              .catch(err => {
                this.scanResult = null;
                this.scanError = err;
                console.error(err);
              });
          }, 'image/jpeg', 1);
        },
          reader.onerror = error => console.log(error);
      }
     }
    }
  }

The result still is correct, but my HTML does not get updated immediately anymore, only when I click the button again it is updated.

What am I doing wrong here ?

Posts: 1

Participants: 1

Read full topic

@EuanDScott wrote:

Hi All

I have an issue in my v4 app whereby my popover controller is not displaying anything. Even though in the constructor, if I console.log() the variable it displays the passed data.

Please see the attached code:

    async openComments (item, evt) {
      const popover = await this.popover.create({
        component: CommentPopoverComponent,
        event: evt,
        translucent: true,
        componentProps: {
          comments: item.comments
        },
        cssClass: 'popover__comment'
      })
      return await popover.present();
    }

constructor (
    private navParams: NavParams,
  ) {
    this.comments = navParams.get('comments')
    console.log('Comments: ', this.comments)
  }

The following is logged to my console:

Ionic info:

Ionic:

   Ionic CLI : 6.1.0

Utility:

   cordova-res (update available: 0.10.0) : 0.8.0
   native-run (update available: 0.3.0)   : 0.2.8

System:

   NodeJS : v12.12.0
   npm    : 6.11.3
   OS     : macOS Catalina

Any help would be much appreciated as this is a bug in a production app.

Regards,

Posts: 2

Participants: 2

Read full topic

@nitrique wrote:

Hi,

I have a mistake when I load a long list in a ion-modal using ion list, here is the sample code:

<ion-card>
        <ion-list radio-group padding-left padding-right>
            <ion-item *ngFor="let l of list">
                <ion-label>{{l[value]}}</ion-label>
                <ion-radio [value]="l[key]" (click)="select(l)" [checked]="l[key] == initialSelect"></ion-radio>
            </ion-item>
        </ion-list>
    </ion-card>

Data is an object with 200 rows (country lists) in this format :
{id: number, country: string, nationality: string}

You can see the bug in action here google drive video

It is only on iOS, but not on Android where is it working well.

Thanks for answers,
Nicolas

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am trying to add leaflet to my ionic app.

Below is

<div id="mapId" style="height:200px"></div>
  <ion-item style="cursor: pointer" (click)="locatePosition()">
    <ion-button fill="clear">
      <ion-icon slot="start" name="map"></ion-icon>
      Locate Position
    </ion-button>
  </ion-item>

And here is locatePosition():

locatePosition() {
    this.map.locate({ setView: true }).on("locationfound", (e: any) => {
      this.newMarker = marker([e.latitude, e.longitude], {
        draggable: true
      }).addTo(this.map);
      this.newMarker.bindPopup("You are located here!").openPopup();
      this.getAddress(e.latitude, e.longitude); // This line is added
      this.newMarker.on("dragend", () => {
        const position = this.newMarker.getLatLng();
        this.getAddress(position.lat, position.lng);// This line is added
      });
    });
  }

When I run the app on my desktop, & click LOCATE POSITION, my position is successfully displayed on the map.

However, when I run the app on my device (ionic cordova run android) & click LOCATE POSITION, the map isn’t updated with my current position.

I’ve tried debugging when running on the android device, but there are no errors being logged to the console

Posts: 1

Participants: 1

Read full topic

@tkclark wrote:

i have a ionic/vue project which has a login screen. when i use the screen like normal <Login/> it works fine, but when i put it in a modal i’m getting an error TypeError: Cannot read property 'dispatch' of undefined . i assume it’s because this maybe resolves to the screen that opened the Login vue instead of using what’s in the Vue page. anybody ever experienced this before?

Posts: 1

Participants: 1

Read full topic

@Mmadzharov wrote:

Hey,Guys
Do you know if there is a way to figure out if the ion-content is scrolled to the bottom?

Posts: 3

Participants: 2

Read full topic

@fogelfish wrote:

I hope this is the correct forum in which to ask this basic, beginner question.

If I am using just Ionic Studio with no other add-on features or services (e.g., AppFlow, nor the “Launch” level subscription) how do I go about sharing with my clients my in-progress app development? Particularly if I want them to see the app on their mobile devices? I’ve searched the web for information about this but I can’t seem to turn up any answers. I hope someone here can lead me to some answers. Thank you.

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am trying to add leaflet to my ionic app, the map is displaying as expected.

But no markers are displaying, & I’m getting these error messages in the console:

GET http://localhost:4200/marker-icon-2x.png 404 (Not Found)

GET http://localhost:4200/marker-shadow.png 404 (Not Found)

Here is my map-component.html:

<div class="map-container">
  <div class="map-frame">
    <div id="map"></div>
  </div>
</div>

Here is my typescript:

private map;
  constructor(private markerService: MarkerService) {
  }
  ngAfterViewInit(): void {
    this.initMap();
    this.markerService.makeCapitalMarkers(this.map);
  }

  private initMap(): void {
    this.map = L.map('map', {
      center: [39.8282, -98.5795],
      zoom: 3
    });
    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });
    tiles.addTo(this.map);
  }

And here is makeCapitalMarkers():

makeCapitalMarkers(map: L.map): void {
    this.http.get(this.capitals).subscribe((res: any) => {
      for (const c of res.features) {
        const lat = c.geometry.coordinates[0];
        const lon = c.geometry.coordinates[1];
        const marker = L.marker([lon, lat]);
        marker.addTo(map);
      }
    });
  }

Can someone please tell me why I’m getting that error message in the console, & how I can find these files? I can post whatever additional code is helpful too.

Thanks a lot in advance!

Posts: 1

Participants: 1

Read full topic

@santiago_vasquez06 wrote:

Hi everyone,
I am facing a design problem in the devices iPhone x and iPhone xs with the tab bar
is conflicting with the bar time on the device.

Posts: 1

Participants: 1

Read full topic

@jasonrabelo wrote:

I have a problem with width of ion-segment-button, when text of the button is overflow hidden
i need this button with overflow auto to show all text

this image show my problem:

The texts of buttons is this: [‘Promoção’, ‘Pizzas’, ‘Pizzas Doces’, ‘Calzones’, ‘Bordas Recheadas’, ‘Combos’]

localhost_8100_home(Galaxy S5) (1)1080×1920 378 KB

the itens Pizzas Doces and Bordas Recheadas is overflow

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am having an issue displaying a Leaflet map in my ionic app.

Here is how it is displaying:

map731×1311 19.3 KB

And here is the HTML:

<ion-content>
  <div class="map-container">
    <div class="map-frame">
      <div id="map"></div>
    </div>
  </div>
</ion-content>

When I remove the <ion-content> tags, this is how it’s displayed:

map1766×1344 113 KB

As you can see in the second one, the full map is displayed, but it’s still not presenting correctly (i.e. overlapping the toolbar).

Can someone please tell me how this can be resolved?

Posts: 1

Participants: 1

Read full topic

@mohammadzbggo wrote:

Hi,

I am using the AlertController in the app I’m building. This app is being migrated from v3 to v4 (using Angular) carefully with the hope of going to ionic 5 straight away after completion.

So I have a series of pages that is working as intended in ionic 3. I have migrated them as separate modules in ionic 4:

Let’s say I am using the tab layout and I have a home page.

The home page has links to 5 pages.

• page 1
• page 2
• page 3
• page 4
• page 5

Let’s say page 1 uses the alert controller on NgInit because I need to show it when they navigate to the page.
After I dismiss the alert modal and navigate back to home and then onto page 2 the alert modal shown. I don’t have the AlertController available in any parent modules.

Am I am missing something?

Thanks

Posts: 1

Participants: 1

Read full topic

@Catweazle101 wrote:

Hi all

I’m using the Ionic popover component and it works so far:

  async presentFilterPopover(event: any) {
    const popover = await this.popoverCtrl.create({
      component: PopoverContentComponent,
      event,
      translucent: false
    });
    return await popover.present();
  }

But as long I use in the template of my PopoverContentComponent pure Html it works.
But when I use a Ionic component as content like:

<ion-list>
</ion-list>

I receive following error:

image1096×310 21.8 KB

How can I use Ionic-components within the content of the popover?

Any idea?

Thx,
Oliver

Posts: 1

Participants: 1

Read full topic