@MosesOng wrote:

I’m trying to change the background of my IonContent, but all the information I found doesn’t work. I’m using Ionic 4 and React. I tried to add a custom CSS in the globals.scss and it doesn’t affect my IonContent design. Also, I do not have a “src/app” folder, I only have a “src” folder. So it seems like a lot of resources out there is for Ionic + Angular, and those solution doesn’t work for Ionic + React. Does anyone have some pointer? Thanks!

Posts: 1

Participants: 1

Read full topic

@DSFARGEG wrote:

I am currently encountering an issue where when I send my C# backend to push using firebase FCM the onNotifications sends a push notification on the background but when it goes on the foreground it doesn’t send a push notification as well. It does send a toast where I prepared one but I would want to convert into a push notification instead.

Here is the code of the push notification

this.firebase.onNotifications().subscribe(
      (data) => {
             console.log("Payload: ", data);
       if (data.tap) {
                console.log('Received in background');
       } else {
                  console.log('recieved in foreground');
                   this.presentToast("new message");
       }
});

and here is the backend call

var url = "https://fcm.googleapis.com/fcm/send";

            var request = WebRequest.CreateHttp(url);
            request.Method = "POST";

            var dataDict = new Dictionary<string, dynamic>
            {
                { "title", title },
                { "body", body },
            };

            var dict = new Dictionary<string, dynamic>
            {
                { "to", userToken },
                { "data", dataDict },
            };

            var json = JsonConvert.SerializeObject(dict);

            request.AllowWriteStreamBuffering = false;
            request.ContentType = "application/json";
            request.Accept = "application/json";
            request.SendChunked = false;
            request.ContentLength = json.Length;

            using (var writer = new StreamWriter(request.GetRequestStream()))
            {
                writer.Write(json);
            }

            request.Headers.Add("Authorization", $"key={this.Key}");

            var response = request.GetResponse() as HttpWebResponse;
            var responseData = response.GetResponseData();

Posts: 2

Participants: 2

Read full topic

@kento wrote:

I am new to ionic development. I have successfully developed an app using ionic v4 and installed on an android phone. The app works well talking to a web Api on azure until the app cache gets to about 30mb then it either becomes very slow or stops working altogether.

Please is there any way that I can delete the app cache automatically using code. Any solution would be appreciation.

Posts: 1

Participants: 1

Read full topic

@MarcusA wrote:

Hi All,

I’m adding in push notifications and using Ionic AppFlow to build.

I’m getting:

[21:49:05]: ▸ Check dependencies
[21:49:05]: ▸ Code Signing Error: Provisioning profile “MYAPPNAME” doesn’t support the Push Notifications capability.
[21:49:05]: ▸ Code Signing Error: Provisioning profile “MYAPPNAME” doesn’t include the aps-environment entitlement.
[21:49:05]: ▸ Code Signing Error: Code signing is required for product type ‘Application’ in SDK ‘iOS 11.4’

Any idea how to solve this?

Thanks for your help

Posts: 1

Participants: 1

Read full topic

@vespinasgmailcom wrote:

I have a grid with two columns, that shows a card on each column for each row. Then the device is in landscape it looks ok:

Screen Shot 2019-07-19 at 5.59.54 PM.png770×343 23.6 KB

But when I rotate the device (to portrait mode) it stacks all rows except for the last one:

The grid system is a simple one with almost no styling but for the last cell:

<ion-grid>
  <ion-row>
    <ion-col><app-custom-card></app-custom-card></ion-col>
    <ion-col><app-custom-card></app-custom-card></ion-col>
  </ion-row>
  <ion-row>
    <ion-col><app-custom-card></app-custom-card></ion-col>
    <ion-col style="margin: auto; text-align: center !important;">
       <ion-icon name="add-circle" color="medium"></ion-icon>	
    </ion-col>
  </ion-row>
</ion-grid>

I am sure this can be fixed with a responsive property (sm, lg, xs) but I can’t figure it out how to make it work right (all columns stacked per row).

TIA

Posts: 2

Participants: 1

Read full topic

@Skiman1104 wrote:

I build a real-time football scores app. I have an observable checking data and returning the values but it repaints the dom every time, you lose scroll position and it flickers. is there any way I can stop this?

It’s driving me and my users (beta) mad.

Jordan

Posts: 1

Participants: 1

Read full topic

