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

[noob question] Trying to build an app and this error occurs


On ionic chart js...how to not displaying value on graph

$
0
0

@pdj wrote:

03

38
I really don’t want to display value on the bar…how can I get rid of it?

this.painChart = new Chart(this.painCanvas.nativeElement, {
  plugin: [ChartDataLabels],
  type: 'bar',
  data: {
      labels: [1,2,3,4,5,6,7,8,9,10],
      datasets: [{
          
          data: [this.onecount,this.twocount,this.thirdcount,this.fourcount,this.fivecount,this.sixcount,this.sevencount,this.eightcount,this.ninecount,this.tencount],
          backgroundColor: "#ced0d6",
          borderWidth: 3,
      }]
  },
  options: {
      legend: {
        display: false
       },
      scales: {
        xAxes: [{
          categoryPercentage:1.0,
          barPercentage: 0.2,
          barThickness: 10,
          maxBarThickness: 10,
          minBarLength: 5,
          gridLines: {
              drawOnChartArea: false,
              offsetGridLines: true
          }
      }],
          yAxes: [{
            gridLines: {
              offsetGridLines: false
            },
              ticks: {
                  beginAtZero:true,
                  max:30
              }
          }]
      }
  }

});

Posts: 1

Participants: 1

Read full topic

Manipulate navigation history for mobile app

$
0
0

@MarioZeta wrote:

I’m working on an app which has these pages:
Select procedure => Select item => procedure 1 form
Select procedure => Select item => procedure 2 form

When the user completes a procedure, if there are other pending procedures to complete, there’s an option to go directly to that procedure form. Like this:

Select procedure => Select item => procedure 1 form => procedure 2 form

However, I don’t want the user to go back to the previous procedure, because it’s already completed. If he taps back, I want the app to send him back to the Select item screen. I need to remove the last procedure from the navigation Stack.

Now I’m not really looking for advice about how manipulating the history stack is bad design, this is a very specific case in which I really need to do it. This was possible in Ionic 3, you could freely remove pages from the stack. However, in Ionic 4, using Angular routing, I couldn’t find a way to do it. The stack has to be stored somewhere, I just don’t know how to access it. There’s also extra parameters for the Router.Navigate() function that could help me (more specifically, replaceUrl), but they seem to be ignored when using the app on a mobile device. I’ve heard it’s a bug that was fixed in a nighty build, but I don’t want to risk the project with unstable versions, so I’m looking for alternatives. Any ideas?

Posts: 1

Participants: 1

Read full topic

'Access-Control-Allow-Origin' header is present on the requested resource

$
0
0

@Hammad6264 wrote:

Hi friends hope you will be fine! actually i’m working with ionic 4 and woocommerce app.When i register account from app i get error ‘Access-Control-Allow-Origin’ header is present on the requested resource. See in this screenshort:
Screenshot_1

I’m also CORS extension for it. Please help me???

Posts: 1

Participants: 1

Read full topic

Ionic 4 Upload Error

$
0
0

@ElDiabolus wrote:

Hi,
I updated my app to ionic 4, did some changes and wanted to upload it to the iOS AppStore. PlayStore worked fine but the AppStore is creating an error message

Upload failed

App store connect operation error
Your app contains non-public API usage. Please, review the errors, correct them, and resubmit your application.

App store connect operation error
The app references non-public selectors in Payload/AppName.app/AppName
_setAlwaysRunsAtForegroundPriority;

I tried

cordova plugin rm cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview@4.1.0
npm install
ionic cordova build ios --release

as it was mentioned here: https://forum.ionicframework.com/t/error-your-app-contains-non-public-api-usage-uploading-an-app-on-ios-app-store/168240 but it didn’t changed anything.
I tried renaming _setAlwaysRunsAtForegroundPriority which fixed the upload error but caused a crash after startup (Signal SIGABRT).

Do you have any suggestions what I can do?
Thank you very much

Posts: 1

Participants: 1

Read full topic

Im getting dat from the server not able to display on ui?

$
0
0

@surumulluprudhviraj wrote:

