Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 71531 articles
Browse latest View live
↧

Canvas in ionic 4

March 9, 2019, 7:15 am
$
0
0

@Antoine44 wrote:

Hello,

I used ionic 3 with a canvas to make a plan and I switched to ionic 4, only I can not use canvas with ionic 4, but I use the same code.

Below, I just put the code that allowed to create the canvas. (This code works for ionic 3 but not for ionic 4).
In the .ts :
import { Component, ElementRef, ViewChild } from ‘@angular/core’;

@Component({
selector: ‘app-tab2’,
templateUrl: ‘tab2.page.html’,
styleUrls: [‘tab2.page.scss’]
})
export class Tab2Page {

@ViewChild(‘canvas’) canvasEl : ElementRef;
private _CANVAS : any;
private _CONTEXT : any;

constructor(){}

ionViewDidLoad() : void
{
   this._CANVAS 		    = this.canvasEl.nativeElement;
   this._CANVAS.width  	= 500;
   this._CANVAS.height 	= 500;

   this.setupCanvas();
}


setupCanvas() : void
{
  this._CONTEXT = this._CANVAS.getContext('2d');
  this._CONTEXT.clearRect(0, 0, this._CANVAS.width, this._CANVAS.height);
  this._CONTEXT.fillStyle = "#ff0000";
  this._CONTEXT.fillRect(100, 100, 400, 400);
}

}

In the .html :
<ion-content>
<div class=“ion-canvas”>
<canvas #canvas></canvas>
</div>
</ion-content>

Thank you in advance for your help

Posts: 1

Participants: 1

Read full topic

↧
Search

#someForm="ngForm" | The someForm.submitted flag is not working. Ionic 4

March 9, 2019, 7:53 am
$
0
0

@murilocardoso wrote:

Hi,

My first problem is about submitting a form.

<form #someForm="ngForm" [formGroup]="myForm" (submit)="doSomething()">
<ion-fab-button type="submit"> </ion-fab-button>
</form>

The code above never triggers the doSomething() function.

Trying to solve my first problem I got another one:

<form #someForm="ngForm" [formGroup]="myForm" (ngSubmit)="doSomething()">
<ion-fab-button type="submit" (click)="someForm.ngSubmit.emit()" > </ion-fab-button>
</form>

The code above triggers doSomething() function but I have some validations that check if someForm.submitted is true but its never get true.

Thanks!

Posts: 1

Participants: 1

Read full topic

↧
↧

Fixed on desktop, relative to toolbar on mobile

March 9, 2019, 8:49 am
$
0
0

@reedrichards wrote:

I’ve got an element’s position which should be fixed on desktop but relative to the ion-footer > ion-toolbar on mobile

I tried to assign a fixed position to the element but it seems blocked by the toolbar (the element is then displayed outside the page)

Any idea how I could achieve that?

Posts: 1

Participants: 1

Read full topic

↧

Ionic 3 doesn't send session cookies on iOS build

March 9, 2019, 9:15 am
$
0
0

@guddu211 wrote:

I have a problem with iOS only, after user login on the next http request Ionic doesn’t send session cookies. My all platform are based on session cookies authentication. When I build android everything works just fine but I have a problems with iOS.
I am searching for solution from last 2 month please help me out…

Posts: 1

Participants: 1

Read full topic

↧

Get primary color from code

March 9, 2019, 9:31 am
$
0
0

@adsfelipe wrote:

How to get the Primary color in variables.css from code?

this one: --ion-color-primary: #008c8c;

i want to get this on typescript…

Thanksss

Posts: 1

Participants: 1

Read full topic

↧
↧

Custom UI on notification bar

March 9, 2019, 10:21 am
$
0
0

@ionicfan2019 wrote:

Hi all,

I’m using Ionic 4 to write an app which has a media player which plays a media file in the background.

I would like to have a mini player on Notification Bar like the picture below so that the user can pause or stop playing without going back to the app.

1

I’ve found some tutorials with Android Studio and Java/Kotlin but found nothing helpful with Ionic.