@semanticnet wrote:

Hello

My ionic app is working great on all api, except android api 29.

When clicking on a button, their is no post request is being send at all

postData(credentials, type) {
    return new Promise((resolve, reject) => {
      let headers = new Headers();

      this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
        .subscribe(res => {
          resolve(res.json());
        }, (err) => {
          reject(err);
        });
    });

  }

---

Ionic:

Ionic CLI : 5.2.3 (C:\Users\jaday\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.5
@ionic/app-scripts : 3.2.4

Cordova:

Cordova CLI : not installed
Cordova Platforms : android 8.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 4 other plugins)

Utility:

cordova-res : 0.5.0
native-run : 0.2.6

System:

NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10

---

Is their any update i have to do?

Posts: 1

Participants: 1

Read full topic

@Jamesionic wrote:

For some reason, I need to change CSS file under node_modules@ionic\core\dist\collection\components\range, but after I modify it , how can I take it affect?

My requirment is : I want to put ion-range on the UI, but I don’t want to the track receiving any event to change to range value, I just want to the knob to receive the event to change it.

1.I tried to google , looks like there is no such property on ion-range to do it.

2. I tried to add .range-slider{pointer-events: none;} & .range-knob-handle{pointer-events: auto !important;} in my page scss, but in ionic 4, it using shadow dom for web component , so it does not work as well.

3. finally I tried to change the css file under ode_modules@ionic\core\dist\collection\components\range, but how let my app to use the modified css file?

Any suggestion I am appreciated, thanks.

Posts: 1

Participants: 1

Read full topic

@moomdate wrote:

I have a problem in full-screen

88921.jpg1080×1920 39.7 KB

in my app has block color black on top

in html tag i removed ion-header tag and use content in ion-content tage only.
before i has been try in android 8 it’s work for me. but android current version is 9 have a problem.

ภาพ.jpg851×473 109 KB

Thanks

Posts: 1

Participants: 1

Read full topic

@aswk wrote:

Hi,

I am using the cool native Google maps plugin in a new app on ios. When I create the map with mapType set in options to HYBRID, the map is created as a map of type NORMAL. It is redrawn as a hybrid map when I use map.setMapType() just after the create().

Options:
I tried with different case and attribute names:

  options: GoogleMapOptions = {

    mapType: GoogleMapsMapTypeId.HYBRID,
    maptype: GoogleMapsMapTypeId.HYBRID,
    maptypeid: GoogleMapsMapTypeId.HYBRID,
    mapTypeId: GoogleMapsMapTypeId.HYBRID,
    mapTypeID: GoogleMapsMapTypeId.HYBRID,
  ...

and

this.map = GoogleMaps.create('map_canvas', this.options);
// this.map.setMapTypeId(this.options.mapType); // works but the map is rendered twice

Any ideas to solve this?

Andreas

Posts: 1

Participants: 1

Read full topic

@Tubiss wrote:

ı want to load this css in to ionic 3 but not working

@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';

is there way to load this? please help me

Posts: 1

Participants: 1

Read full topic

@ajaykdutta wrote:

I want to display data from database with the help of ngfor. i want to use ngif for implement some display condition .
my code :

<ion-grid  *ngFor="let chat of ChatListArray">
  <ion-row *ngIf="chat.status == 'Incomming'">
    <ion-col >
      <div>
       {{chat.msg}}
      </div>
    </ion-col>
  </ion-row>
  <br>
  <ion-row *ngIf="chat.status == 'Outgoing'"> 
    <ion-col >
      <div>
       {{chat.msg }}
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

But its not working . how to use if statement properly please help.
{{chat.msg }} does not display any data.

Posts: 1

Participants: 1

Read full topic

@Caturix99 wrote:

I want to store my inputed strings in chips. I managed to just push labels but then I have the problem, that every new value gets overridden by the new one and when I try to do it with chips, just empty chips are created. Even tough I believe the first problem isn’t yet.

page.html

<ion-chip outline (click)="remove(chip)" color="favorite" class="chip" *ngFor="let tag of tagName">
   

    <ion-label>{{tag.myVal1}}</ion-label>
     
       <ion-icon name="close-circle"></ion-icon>
     
       </ion-chip>
   
    <ion-item lines="none">
        <ion-input type="text" text-right maxLength="10" placeholder="Tags" [(ngModel)]="myVal"></ion-input>
        <ion-button class="adder" color="danger" (click)="add(chip)">
            <ion-icon name="add"></ion-icon>
       </ion-button>
        
      </ion-item>

page.ts

export class Tag {
  tag: string;
  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
}



  tagName: Tag[] = [];
  myVal: string = "";
  myVal1: string = "";

constructor() {}

add(): void {
    let id = this.tagName.length + 1;
    this.tagName.push(new Tag({ tag: "myVal1" + id, color: this.color[this.getRandomInt(this.color.length)] }, ));
  }

  remove(tag: Tag) {
    let id = this.tagName.indexOf(tag);
    this.tagName.splice(id, 1);
  }


  getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
  }

 
  refresh()
  {
  	this.myVal1 = this.myVal;
  }

