Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all 48983 articles
Browse latest View live
↧

APK and Weird login screen

March 1, 2019, 11:36 am
$
0
0

@vanirajendran wrote:

I created an apk and downloaded to android phone to test the app. We work remote so I had to let my users download the app in their android phones.

I created a login screen for a prototype we built. It works great on browser. and works majority of the time in the phone. But when app is open and phone goes to sleep mode and when we re-open the phone, it goes to weird login screen as below

image
image.jpg1536×2048 833 KB

This screen is no way related to our login screen.

Any one had this issue and please advise how to fix this…

Posts: 1

Participants: 1

Read full topic

↧
Search

Is it possible to inject AngularJS (1.7.2) directive to a modal in Ionic 4?

March 1, 2019, 11:41 am
$
0
0

@raz-ride4you wrote:

This is the official documentation of creating a modal in Ionic 4 - for vanilla JS:

customElements.define('modal-page', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
<ion-header>
  <ion-toolbar>
    <ion-title>Super Modal</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  Content
</ion-content>`;
  }
});

async function presentModal() {
  // initialize controller
  const modalController = document.querySelector('ion-modal-controller');
  await modalController.componentOnReady();

  // present the modal
  const modalElement = await modalController.create({
    component: 'modal-page'
  });
  await modalElement.present();
}

presentModal();

This will pop the modal with the HTML that was “manually” written in the innerHTML.
However I want to render AngularJS directive, for example:

customElements.define('modal-page', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<my-custom-directive-functionality></my-custom-directive-functionality>`;
  }
});

However this doesn’t work and the modal appears blank.

Is it possible to do something like this:

// page.html
<modal-content></modal-content>

// page.js
const modalContent = document.querySelector('modal-content');

// and then create the modal with the next data:
const modalElement = await modalController.create({
    component: modalContent
  });

Posts: 1

Participants: 1

Read full topic

↧
↧

Ionic 4 sub paths not loading when running ionic serve

March 1, 2019, 12:38 pm
$
0
0

@disrupt wrote:

I had an ionic 4 beta project of --type=angular that was loading at any path without issue.

Periodically, i have been updating my packages by running an npm update and am currently at:

"@ionic/angular": "^4.0.2"

as well as updated installs for the ionic cli, and am currently at:

CLI 4.10.3

I am not sure when this app loading issue started, but i suspect it was after running the last npm update or update install of the cli.

When running ionic serve my application loads correctly, and i am able to navigate to all sub paths without any issues.

However, when:

  • refreshing the browser while viewing a sub path

  • attempting to enter a url with a sub path

  • cli live reloading while viewing a sub path

the app attempts to load all js files relative to the sub path and fails to run. for example:

http://localhost:8100/page/sub/path

fails to load because the app attempts to load runtime.js here:

http://localhost:8100/page/sub/path/runtime.js

my base href is currently set to ./

When i inspect the html source, the script tags are formatted as follows:

<script type="text/javascript" src="runtime.js"></script>

If i attempt to load a page directly at the root, the application loads ok without issue like so:

http://localhost:8100 loads OK

http://localhost:8100/page loads OK

So again to recap, the app only fails to load the js assets at a sub path.

Any idea where to begin troubleshooting?

Posts: 1

Participants: 1

Read full topic

↧

Push notification with Node.js

March 1, 2019, 1:00 pm
$
0
0

@quotennial wrote:

Hi ,

Are there any tutorials on how to use the ionic push notifications. All the tutorials are using firebase and \i’m currently using a Node server.

I want to be able to send the same push notification every 10 days as a reminder in my ionic 3 mobile app (iOS and Android)

Thanks!

Posts: 1

Participants: 1

Read full topic

↧

Ionic 3 + PHP

March 1, 2019, 1:04 pm
$
0
0

@Pabloco90 wrote:

Greetings !

I have the next issue: I’m trying get some information from a table in SQL Server and display them in a ion-select. I have the next code:

file.ts

for(var i = 0;i < data.length; i++){
    this.list = [
       {"Room": data[i][2],"ID":data[i][1]}
     ]
}

