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

Integrating Google Maps API in Ionic application

February 22, 2019, 8:38 am
$
0
0

@cathrinerathje wrote:

Hello! I need to provide the option of generating running/walking routes based on selected attractions in a city. Then I need to provide turn-by-turn audio guidance, live GPS tracking and small audio stories whenever the user passes an attraction (by its geolocation). For this I’ve used Google Maps API and Google’s Direction Service in my Ionic app. I can generate the routes and display (text-based) directions on my screen. However I can’t seem to figure out whether it’s possible to implement audio guidance and live tracking. I don’t want to use the Google Maps App directly for directions, since I then can’t add the extra audio stories about sights the user passes. Does anyone know if this is even possible in Ionic or how I might go about doing this?
Thanks!!

Posts: 1

Participants: 1

Read full topic

↧
Search

How to receive data from USB - serial connector to app in ionic

February 22, 2019, 8:44 am
↧
↧

Ionic 4 - How to change css of ion-select popover

February 22, 2019, 9:04 am
$
0
0

@Rotor7ven wrote:

Hi everyone, is there a way to change the css of the popover from the ion-select? Im using the interface option like stated on the docs and would like the popover to have more width.

<ion-item>
    <ion-label>Popover</ion-label>
    <ion-select interface="popover" placeholder="Select One">
    </ion-select>
  </ion-item>

Posts: 2

Participants: 1

Read full topic

↧

Web Build failed in AppFlow

February 22, 2019, 9:07 am
$
0
0

@hyongilmoon wrote:

During the build, NPM i fails because of some dependencies hosted in our private internal NPM repository. For example:

“devDependencies”: {
“@mycomany/blah1”: “^0.0.1”,
“@mycomany/blah2”: “^0.0.2”,
…
}

.npmrc
@mycompany:registry=http://ourinternalserver:4873

Obviously, our internal server is not accessible from the outside of our network. Is there any way to push our private NPM modules to ionic appflow cloud and exclude those to be installed during the build?

Thanks,

Posts: 1

Participants: 1

Read full topic

↧

Changing the width of the side menu inside split pane component

February 22, 2019, 9:07 am
$
0
0

@javiersoto1797 wrote:

I want to change the width of my side menu inside the split pane component so it has a fix size because the app it will only run on the desktop browser. I try to implement the --width property in the variable.scss. If anywant can help me, it is ionic 4 with the side menu in the app.component.html file

Posts: 1

Participants: 1

Read full topic

↧
↧

Ionic 4 and Capacitor electron can't work

February 22, 2019, 9:12 am
↧

My auth guard not working as expected

February 22, 2019, 9:48 am
$
0
0

@dev-gilbert wrote:

I am trying to implement a login flow but I’m struggling trying to do this, I’m new to Angular and I have no idea how to handle global variables, not even sure if the whole app re-renders every time there’s a change somewhere (like React).

Anyways, look at my login method:

authenticationState = new BehaviorSubject(false);

login(email, password) {
    console.log("Authenticating...");
    this.http
      .post(
        apiEndPoint + "/auth",
        { email, password },
        { responseType: "text" }
      )
      .subscribe(
        res => {
          this.storage.set(TOKEN_KEY, res).then(() => {
            this.authenticationState.next(true);
          });
        },
        ex => {
          alert(ex.error);
        }
      );
  }

isAuthenticated() {
    return this.authenticationState.value;
  }

So after the form is submitted, the authenticationState value should change to truth and it does, but this does not happen in my authGuard

export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthenticationService,
    private router: Router
  ) {}
  canActivate() {
    console.log(this.authService.isAuthenticated());
    if (!this.authService.isAuthenticated()) {
      this.router.navigate(["login"]);
      return false;
    }
    return true;
  }
}

The value of isAuthenticated() in authGuard is always false (because that’s the initial value) Why is this value not changing after logging in?

Please any help is greatly appreciated

Posts: 1

Participants: 1

Read full topic

↧

How to get more than 10 products from woocommerce json api plugin

February 22, 2019, 9:54 am
$
0
0