I would like to ask if we can create a custom notification UI like that with Ionic? If yes, can you please send me a link so that I can read and learn myself.

Thank you in advance.

Posts: 1

Participants: 1

Read full topic

↧

How to find file on android device

March 9, 2019, 1:29 pm
$
0
0

@wekas wrote:

Hi guys,
I have created this file on my device:
‘file:///data/user/0/io.ionic.starter/files/mypdf.pdf’

But I can’t figure out how to find that file manually using my android device. Any ideas?
Note: I am using an emulator, Nexus 5X.

Cheers!

Posts: 1

Participants: 1

Read full topic

↧

Create an Image from URL - Social Sharing

March 9, 2019, 2:21 pm
$
0
0

@noonestopsme wrote:

Hello All,

I am trying to implement social sharing for my app. I am using amazon to get images with 20 seconds expiration time. The problem is, when I share the link, the link expires soon. I am trying to create an image on the fly when the image is first loaded. All I have is image url. How can I convert it to Base64? Is there any way of doing that? Because, whenever I try to get the same URL using HttpClient get method, unknown error returns from the remote-end. Your advices would be appreciated.

Thanks in advance.

Posts: 1

Participants: 1

Read full topic

↧
Search

Customize Ionic 4 toast css [position, text-position]

March 9, 2019, 7:52 pm
$
0
0

@joabchua wrote:

Hi All,
I am using ionic 4. My application has tabs at the bottom. I am using toast at the bottom of my page whenever an operation is completed. I would like to find out how I can shift the toast slightly higher so that my tabs component will not be partially covered by the toast at the bottom when an operation is completed.

Current limitation now:

image
image.png308×549 9.12 KB

Hope to achieve this.

image
image.png311×552 10.6 KB

Please advise and also if there is any option to center the text msg in the toast would be perfect. Thank you.

Posts: 1

Participants: 1

Read full topic

↧
↧

Capacitor: How can I write to a public folder on android?

March 9, 2019, 7:53 pm
$
0
0

@wekas wrote:

I am trying to write a file to an Android device that can be accessed by the user or apps on the device.
I am currently using FilesystemDirectory.Documents.
The code below writes to:

file:///storage/emulated/0/Documents

However I can’t browse to this location on the device.
Is there a way I can write to a public location?

Code:

const fileName = 'defectreport.pdf';
        try {
          Filesystem.writeFile({
            path: fileName,
            // data: this.pdfBase64,
            data: this.pdfBase64,
            directory: FilesystemDirectory.Documents,
            encoding: FilesystemEncoding.UTF8
          }).then((writeFileResult) => {
            console.log('File Written');
            console.log(writeFileResult);
            Filesystem.getUri({
                directory: FilesystemDirectory.Documents,
                path: fileName
            }).then((getUriResult) => {
                console.log(getUriResult);
                const path = getUriResult.uri;
                this.fileOpener.open(path, 'application/pdf')
                .then(() => console.log('File is opened'))
                .catch(error => console.log('Error openening file', error));
            }, (error) => {
                console.log(error);
            });
          });
          console.log('writeFile complete');
        } catch (error) {
          console.error('Unable to write file', error);
        }

Posts: 2

Participants: 1

Read full topic

↧

Does Capacitor writeFIle only write strings to txt files?

March 9, 2019, 10:28 pm
↧

How to dismiss multiple modals in ionic v4?

March 9, 2019, 10:56 pm
$
0
0

@mehthaf wrote:

here currently im using ionic v4 . i need to close all opened modals in app .i use modalcontroller to dismiss the current modal. but i can’t hide the another modals. anyone tell me how to hide all modals in app

Posts: 1

Participants: 1

Read full topic

↧

PositionError {code: 3, message: "Timeout expired"}

March 10, 2019, 12:26 am
$
0
0

@iscorobogaci wrote:

Geolocation is giving such error.