file.html

<ion-select [(ngModel)]="select">
   <ion-option value="">Select a option</ion-option>
   <ion-option *ngFor="let list of lists" value="{{ID}}">{{Room}}</ion-option>
</ion-select>

But the ion-select don’t display them.

Posts: 1

Participants: 1

Read full topic

↧
↧

Ionic 4 splash screen blurred on Samsung Tablet

March 1, 2019, 1:44 pm
$
0
0

@sqr08 wrote:

On my Samsung Galaxy Tab the splash screen is blurry. What I did was changed the drawable-port-mdpi-screen.png and drawable-land-mdpi-screen.png to be 1920x1280 and 1290x1920 respectively which fixed this in ionic 3 but instead the splash screen doesn’t show up anymore. any ideas?

Posts: 1

Participants: 1

Read full topic

↧

Ionic v4 keyboard pushing content up

March 1, 2019, 3:46 pm
$
0
0

@dev-gilbert wrote:

I am struggling find a solution for this issue, this method Keyboard.disableScroll(true) no longer exist with the later version of the keyboard plugin.

How can I fix this problem?

Posts: 1

Participants: 1

Read full topic

↧

Ion button change text color

March 1, 2019, 7:18 pm
$
0
0

@alfaodin wrote:

This is a problem I have in Ionic 4, but there is not the category (sorry), The problem is realy easy I want to change the color of an ion button, documentation says
(–color). It does not work , Do I need something else. Thank you.

Posts: 1

Participants: 1

Read full topic

↧
Search

Expand="block" not working on button in ionic 4

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

@anuj9196 wrote:

I’m using Ionic 4.

I have set button like

<ion-item lines="none">
    <ion-button type="submit" color="primary" expand="block">
        Login
    </ion-button>
</ion-item>

<ion-item lines="none">
    <ion-button type="button" color="danger" expand="block" (click)="loginGoogle()">
        Login using Google
    </ion-button>
</ion-item>

But buttons are not full width

59%20AM

Posts: 1

Participants: 1

Read full topic

↧
↧

Create JavaScript Project Ionic4

March 1, 2019, 9:08 pm
↧

Making card on top of the item

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

@anuj9196 wrote:

I am designing a layout like

59%20AM

I have the HTML defined as

<ion-content>

    <ion-item color="primary">

        <ion-grid fixed padding padding-top padding-bottom class="auth-header">
            <ion-row>
                <ion-col text-center>
                    <ion-item lines="none" color="transparent">
                        <ion-img src="./assets/images/logo/no11_100.png" class="auth-logo"></ion-img>
                    </ion-item>
                </ion-col>
            </ion-row>

            <ion-row>
                <ion-col text-center>
                    <ion-item lines="none" color="transparent">
                        <ion-label text-center class="label-solid">Login</ion-label>
                    </ion-item>
                </ion-col>
            </ion-row>
        </ion-grid>

    </ion-item>

    <ion-item lines="none">

        <ion-grid>
            <ion-row>
                <ion-col>

                    <ion-card class="auth-card">
                        <ion-card-content>

                            <-- form content here -->

                        </ion-card-content>
                    </ion-card>

                </ion-col>
            </ion-row>
        </ion-grid>

    </ion-item>
</ion-content>

Which looks like

44%20AM
Screenshot 2019-03-02 at 12.40.44 AM.png450×525 13.4 KB

Here the top of the card is hidden behind the blue background.

I have added following CSS

:root {
  .auth-card {
    margin-top: -50px;
  }
}

How could I bring it to top?

Posts: 1

Participants: 1

Read full topic

↧

'ion-anchor' is not a known element:

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

@anuj9196 wrote:

I’m using Ionic 4.

I have defined an anchor tag like

<ion-anchor href="/forgot" routerDirection="forward">
    Forgot Password?
</ion-anchor>

But this is giving an error

'ion-anchor' is not a known element:

The documentation describes it

Posts: 1

Participants: 1

Read full topic

↧

Error: Uncaught (in promise): TypeError: Object(...) is not a function when implementing network