@Deepak1233 wrote:

i Am building an app with woocommerce and i am stuck at one problem while fetching the products with json api.
Actually by default it returns only 10 products but i need more than 10 products at once.

	getFilterdProducts() {

	if (this.page == 1) { this.products = []; //this.loading.show(); this.loadingServerData = false; 
	}
	let query = '&page=' + this.page;
	if (this.sortOrder == "Newest") query = query + "&order=desc&orderby=date";
	else if (this.sortOrder == "A - Z") query = query + "&order=asc&orderby=title";
	else if (this.sortOrder == "Z - A") query = query + "&order=desc&orderby=title";

	if (this.type == "featured" || this.filterFeatured) { query = query + "&featured=true"; this.filterFeatured = true; }

	if (this.type == "sale" || this.type == "on_sale" || this.filterOnSale) { query = query + "&on_sale=true"; this.filterOnSale = true; }

	if (this.price.lower != this.minAmount && this.applyFilter == true) query = query + "&min_price=" + this.price.lower;
	if (this.price.upper != this.maxAmount && this.applyFilter == true) query = query + "&max_price=" + this.price.upper;
	if (this.selectedTab != '') query = query + '&cat_id=' + this.selectedTab;
	//query = query + '&page=' + this.page;
	//query = query + this.queryAttributes;
	console.log("custom Id = " + query);
	//this.getAllAttributes();
	this.http.get(this.config.url + '/api/appsettings/ionic_filter_products/?insecure=cool' + query).map(res => res.json()).subscribe(data => {
	if (data.data)
	this.listOfFilteredIdsFromCustom = data.data;
	this.applicationRef.tick();
	this.getFilterdProductsFromWoo();
	});

	}
	getFilterdProductsFromWoo() {

	if (this.listOfFilteredIdsFromCustom.length == 0) { this.infinite.enable(false); //this.loadingServerData = true; this.loading.hide(); 
	return 0; }

	let q = 'products?per_page=50&include=' + this.listOfFilteredIdsFromCustom + "&status=publish";

	console.log(this.listOfFilteredIdsFromCustom);
	if (this.sortOrder == "Newest") q = q + "&order=desc&orderby=date";
	else if (this.sortOrder == "A - Z") q = q + "&order=asc&orderby=title";
	else if (this.sortOrder == "Z - A") q = q + "&order=desc&orderby=title";
	// if (this.type == "featured" || this.filterFeatured) { q = q + "&featured=true"; this.filterFeatured = true; }

	// if (this.type == "sale" || this.type == "on_sale" || this.filterOnSale) { q = q + "&on_sale=true"; this.filterOnSale = true; }
	console.log(q);
	this.config.Woocommerce.getAsync(q + "&" + this.config.productsArguments).then((dat) => {
	//this.loading.hide();
	console.log('this products');
	//console.log(dat.body);
	let data = JSON.parse(dat.body);
	this.infinite.complete();
	if (this.page == 1) { this.products = new Array;this.infinite.enable(true); }
	if (data.length != 0) {
	this.page++;
	for (let value of data) {
	this.products.push(value);
	}
	//this.getFilterdProducts();
	}
	console.log('this is product data');
	console.log(this.products);
	if (data.length == 0 || data.length < 10) {
	this.infinite.enable(false);
	}

	this.applicationRef.tick();
	//this.loadingServerData = true;
	});
	}

help me guys!! thanks

Posts: 1

Participants: 1

Read full topic

↧
Search

Build succeeded Ionic 4 on Xcode but there isn't .IPA file

February 22, 2019, 10:02 am
$
0
0

@Manel00 wrote:

Hi everyone,

I’m so disturbed because I’m having too many problems with ionic 4 on Xcode making the build, now I have build succeeded but cannot find IPA file… I had to do the trick " sudo ionic cordova build ios --buildFlag="-UseModernBuildSystem=0". " but still missing the IPA file…

Thank you so much

Posts: 1

Participants: 1

Read full topic

↧
↧

Ionic 4 : slow navigation

February 22, 2019, 10:22 am
$
0
0