getUserPosition() {
        return new Promise(resolve => {
            const HIGH_ACCURACY = 'high_accuracy';
            if (this.platform.is('cordova')) {
                console.log('Platform is cordova');
                this.platform.ready().then(() => {
                    console.log('Platform is ready');
                    this.diagnostic.isLocationEnabled().then(enabled => {
                        console.log('Location is enabled: ' +enabled);
                        if (enabled) {
                            if (this.platform.is('android')) {
                                console.log('Platform is android');
                                this.diagnostic.getLocationMode().then(locationMode => {
                                    console.log('Location Mode : ' + locationMode);
                                    if (locationMode === HIGH_ACCURACY) {
                                        this.geo.getCurrentPosition({
                                            timeout: 30000,
                                            maximumAge: 0, //was 0
                                            enableHighAccuracy: false //was true
                                        }).then(pos => {
                                            resolve({
                                                coords: {
                                                    latitude: pos.coords.latitude,
                                                    longitude: pos.coords.longitude
                                                }
                                            });
                                        }).catch(error => resolve(error));
                                    } else {
                                        this.askForHighAccuracy().then(available => {
                                            console.log('High Accuracy is available : ' + available);
                                            if (available) {
                                                this.getUserPosition().then(a => resolve(a), e => resolve(e));
                                            }
                                        }, error => resolve(error));
                                    }
                                });
                            } else {
                                this.geo.getCurrentPosition({
                                    timeout: 30000,
                                    maximumAge: 0,
                                    enableHighAccuracy: true
                                }).then(pos => {
                                    resolve({
                                        coords: {
                                            latitude: pos.coords.latitude,
                                            longitude: pos.coords.longitude
                                        }
                                    });
                                }).catch(error => resolve(error));
                            }
                        } else {
                            this.locationAccuracy.request(1).then(result => {
                                console.log('Location accuracy : ' + result);
                                if (result) {
                                    this.getUserPosition().then(result => resolve(result), error => resolve(error));
                                }
                            }, error => {
                                resolve(error)
                            });
                        }
                    }, error => {
                        resolve(error)
                    });
                });
                //user on browser
            } else {
                //resolve('Cordova is not available');
                resolve(this.geo.getCurrentPosition());
            }
        });
    }

    askForHighAccuracy(): Promise<Geoposition> {
        return new Promise(resolve => {
            this.locationAccuracy
                .request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(() => {
                this.geo.getCurrentPosition({timeout: 30000}).then(
                    position => {
                        resolve(position);
                    }, error => resolve(error)
                );
            }, error => resolve(error));
        });
    }

failing with timeout :

    this.geo.getCurrentPosition({
                                            timeout: 30000,
                                            maximumAge: 0, //was 0
                                            enableHighAccuracy: false //was true
                                        }).then(pos => {
                                            resolve({
                                                coords: {
                                                    latitude: pos.coords.latitude,
                                                    longitude: pos.coords.longitude
                                                }
                                            });
                                        }).catch(error => resolve(error));

Issue on android devices , any help ?

Posts: 1

Participants: 1

Read full topic

↧
↧

Trouble navigating Tab child pages with Angular Router in Ionic 4

March 10, 2019, 1:39 am
$
0
0

@SteynMarnus wrote:

I am using a tabbed screen layout where the tab module has its own routes to host the tab pages and their children pages too. Here is the routes object (i.e in the tabs.router.module.ts) :

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'home',
                children: [
                    {
                        path: '',
                        loadChildren: '../pages/home/home.module#HomePageModule'
                    }
                ]
            },
            {
                path: 'deliverablesIndex',
                children: [
                    {
                        path: '',
                        loadChildren: '../pages/deliverables-index/deliverables-index.module#DeliverablesIndexPageModule'
                    },
                    {
                        path: 'create',
                        children: [
                            {
                                path: '',
                                loadChildren: '../pages/deliverable-create/deliverable-create.module#DeliverableCreatePageModule'
                            }
                        ]
                    }
                ]
            },
            {
                ...some more tabs
            },
            {
                path: '',
                redirectTo: 'tabs/home',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: 'tabs/home',
        pathMatch: 'full'
    }
];