Data getting from server i need to display the val value in html im binding the data
{{ data.Message.val }}
in data where object is storing

  • {abc-egr-7001: Array(0)}
    • abc-egr-7001: Array(0)
      • Message: {val: “0%”, priorityArray: {…}} length: 0 proto: Array(0)
    • proto: Object

ERROR i am getting:
ZonedetailsPage.html:120 ERROR TypeError: Cannot read property ‘val’ of undefined
at Object.eval [as updateRenderer] (VM403 ZonedetailsPage.ngfactory.js:471)
at Object.debugUpdateRenderer [as updateRenderer] (VM26 vendor.js:59642)
at checkAndUpdateView (VM26 vendor.js:59017)
at callViewAction (VM26 vendor.js:59253)
at execEmbeddedViewsAction (VM26 vendor.js:59216)
at checkAndUpdateView (VM26 vendor.js:59013)
at callViewAction (VM26 vendor.js:59253)
at execEmbeddedViewsAction (VM26 vendor.js:59216)
at checkAndUpdateView (VM26 vendor.js:59013)
at callViewAction (VM26 vendor.js:59253)

Posts: 1

Participants: 1

Read full topic

Ionic 4 initial slide loads with delay

$
0
0

@tobiasduelli wrote:

I updated my Ionic 3 project to Ionic 4 and since then my slider first loads slide with index 0 and after some seconds it loads the initial slide. Could lazyloading be the problem?

.html

<ion-slides [options]="slideOpts" (ionSlideDidChange)="slideDidChange()" #myslides style="height:100%; width:100%;">
        <ion-slide>
            <app-noticed-events style="height:100%; width:100%;"></app-noticed-events>
        </ion-slide>
        <ion-slide>
            <app-home style="height:100%; width:100%;"></app-home>
        </ion-slide>
        <ion-slide>
          <app-map style="height:100%; width:100%;"></app-map>
        </ion-slide>
      </ion-slides>

.ts
slideOpts = {initialSlide:1, zoom: false}

Posts: 1

Participants: 1

Read full topic

[Tutorial] How to implement StartApp Ads in your Ionic App

$
0
0

@reinerluke97 wrote:

Hello guys today Im exited to tell you that I have created a Cordova Plugin for StartApp Ads to use it with Ionic.

Many of us dont want to use Admob anymore because they got banned or dont like it or for any other reason.
I got banned aswell (because I got click bombed by someone) and couldnt find any alternativ ad network which is supported by ionic/cordova.

So I searched and found NOTHING. Most plugins where outdated or didnt work, but I wanted something simular like Admob. And I found it. www.startapp.com. They have almost the same dashboard and analytics and to use it you only have to add your App and you get the App ID. Thats all you need. Nothing complicated.

My Plugin is developed simular to the admob-free, admob-plus plugin we all know so if you implemented it once you have an easy time to use my plugin too.

But here is the catch: Currently I only have implemented Android Support. Im working hard to implement iOS aswell. Just stay tuned and GitHub for Updates and Documentation Updates! :slight_smile:

Well now lets start to use it! :smiley:
(If it helped you to reduce developing time It would be nice if you can give me a star :slight_smile: )

Ionic 3+ Implementation

1. Installation

First you need to install the cordova plugin in your Ionic Project with Cordova CLI

ionic cordova plugin add cordova-plugin-startapp-ads

or with URL

ionic cordova plugin add https://github.com/lreiner/cordova-plugin-startapp-ads.git

2. Setup the Plugin

To start declare the Plugin below your imports:
NOTE: This must be declared in every Page where you want to use StartAppAds!

import ..... //your imports
declare var StartAppAds:any;

Now you need to init your Plugin with your App ID from StartApp first. I would recommend to do it in your app.component.ts file when platfrom is ready.

this.platform.ready().then(() => {
  if(this.platform.is("android")) {
    StartAppAds.init("<your-android-app-id>");
  }
});

Nice! :slight_smile: Now you can use StartAppAds everywhere in your project.

3. Show/Hide Banner Ads

Show a Banner Ad on the bottom of your app. (I recommend to either do this in app.components.ts or in the constructor of any other page).

StartAppAds.showBanner();

Hide the Banner

StartAppAds.hideBanner();

Events you can subscribe to (recommended to put it in the constructor of any page):