@Seoh wrote:

On the first page, I have slides and inside each of these slides, there is a scrollable list of cards. Cards contains multiple elements including ion-img tag to be used as a background.

I am using slides as a container of list because I want list width to be resizable (when pinched) without losing scroll position, and also give snapping effect of the slide component.

if there is only one or two slides in the page, I hardly notice any delay but when I add more slides, (assuming 10 slides, 30 images per list) clicking menu and navigating to another page becomes extremely slow.
(also tried running the app with --prod)

could anyone recommend workaround to solve this?

<ion-content fullscreen scrollY=false forceOverscroll (pinchend)="onPinchEnd($event)" (pinchstart)="onPinchStart($event)">


  <ion-slides [options]="slideOpts" #mySlides >

        <ion-slide  *ngFor="let num of data">
          <ion-card class="feed-name">
            <ion-card-header>
              <ion-card-title>Office</ion-card-title>
            </ion-card-header>
          </ion-card>

          <ion-content>

          <ion-refresher (ionRefresh)="doRefresh($event)">
            <ion-refresher-content
              pullingIcon="arrow-dropdown"
              pullingText="Pull to refresh"
              refreshingSpinner="circles"
              refreshingText="Refreshing...">
            </ion-refresher-content>
          </ion-refresher>

                  <ion-list>

                    <ion-card *ngFor="let num of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]" style>
                      <img class="card-background-image" src="url/of/image"/>
                        <div class="badge-container">
                          <div class="spacer-padding"></div>
                          <div class="badge"></div>
                          <div class="spacer"></div>
                          <div class="badge"></div>
                          <div class="spacer"></div>
                          <div class="badge"></div>
                        </div>
                    </ion-card>

                  </ion-list>
                  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
                    <ion-infinite-scroll-content
                      loadingSpinner="bubbles"
                      loadingText="Loading more data...">
                    </ion-infinite-scroll-content>
                            </ion-infinite-scroll>
    </ion-content>
            </ion-slide>

Ionic:

ionic (Ionic CLI) : 4.1.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.1
@angular-devkit/core : 7.2.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/ng-toolkit : not installed
@ionic/schematics-angular : not installed

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 10 other plugins)

System:

ios-deploy : 1.9.2
NodeJS : v10.12.0 (/usr/local/Cellar/node/10.12.0/bin/node)
npm : 6.4.1
OS : macOS
Xcode : Xcode 10.1 Build version 10B61

Posts: 1

Participants: 1

Read full topic

↧

In ionic can we code funcationalities to power button in android?

February 22, 2019, 10:41 am
$
0
0

@aditbharadwaj wrote:

i want to know that in ionic can we change the behavior of the hardware buttons especially power button , iam making an app for emergency situations in which when power button pressed thrice current gps location is stored as well as mic starts recording ? so i was wondering if this type of functionality is possible or not ?

Posts: 2

Participants: 2

Read full topic

↧

Problem with ssh key when pushing

February 22, 2019, 11:24 am
$
0
0

@scriline wrote:

Hi guys !
I’ve got a very strange problem and didn’t find anybody having the same.
I’m currently trying to connect my app with ionic pro and I’ve got a problem when pushing : “git push -u ionic master”

It then asks me to type a passphrase but my keyboard doesn’t work at this very moment ( except the enter button )… This is very strange, I can’t type any passphrase…

Any ideas where does the problem come from ?

Thanks !

Posts: 1

Participants: 1

Read full topic

↧

Show orange border over element in focus - ionic v4

February 22, 2019, 11:30 am
$
0
0

@ebeliejinfren wrote:

Hi
in my app when tap(click) an element like item of list the orange border showed on item (and other element that clicked), how solve this issue ?
this issue is in ionic v4, in ionic 3 i haven’t this problem

Capture02

Thanks

Posts: 1

Participants: 1

Read full topic

↧
↧

How use some data all over of the app?

February 22, 2019, 11:42 am
$
0
0

@ebeliejinfren wrote:

Hi
i want know it can be possible that when app start and got some data like user data from storage (username, token and etc), the received data reused on other page without getting it again from storage ?

more explane :
user data got from storage in profile page and same received data can be used in comment page

Thanks

Posts: 1

Participants: 1

Read full topic

↧

Ionic 4, Scroll BAR Style

February 22, 2019, 12:09 pm
$
0
0

@adsfelipe wrote:

Is it possible to style or hide this bar?
this won’t work…

::-webkit-scrollbar-track {
    --background: var(--ion-color-pretoMenu) !important;
 }
 ::-webkit-scrollbar {
    display: none;
 }
 ::-webkit-scrollbar-thumb {
    --background: var(--ion-color-pretoMenu) !important;
 }

bar
bar.PNG114×838 1.39 KB

Posts: 1

Participants: 1

Read full topic

↧
Search

Ionic 4 expert needed to start a new 1 to 2 month project - US based only

February 22, 2019, 12:21 pm
$
0
0

@zeebodaman wrote:

I am looking for an Ionic 4 developer to help bring a new project to completion. I have an aggressive release date, so the developer would have to start very soon and have at least 30 hrs per week of availability. They must be proficient in English, US based, and available for constant communication (during agreed upon hours).

Please respond with any info that would help to make a decision about who to contact: Resume, hourly rate, link to built apps, etc.

Thank you

Posts: 1

Participants: 1

Read full topic

↧

How to add a break in email link at the @ if the email is too long

February 22, 2019, 1:01 pm
$
0
0

@sqr08 wrote:

00%20PM

since the whole email doesn’t fit i would like to add a line break before the @ symbol.

the html looks like this

            <ion-row *ngFor="let email of advisor.emails;">
              <ion-icon class="contactIcons" src="assets/contact_us_icons/envelope_icon.svg"></ion-icon>
              <ion-label class="contactInfo">
                  <a class = "emailParagraph" href="mailto:{{email}}"> {{email}} </a>
              </ion-label>
            </ion-row>

the css looks like

.contactIcons  {
    height: 20px;
    width: 20px;
    padding-right: 8px;
    padding-bottom: 0.9em;
} 

.contactInfo {
    width: 69vw;
    line-height: 1.43em;
}

i’ve tried overflow-wrap, text-overflow, flexwrap and none of those have made any difference

Thanks.

Posts: 1

Participants: 1

Read full topic

↧
↧

Ion-item not visible on Android until it has focus

February 22, 2019, 1:53 pm
$
0
0

@stuball wrote:

Not seeing this listed elsewhere I’m guessing this is likely a newbie mistake. What I’m trying to do is simple: show a list of inputs (with or without a form) within an ion-content tag. On iOS these show up and work properly but on Android devices the label and input within the ion-item remain invisible until I tap on the input and give it focus.

<ion-content>
    <ion-list>
        <ion-item>
            <ion-label>Label One</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Label Two</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>
    </ion-list>
</ion-content>
``

If I remove the ion-content tag the labels and inputs show fine on Android but then I lose keyboard scrolling and other ion-content features. I've tried various CSS settings and cannot seem to get this to work. 

Any idea what I'm overlooking?

Thanks
Stu

Posts: 1

Participants: 1

Read full topic

↧

Android Launcher Development

February 22, 2019, 3:11 pm
↧

Cannot find module 'fs-extra'

February 22, 2019, 3:42 pm
$
0
0

@JulioNicolasPapp wrote:

Hello, i have a problem, when i try to run command:
“ionic cordova run browser”
“ionic cordova build android”
“ionic serve lab” etc. that not works and i get this error:

Error: Cannot find module ‘fs-extra’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
at Function.Module._load (internal/modules/cjs/loader.js:529:25)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object. (C:\Users\nicol\AppData\Roaming\npm\node_modules\ionic\node_modules@ionic\utils-fs\dist\index.js:4:12)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)

Can someone help with this? The problem appeared when I used the command “ionic i -g”. Nothing of ionic work after this.

Posts: 1

Participants: 1

Read full topic

↧
Viewing all 70440 articles
Browse latest View live
Search