This works great for navigating between the tabs, however when I try to navigate one page deeper in the deliverablesIndex to the create sub route, I get this error: Cannot match any routes. URL Segment: '/tabs/deliverablesIndex/create'

I am using this to navigate upon a button click:

 this.router.navigate(['/tabs/deliverablesIndex/create/']);

I’ve tried '/tabs/deliverablesIndex/create/' and 'tabs/deliverablesIndex/create/' to no avail.

It works however when I type the URL myself in the browser: http://localhost:8100/core/tabs/deliverablesIndex/create .

What am I missing here?

Posts: 1

Participants: 1

Read full topic

↧

Ionic Appflow (Live hot code updates)

March 10, 2019, 6:00 am
$
0
0

@flpcorrea wrote:

Hi,

Live hot code updates

Deliver live app updates, content changes, A/B tests, bug fixes, and more—before or after your app is in the store. No lines, no waiting, no slowdowns.

I would like to understand better about Live hot code updates. Let me show you an example to get you to ask the question.

I developed an application and published it in the App Store, but a few days later I had to fix a bug. Before my update gets to the user I need to wait for the App Store to approve my change.

My question. Using Ionic Appflow through Live hot code updates would it be possible to update the application to reach the end user even before the approval made by the App Store?

Posts: 1

Participants: 1

Read full topic

↧
Search

Undefined symbols for architecture x86_64

March 10, 2019, 6:12 am
$
0
0

@cdwebinfo wrote:

Undefined symbols for architecture x86_64:

"OBJC_CLASS$_SKStoreProductViewController", referenced from:

objc-class-ref in CDVAppRate.o

"_SKStoreProductParameterITunesItemIdentifier", referenced from:

___29-[CDVAppRate launchAppStore:]_block_invoke in CDVAppRate.o

ld: symbol(s) not found for architecture x86_64

clang: error: linker command failed with exit code 1 (use -v to see invocation)

Check solution on this url - https://allexperts16.blogspot.com/2019/03/undefined-symbols-for-architecture-x8664.html

Posts: 1

Participants: 1

Read full topic

↧

Ionic 4 - How change dir for multi language app

March 10, 2019, 6:29 am
$
0
0

@ebeliejinfren wrote:

Hi
how can change dir of app in multi language app. change rtl and tlr
in ionic 3 it’s possible by multi language app Platform setDir but i don’t know in ionic v4

Thanks

Posts: 1

Participants: 1

Read full topic

↧
↧

Tabs is covering footer on all pages

March 10, 2019, 6:56 am
$
0
0

@lunneyd wrote:

I am using tabs and anytime I use footer in html part of code, the footer does not show or any content in the footer. I think the tabs is covering it. Any ideas on how to fix it.

<ion-footer>
  <ion-toolbar>
    <ion-input type="text" name="message" placeholder="Message" [(ngModel)]="message"></ion-input>
    <ion-buttons end>
      <button ion-button icon-right color="royal" (click)="sendMessage()">
        <ion-icon name="md-send"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

Posts: 1

Participants: 1

Read full topic

↧

Ionic4 image caching

March 10, 2019, 7:23 am
$
0
0

@codiqa100047031 wrote:

Hi
I’m looking for a way to cache images

I have an ionic 4 hybrid app that shows many images

can somebody recommend me a plugin ?

Posts: 1

Participants: 1

Read full topic

↧

Please tell me how to use the documentation for CSS custom properties in Ionic 4

March 10, 2019, 12:09 pm
$
0
0

@brianmackey wrote:

ion-menu has various CSS custom properties.. One of which is --background.

Please tell me how I can set the --background CSS property. Is this set in an HTML attribute? In SCSS? Either way?

I tried:

<ion-menu class="myMenu" contentId="menu-content">
.myMenu {
    --background: red;
}

And the background stays at whatever I set for --ion-background-color: #3880ff;

Posts: 1

Participants: 1

Read full topic

↧
Viewing all 71531 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>