document.addEventListener('startappads.banner.load', () => {
  //banner has been loaded and displayed.
  //do something here
});

document.addEventListener('startappads.banner.load_fail', () => {
  //banner failed to load
  //do something here
  //IMPORTANT: if banner failed to load dont use StartAppAds.showBanner(); again. StartAppAds will load a new one by itself!
});

document.addEventListener('startappads.banner.clicked', () => {
  //banner has been clicked
  //do something here. Usefull to hide banner to prevent click bombing.
});

document.addEventListener('startappads.banner.hide', () => {
  //banner has been removed
  //do something here
});

4. Show Interstitial Ads

Show a Interstitial Ad:

StartAppAds.showInterstitial();

Events you can subscribe to (recommended to put it in the constructor of any page):

document.addEventListener('startappads.interstitial.closed', () => {
  //interstitial closed by user
  //do something here
});

document.addEventListener('startappads.interstitial.displayed', () => {
  //interstitial showed up
  //do something here
});

document.addEventListener('startappads.interstitial.clicked', () => {
  //interstitial clicked by user
  //do something here
});

document.addEventListener('startappads.interstitial.not_displayed', () => {
  //interstitial loaded and ready but somehow not showed to user
  //do something here
});

document.addEventListener('startappads.interstitial.load_fail', () => {
  //interstitial failed to load
  //do something here
});

5. Show Rewarded Video Ads

Show a Rewarded Video Ad:

StartAppAds.showRewardVideo();

Events you can subscribe to (recommended to put it in the constructor of any page):

document.addEventListener('startappads.reward_video.reward', () => {
  //user watched video reward can be given now
  //do something here
});

document.addEventListener('startappads.reward_video.load', () => {
  //reward video finished loading
  //do something here
});

document.addEventListener('startappads.reward_video.load_fail', () => {
  //reward video failed to load. Probably no Ads available at the moment
  //do something here
});

Thats it! :wink: Have fun to use it!

Posts: 1

Participants: 1

Read full topic


How to make non-scrollable in ionic2?

$
0
0

@michschu wrote:

Hello,

I am using Ionic CLI Version 2.2.2 (which is absolutely sufficient for my app) and do have the problem that I need a <thead> within <table> non-scrollable in vertical direction too. “Too” because my <ion-nav-title> is already vertically non-scrollable.

Googling and testing around with i.e. jqueries, 2 tables instead of <thead> and <tbody> did not work so far. So what would I have to change in the following code to have it working?

<ion-view>
    <ion-nav-title>My title</ion-nav-title>

    <ion-nav-buttons side="primary">
        <a ng-click="showABC()" class="button button-icon icon icon-android-settings"></a>
        <a ng-click="showDEF()" class="button button-icon icon icon-group"></a>
    </ion-nav-buttons>
    
    <ion-nav-buttons side="secondary">
        <a ng-click="reset()" class="button button-icon icon ion-trash-a"></a>
        <a ng-click="showInformation()" class="button button-icon icon icon-information-circled"></a>
    </ion-nav-buttons>

    <ion-content class="game has-footer" padding="false">
        <table>
            <thead>
                <tr>
                    <th rowspan(...)</th>
					(...)
                    <th colspan (...)</th>
					(...)
                    <th ng-if="functionGHI()" colspan="3" class="separator-left"><div class="ellipsis">{{functionIJK()[4]}}</div></th>
                    <th rowspan="2" class="separator-left"><div class="vertical"><div class="vertical__text">SomeText01</div></div></th>
                </tr>
                <tr>
                    <th> (...)</th>
                    <th ng-if="functionLMN()" class="separator-left">Pos.<br>SomeText02</th>
                    <th ng-if="functionOPQ()" class="small"><div class="vertical"><div class="vertical__text">SomeText03</div></div></th>
                    <th ng-if="functionRST()" class="small"><div class="vertical"><div class="vertical__text">SomeText04</div></div></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in functionUVW().methodOPQ" ng-class="{'separator': functionUVW().isSeparator($index)}">
                    <td> (...) </td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td> (...) </td>
                    (...)
 
                </tr>
            </tbody>
        </table>
    </ion-content>

    <ion-footer-bar class="bar bar-balanced">
        <a ng-click="functionXYZ" class="button button-icon icon icon-minus"></a>
        <h1 (...) </h1>
        <a ng-click="function123()" class="button button-icon icon icon-plus"></a>
    </ion-footer-bar>
	