Posts: 1

Participants: 1

Read full topic

@VictorVans wrote:

Hello, please it possible to create a mobile app with Ionic that can lock and unlock the mobile phone and also mobile applications in the device?

With features of face detection from google mobile vision to unlock the phone

Posts: 1

Participants: 1

Read full topic

@Tubiss wrote:

calendar.html

 <full-calendar 
  defaultView="dayGridMonth"
  [plugins]="calendarPlugins"
  [weekends]="true"
   [events]="[
    	{ title: 'event 1', date: '2019-06-07' },
    { title: 'event 2', date: '2019-06-12' }
  ]"
 ></full-calendar>

and this how look

everything is fine but ı want load event from json instead of “[events]” array and ı made service

schedule.ts

export class ScheduleProvider {

  constructor(public http: HttpClient) {
    console.log('Hello ScheduleProvider Provider');
  }

  getData():Observable<any[]>{
    return this.http.get<any[]>('url/events');
    
  }

}

calendar.ts

jsonEvents:any=[];

 ngOnInit(){

    this.svc.getData().subscribe(data=>this.jsonEvents=data);
    
  }

ı dont know how to display jsonEvents in calendar instead of events array . So please help me.

Posts: 1

Participants: 1

Read full topic

@C_shubham wrote:

I’m trying to use the Dragula module and I’m able to reorder my cards, but at that time I choose a card to drag, while dragging on any card, they lose their own CSS styles in drag and drop operations.

Posts: 1

Participants: 1

Read full topic

@Calll wrote:

Hi guys!

I’m wondering how you would go about testing if background fetch is working on Android?

I’m creating a form based app, where the users will be going to remote locations. There will possibly be no network out there, so I need background fetch to wake the app up every so often so the data can be uploaded to Firebase when the user is back in civilization - and then turn off background fetch once that’s done.

I’m guessing background fetch is the way to go rather than background mode, but there’s not much information on it on the forum or stackoverflow.

I followed exactly what is outlined in the docs: https://ionicframework.com/docs/v3/native/background-fetch/

Although it says its only for iOS on the Ionic docs, the Github docs say Android too.

I opened the app, turned the phone on airplane mode to stop info from being sent to Firebase, filled out the form and pressed send. I then closed the app and turned off airplane mode, and after 20 minutes the data never arrived to Firebase.

To test if it was even working, I tried making a h1 visible once the background fetch callback happens. After 25 mins I opened the app and the h1 was still invisible.

Is there another step to this, or something I’m missing? And is there a simpler way of testing if it works?

My code:

home.ts

 fetched:boolean = false;

  constructor(public navCtrl: NavController, public fireStore: FireStoreProvider, private backgroundFetch: BackgroundFetch) {

    const config: BackgroundFetchConfig = {
      stopOnTerminate: false, // Set true to cease background-fetch from operating after user "closes" the app. Defaults to true.
    };
  
    backgroundFetch.configure(config)
       .then(() => {
           console.log('Background Fetch initialized');

           this.fetched = true;
  
           this.backgroundFetch.finish();
  
       })
       .catch(e => console.log('Error initializing background fetch', e));
  
    backgroundFetch.start();
  
    backgroundFetch.stop();

  }

home.html

<ion-content padding>

  <h1 *ngIf="fetched">Fetch has fired</h1>
  
</ion-content>

Posts: 1

Participants: 1

Read full topic

@Kyrax80 wrote:

I am making an Ionic Angular App.

I have a page which shows a spinner until the call to an API REST is finished to retrieved the required data.