March 1, 2019, 10:21 pm
$
0
0

@Vbhumire wrote:

Hi i am new to Ionic.when i am implementing network functionality to know the status of network i am facing the following error.

Error: Uncaught (in promise): TypeError: Object(…) is not a function
TypeError: Object(…) is not a function
at Network.onDisconnect (vendor.js:75352)
at new HomePage (main.js:563)
at createClass (vendor.js:13176)
at createDirectiveInstance (vendor.js:13011)
at createViewNodes (vendor.js:14469)
at createRootView (vendor.js:14358)
at callWithDebugContext (vendor.js:15783)
at Object.debugCreateRootView [as createRootView] (vendor.js:15066)
at ComponentFactory_.create (vendor.js:11963)
at ComponentFactoryBoundToModule.create (vendor.js:4715)
at c (polyfills.js:3)
at c (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (vendor.js:5436)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
at e.invokeTask [as invoke] (polyfills.js:3)
at p (polyfills.js:2)

can anyone please help me out.

Thanks in advance

Posts: 1

Participants: 1

Read full topic

↧
↧

Returning data from Ionic4 Modal [object Object]

March 1, 2019, 11:08 pm
$
0
0

@aligassan wrote:

I’m trying to create a modal window inside Home Page , pass it an radio group , when a user select one value from that radio group, and then have my modal pass back the object they’ve selected to Home Page again .

radio group page and html

  export class PopoverstationsPage implements OnInit {

      cities :any

      constructor(public nav : NavController,public nav : NavController,public modalController: ModalController ,public router : Route) { }

      ngOnInit() {
        console.log(this.cities)
      }

      onRadioChange(cities: Tab1Page):void {
    this.modalController.dismiss(cities);

      console.log(this.cities)
  }

    }

html

<ion-list>
        <ion-radio-group (ionChange)="onRadioChange()" [(ngModel)]="cities">
            <ion-list-header>
                <ion-label>Name</ion-label>
            </ion-list-header>

            <ion-item>
                <ion-label>ميناء خصب</ion-label>
                <ion-radio slot="start" value="26.2105,56.244" ></ion-radio>
            </ion-item>

            <ion-item>
                <ion-label>مطار خصب</ion-label>
                <ion-radio slot="start" value="26.161722,56.23672"></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>دبا</ion-label>
                <ion-radio slot="start" value="25.615627,56.247322"></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>البريمي</ion-label>
                <ion-radio slot="start" value="24.233913,55.916176"></ion-radio>
            </ion-item>

        </ion-radio-group>
  </ion-list>

home page receive value form page above then use it in test function weather

     export class HomePage implements OnInit {

              cities :any

              constructor(public nav : NavController,public modalController: ModalController) { }

              ngOnInit() {
                console.log(this.cities)
              }

            async openUserModal() {
           const modal = await this.modalController.create({
         component: PopoverstationsPage,
        componentProps: { cities: this.cities },
      });

      modal.onDidDismiss()
        .then((data) => {
          const cities= data
          console.log(cities)
      });

      return await modal.present();
    }


async test (){

  this.https.get('weather/'+this.cities+'.json')
  .subscribe(data => {

    this.weather = data

  })


}

 }

when data ara return l got [object Object] in console ! anyidea please ?

Posts: 1

Participants: 1

Read full topic

↧

Hardware back button Issue in ionic 4.10.3

March 1, 2019, 11:43 pm
$
0
0

@Ronbd53 wrote:

I am using Latest android studio, with every thing up to date . i just created a application with ionic current version . but problem is . when i debag it in my android device . i can’t close the application using back button . i am just confused . whats wrong with my application , i tryed all off step like ```
this.platform.exitApp();

this.platform.exitApp();

or
navigator.app.exitApp()

or
navigator[‘app’].exitApp()

but nothing is worked , just confused . why ionic doing ths with us every time . its really a good idea to update. but with proper gideline .

Posts: 1

Participants: 1

Read full topic

↧
Search

Build apk with phonegap done white screen long time

March 2, 2019, 1:27 am
$
0
0

@fahd123 wrote:

I using IONIC 4 , when i build apk in phonegap and testing in my phone , just display white screen long time
please help me to resolve my problem

Posts: 1

Participants: 1

Read full topic

↧

Local storage not save value of a checked radio

March 2, 2019, 2:40 am
$
0
0

@aligassan wrote:

I’d like to store my checked radio button in local storage from returning data from Ionic 4 Modal . when l click on any radio button to change value and reload page l got same value not saving in local storage

export class Tab1Page {
  weather:any;
  cities = 'Muscat'

    constructor(private https: HttpClient,public popoverController: PopoverController
      ,public nav : NavController,public modalController: ModalController,
      private storage: Storage ) {

        this.test()

    }

    async test (){

      this.https.get('weather/'+this.cities+'.json')
      .subscribe(data => {

        this.weather = data

      })

  this.storage.set('cities',this.cities)

  this.storage.get('cities',this.cities).then((val) => {
    console.log('Your city is', val);
  });   

 }


    async openUserModal() {

      const modal = await this.modalController.create({
        component: PopoverstationsPage,
      });

      await modal.present();
      modal.onDidDismiss().then((r) => {

        console.log("the result:", r , 'test'+ this.cities);
        this.cities = r.data.result

        this.test()
      this.storage.set('cities',this.cities)

  this.storage.get('cities',this.cities).then((val) => {
    console.log('Your city is', val);
  });     

      });

    }

l puted storage in two function to check if he is saving or not but he doesn’t save . how can l save and keep it value when l change it from radio button even if reload page ?

Posts: 1

Participants: 1

Read full topic

↧
↧

Using database with Ionic mobile app

March 2, 2019, 2:42 am
$
0
0

@Baskyabro wrote:

Hello everyone, just looking for advice on a mobile app. I am creating a pokemon app(dumbed down version of bulbapedia/smogon) using Ionic. I was just looking for advice on what kind of database I should use to store the data, such as pokemon names, moves, types. I see people suggesting sqlite, firebase, etc… but didn’t know which would be best for calling this data efficiently. I tried just calling the PokeAPI for the data but it is way too slow. Any help would be appreciated!

Posts: 1

Participants: 1

Read full topic

↧

Ionic 3 webview problem that I want to ask for

March 2, 2019, 3:28 am
$
0
0

@pdj wrote:

Hello :slight_smile:
I have a simple app that when user launch app, it automatically redirect to some web page(I’m using inappbrowser);
but the problem is that after splah loading image, there is a blank page before launch webview. it’s becuase home.html is white blank page.

is there any trick that it looks appear webview right after splash image?

I tried to load image file just like splash image
but it also have white page shown first and then show png image

home.html
```
your image

Posts: 1

Participants: 1

Read full topic

↧

Getting error in firebase-analytics plugin using ionic 3

March 2, 2019, 4:55 am
$
0
0

@saberprashant wrote:

Hi everyone,

I am using firebase-analytics plugin in my ionic 3 app, which I installed following this link:


Now, when I try to fire a custom event using this:

this.firebaseAnalytics.logEvent('page_view', {page: "dashboard"})
  .then((res: any) => console.log(res))
  .catch((error: any) => console.error(error));

I am getting an error as:

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at FirebaseAnalytics.logEvent (vendor.js:102827)
    at MyApp.webpackJsonp.853.MyApp.registerFA (main.js:8375)
    at main.js:8239
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (vendor.js:4509)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:4500)
    at FirebaseAnalytics.logEvent (vendor.js:102827)
    at MyApp.webpackJsonp.853.MyApp.registerFA (main.js:8375)
    at main.js:8239
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (vendor.js:4509)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:4500)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:4500)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)

I don’t know what is the problem as no custom methods like setCurrentScreen() , setUserId()etc aren’t working.
But all the automatic tracking events like “user_engagement”, “screen_view”, etc which are fired by firebase analytics by default are working properly (I even saw them in my firebase console).

Please help :slight_smile:

Posts: 1

Participants: 1

Read full topic

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