</ion-view>

Thanks in advance.

Posts: 1

Participants: 1

Read full topic

How to get json data to variable?

$
0
0

@birolcaglar97 wrote:

Im trying to get my json data to array and i need to control it how can i do that can u guys please help me ?

  login()
  {
    let hash = CryptoJS.SHA256(this.user_password).toString(CryptoJS.enc.Hex);
    let data:Observable<any>;
    data = this.http.get('localhost/api/?loginUn='+this.user_name+'&password='+hash);
    data.subscribe(result=>
      {
        this.items = result;
      })
    if(this.items['state'] == "yes")
    {
      console.log("data");
    }
    else
    {
      console.log(this.items);
      console.log("no data");
    }
  }

json data

{"state":"yes"}

Posts: 1

Participants: 1

Read full topic

Firebase UI iOS redirect

$
0
0

@reedrichards wrote:

Anyone using Firebase UI? What are you using as redirect URL for iOS?

I’m following the Google documentation https://firebase.google.com/docs/auth/web/cordova and I was able to set everything correctly for Android but on iOS I either face an empty screen or a “Dynamic Link not found” error on redirect once the login as been proceeded

Concretely, on iOS, what value are you assigning to your config for signInSuccessUrl?

custom url or dynamic link or ionic://localhost?

const uiConfig = {
            signInFlow: 'redirect',
            signInSuccessUrl: 'com.mypackage.app://',
            signInOptions: [firebase.auth.EmailAuthProvider.PROVIDER_ID],
            tosUrl: 'com.mypackage.app://terms',
            privacyPolicyUrl: 'com.mypackage.app://privacy',
            credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
        };

p.s.:

on the web, signInSuccessUrl = your pwa url, https://…com
on Android, if wkwebview is used, signInSuccessUrl = http://localhost

Posts: 2

Participants: 1

Read full topic

How to implement feature like Youtube offline save video in my ionic app?

$
0
0

@omarbakry wrote:

How does youtube offline feature works. I want to implement this feature in my app.Is there any solution? Please reply as soon as possible.

Posts: 1

Participants: 1

Read full topic

How to save fcm notification in storage when app is closed

$
0
0

@BhaskarBhakare wrote:

I am using ionic 4. And FCM plugin to receive notifications.
I am trying to save notification in storage. When app is open i am able to save notification. Also when user tap on the notification app will launch and am able to save notification data.
But when app is closed and user swipe or clear notification i didn’t get that data in app.
Is there any way to save notification when it is received?

Please help me. Searching for this issue from last two weeks but didn’t found any solution. Please help.

Posts: 1

Participants: 1

Read full topic

Help wanted for styling

$
0
0

@Kyrax80 wrote:

Hello,

I am making an Ionic App which will be deployed both on web and mobile.

I am having some problems making it responsive and I’m looking for someone to do this. The pages are very simple and have very few components that need to be adjusted.

I’ll pay through PayPal (as service, not friend) once the job is done.

I’ll pay 20€ per page (can be disscussed tho)

Please, leave your skype and I’ll talk to you.

Posts: 2

Participants: 2

Read full topic

Push Notifications in capacitor

$
0
0

@AnderGo wrote:

Hi, Im trying to implement push notifications in my app, but i want o know which is the most easy and useful way to do it.

I want to know if i can use one signal with capacitor or is best if i use firebase cloud messagin. Thanks for the answer

Posts: 1

Participants: 1

Read full topic


Data is not passed on to id page

$
0
0

@Caturix99 wrote:

I want to pass data of items to a details page. The navigation works fine. But if I want to use string interpolation to output the chosen item, there is just nothing (an empty output). I tried playing around with the app-routing.module, but that didn’t work.

Here is my code.

item.html

 <ion-title> {{ item.username }} </ion-title>

item.ts

openRankdet() {
    this.router.navigate(['itemdetail/:id'])
  }

item.model.ts