My problem is that after the call is done, the spinner dissapears, as expected, but the data takes like 2 seconds to be displayed on screen. I am using change detection but even if I turn it off, it’ll still do the same. This data is an array.

My code is the following

home.html

<ng-container *ngIf="loading else show">
   <spinner [purple]="true" class="veritcal-center"></spinner>
</ng-container>

<ng-template #show>
    <div>
      <ng-template #mobile>
        <ng-container *ngFor="let work of works">
          <book-home-card-mobile [work]="work">
          </book-home-card-mobile>
        </ng-container>
      </ng-template>
    </div>
</ng-template>

home.ts

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomePage {
  public works: Array<Work>;
  public loading: boolean;

  constructor(
    private worksService: WorksService,
    private detector: ChangeDetectorRef
  ) {
    this.works = [];
    this.loading = true;
  }

  ngOnInit() {
    this.getWorks();
  }

  ngAfterViewInit() {
    this.detector.detach();
  }

  private getWorks(): void {
    this.loading = true;
    this.detector.detectChanges();

    this.worksService.getWorks('newer', 0)
      .subscribe((response: any) => {
        response.forEach((work: Work) => this.works.push(work));
        this.loading = false;
        this.detector.detectChanges();
      });
  }
}

book-home-card-mobile.html

<div class="d-inline-block">
  <ion-card [class.view]="overlay" [class.waves-effect]="waves" [class.overlay]="overlay" class="material-tooltip-main"
    [class.xl-card]="main" [class.sm-card]="!main" data-toggle="tooltip" [title]="tooltip">
    <div class="d-inline-block portrait" [class.waves-effect]="details" [style.cursor]="details ?  'pointer' : 'auto'">
      <img [src]="work.image">
    </div>

    <div *ngIf="overlay" class="mask flex-center rgba-stylish-slight"></div>

    <div class="d-inline-block details">

      <div class="details-container">
        <ion-card-header>
          <ion-card-title style="white-space: nowrap; 
          overflow: hidden;
          text-overflow: ellipsis;" [class.waves-effect]="details" [style.cursor]="details ?  'pointer' : 'auto'">
            {{ work.title }}</ion-card-title>
        </ion-card-header>

        <div class="icons">
          <div class="d-inline-block icon">
            <ion-icon class="icon-card" name="eye"></ion-icon> <span class="amount">{{ visits }}</span>
          </div>

          <div class="d-inline-block icon">
            <ion-icon name="chatbubbles"></ion-icon> <span class="amount">{{ commentsCount }}</span>
          </div>

          <div class="d-inline-block icon">
            <ion-icon name="heart"></ion-icon> <span class="amount">{{ likes }}</span>
          </div>

        </div>

        <ng-container *ngIf="ellipsis else noEllipsis2">
          <div class="description" ellipsis [ellipsis-content]="work.description"></div>
        </ng-container>

        <ng-template #noEllipsis2>
          <div class="description" [class.ellipsis-scroll]="!ellipsis" s>
            {{ work.description }}
          </div>
        </ng-template>

        <ion-card-header>
          <div class="caret"><i class="fas fa-caret-right"></i></div>

          <ion-card-subtitle style="white-space: nowrap; 
            overflow: hidden;
            text-overflow: ellipsis;">{{ work.author_nickname }}</ion-card-subtitle>

        </ion-card-header>

        <div class="categories">
          <ng-container *ngFor="let category of work.genres">
            <ion-chip>
              <ion-label color="secondary">{{ category.name}}</ion-label>
            </ion-chip>
          </ng-container>
        </div>
      </div>
    </div>
  </ion-card>
  <br>
</div>

Also my App performance is really slow. Look at the animation of the tabs when switching between them.

Here is a video for better understanding: https://youtu.be/J_Vl7D10uWY

I feel it’s my book-card component what’s causing the performance issue but I don’t know why. Could it be because I have too many if statements to apply different classes or show different things?

Thanks!

Posts: 1

Participants: 1

Read full topic

@ice174 wrote:

I am new in ionic 4, I want to send the barcode result to the api then get the api response result from the api. How to do it?
Here is my code home.page.ts:

export class HomePage {
result: any;