export class Item {
    constructor(
        public id: string, 
        public username: string, 
        public imageUrl: string,
        public imageUrl2: string,
         ) {

         }
}

item.service

 private _item: Item[] = [ //dummy data
    new Item(
     'r1',
     'Martin',
     'assets/7.jpeg',
     'assets/two.jpeg',
     ),
];
...
 get item() {
    return [...this._item];
  }

  constructor() { }

  getItem(id: string) {
    return {...this._item.find(r => r.id === id)};
  }

itemdetail.ts

item: Item;  //store item data model
constructor() {}
...
ngOnInit() {
    this.route.paramMap.subscribe(paramMap => {
      if (!paramMap.has('id')) {
        this.router.navigate[('item')];
        return;
      }
      this.item = this.itemservice.getItem(paramMap.get('id'));
    }); 

}

app-routing.module.ts

    ...
     { path: 'itemdetail/:id', loadChildren: './itemdetail/itemdetail.module#ItemdetailPageModule' },
    ...

Posts: 1

Participants: 1

Read full topic

How to control when to ask for notification permission with FCM plugin

$
0
0

@kwanite wrote:

I am using FCM plugin for notifications. I would like to ask for notification permission when my users click a button within the app.

But, now the app asks for notification on launch. I’d rather ask for notifications later. Not right away.

I am using the FCM plugin only in app.component.ts. I made the FCM plugin code to start running on the condition that a database variable exists and equals to a certain value. This value is changed in the app when the user clicks a button. I was hoping the the plugin would kick in when the button is clicked but not when the app starts. Here is my code. Please help! :slight_smile:

 platform.ready().then(() => {

//START: notification operator    
const authListener=afAuth.authState.subscribe(user =>  {
if (user) {
this.userId = user.uid;
//check if user answered yes to the question asked after first clicking a follow button
firebase.database().ref(`/members/${this.userId}/notStats/`).on("value", res => {
if (res.exists()) {
if (res.val().notifAllowed == true ) {
//START: get device token and save in user members
fcm.getToken().then(token => {
   afDatabase.object(`/members/${this.userId}/notificationStatus/`).update({deviceToken: token});
});
//START: subscribe to notification listener
fcm.onNotification().subscribe(data => {
if (data.wasTapped) {//Notification tapped by the user 
  console.log(JSON.stringify(data));
} else { //App was in foreground when notification was sent
  console.log(JSON.stringify(data));}
});
} //end: if notifsAllowed saved in database as true
} //end: if exists
});//end: firebase listener   
authListener.unsubscribe();} else {authListener.unsubscribe();}});
//notification operator: END

});

How can I get FCM to ask for notification permission when the button in the app is first clicked? I do not wish the app to ask for permission to send notifications on first download. It makes for terrible user experience, asking for permission at the beginning before users even get to see the app.

Thanks!

Posts: 1

Participants: 1

Read full topic

How to increase the version of my app

$
0
0

@AnderGo wrote:

I want to upload other version of my app in playstore but i dont know where i need to increase these version, ims using capacitor. thanks for aswer

Posts: 1

Participants: 1

Read full topic

Pass data from Subscribe to service

$
0
0

@Luxaaa wrote:

Hello!
I want to subscribe to a Service and pass the data to another Service and subscribe it.
I triet the following but the second result is Always undefined.

ngOnInit() {
      this.taskService.getTasks().subscribe(res => {
        this.tasks = res;
        this.loadSubjects();
      });
    }

   
     async loadSubjects() {
          for(let task of this.tasks) {
              this.subjectsService.getSubject(task.subjectId).subscribe(subject => {
                  task.subject = subject;
                  console.log(subject);
              });
          }
      }

The Services are fine. I testet both in single subscribtion. only then i tried to compine them, it failes.
Hope somebody can help me!
Thanks!

Posts: 1

Participants: 1

Read full topic

Ionic 4: Example of `` together with React

$
0
0

@topcatcreatives wrote:

Hi, could anyone provide an example … or knows of how React works with this component. The example provided is pure javascript. I basically want navigation in a modal that is independent of the main react router. From the component docs description, this is exactly what its for. But i need some guidance. Many thanks, Wes

Posts: 1

Participants: 1

Read full topic

Viewing all 70440 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>