  constructor(
    private barcodeScanner: BarcodeScanner,
    private http: HttpClient
  ) {}

onScan() {
        this.barcodeScanner.scan().then(barcodeData => {
         return this.http.post('https://xxx/xxx/xxx', barcodeData).subscribe(data => {
              this.result= data;
            });
          });

here is my home.html

<ion-content>
    <ion-button (click)="onScan()">Scan</ion-button>
    <ion-label>{{result}}</ion-label>
</ion-content>

From this code no result show. Anyone can help me?

Posts: 1

Participants: 1

Read full topic

@shiva11629 wrote:

Hello everyone I am using ionic native google-maps for my application. I used addmarkerSync to add marker and used setposition to update location but my marker is not updating its position in my app but it’s works well when I run in browser below is my code

import { AngularFirestore } from '@angular/fire/firestore';
import { Component, ViewChild } from '@angular/core';
import { Platform, NavController } from "@ionic/angular";
import { Geolocation } from '@ionic-native/geolocation/ngx'
import { AngularFirestoreModule, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
import { AngularFireStorageModule, AngularFireStorage } from '@angular/fire/storage';
import { firestore } from "firebase/app";

import { Observable } from 'rxjs/Observable'
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
LatLng,
MarkerOptions,
Marker
} from "@ionic-native/google-maps";
import { MapType } from '@angular/compiler';
import { Toast } from '@ionic-native/toast/ngx';
import { ToastController } from '@ionic/angular';
import { Router } from "@angular/router";

declare var google;

@component({
selector: 'app-userhome',
templateUrl: './userhome.page.html',
styleUrls: ['./userhome.page.scss'],
})
export class UserhomePage {
@ViewChild('map') mapElemet;

map: GoogleMap;
noofdrivers: number;
latfromdb: number;
lonfromdb: number;
busnum: number = null;
driverlocationRef: AngularFirestoreCollection
driverlocation$: Observable<driverlocation[]>
maininfo: driverlocation
Firsttime: boolean = true;
mark: Marker;
icon: any;
// bus = document.getElementById('bus').getElementsByTagName('input')[0];

constructor(public afs: AngularFirestore, public platform: Platform, public ubusnos: UbusnoService, private toast: Toast, public toastController: ToastController,
public router: Router) {
}

ngOnInit() {
}

ngAfterViewInit() {

this.busnum = this.ubusnos.getubusno();
let i = 0;
this.driverlocationRef = this.afs.collection(`driverlocation`);
this.driverlocation$ = this.driverlocationRef.valueChanges();
this.driverlocation$.subscribe(info => {
  this.maininfo = info[0];
  this.noofdrivers = info.length;
  console.log(this.noofdrivers)
  for (i = 0; i < this.noofdrivers; i++) {
    this.maininfo = info[i];
    console.log(this.maininfo.busno)
    if (this.maininfo.busno === this.busnum) {

      this.latfromdb = this.maininfo.lat;
      this.lonfromdb = this.maininfo.lon;

      break;
    }

    else {
      if (i + 1 == this.noofdrivers) {
        console.log(i)
        console.log("In Else Block")
        this.busnotonline();
      }
    }
  }

  this.platform.ready().then(() => {
    if (this.Firsttime == true) {
      this.loadMap();
      this.Firsttime = false;
    }
    else {
      this.marker();

    }
  });
})
}

loadMap() {
this.map = GoogleMaps.create('map');

this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {

  let coordinates: LatLng = new LatLng(this.latfromdb, this.lonfromdb);

  let position = {
    target: coordinates,
    zoom: 16
  };

  this.map.animateCamera(position);

  this.icon = {
    url: "assets/icon/shivaicon.png",
    size: {
      width: 50,
      height: 40
    },
    anchor: [15, 15],

  };

  let markerOptions: MarkerOptions = {
    position: coordinates,
    icon: this.icon,

  }

  this.mark = this.map.addMarkerSync(markerOptions);
  //  .then((marker: Marker) => {
  //  this.mark = marker;
  //});


  //   this.mark.showInfoWindow()


})
}

marker() {

let coordinates: LatLng = new LatLng(this.latfromdb, this.lonfromdb);

this.mark.setPosition(coordinates);


let position = {
  target: coordinates,
  zoom: 16,
};

this.map.animateCamera(position);
}

async busnotonline() {
const toast = await this.toastController.create({
message: 'Bus number ' + this.busnum + ' is currently offline ',
duration: 3000,
position: 'bottom'
});
toast.present();
this.router.navigate(['/ubusno'])
}

}
`

Posts: 1

Participants: 1

Read full topic