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

What is the difference between page.module.ts and app.module.ts?

$
0
0

@fbahari wrote:

What is the difference between page.module.ts and app.module.ts in ionic v 4?
I have a component that I use as tag in my page.html
but when import it in page.module.ts not recognize it but when import my component in app.module.ts ,
that is ok .
whats’s the matter?

thank you

Posts: 1

Participants: 1

Read full topic


How to use Speech recognition plugin in Ionic react?

$
0
0

@Nithish-2027 wrote:

Hi I am creating a simple application that uses both Speech to text and Text to Speech. If use the speech recognition plugin in react projects it throws an error

notAvailableError

If i run my app with cordova instead of ionic serve it throws cordova is not supported for @ionic/react projects. use capacitor instead . But capacitor doesn’t have native plugin for speech recognition.

Please suggest me an idea or solution for this . :pray:
Thank you

Posts: 1

Participants: 1

Read full topic

How to add ionic 3 push notification in ionic app

Will ionic 5 use angular 9 as default?

One click opens the next

$
0
0

@Ludolefrenchy wrote:

Hello
I want to make an app or when we press a text or button it displays the following text / button ect …
what is the best element to use?
button, card, text or other ??

Thank you in advance.

Posts: 1

Participants: 1

Read full topic

Ionic 4 googlemap blank white screen on android

$
0
0

@sehsah2020 wrote:

i used google map in project
it’s work fine in brwoser but not work on android when i run

cordova platform add android

how can i fixed it ?

loadMap() {

Environment.setEnv({

  'API_KEY_FOR_BROWSER_RELEASE': '(AIzaSyAsQhHai1m971xeUsGsL7VaDQi95u2KcNU `https://`)',

  'API_KEY_FOR_BROWSER_DEBUG': ''

});

LocationService.getMyLocation().then((myLocation: MyLocation) => {

  let options: GoogleMapOptions = {

    camera: {

      target: myLocation.latLng,

      zoom: 17,

    }

  };

  this.map = GoogleMaps.create('map_canvas', options);

  this.marker = this.map.addMarkerSync({

    title: 'Ionic',

    icon: {

      url: 'assets/images/place2.png',

      size: {

        width: 32,

        height: 32

      }

    },

    position: myLocation.latLng,

  });

  this.marker.on(GoogleMapsEvent.MARKER_CLICK)

  this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe((data) => {

    this.lat = data['0']['lat']

    this.lat = data['0']['lng']

    console.log(data['0']['lat'], data['0']['lng'])

    localStorage.setItem('latitude', data[0]['lat'])

    localStorage.setItem('longitude', data[0]['lng'])

    localStorage.setItem('district', data[0]['subLocality'])

    this.GetNewlocation(data['0']['lat'], data['0']['lng'])

    this.marker.remove()

    this.marker = this.map.addMarkerSync({

      title: 'Ionic',

      icon: {

        url: 'assets/images/place2.png',

        size: {

          width: 32,

          height: 32

        }

      },

      position: { lat: data['0']['lat'], lng: data['0']['lng'] },

    });

    this.marker.on(GoogleMapsEvent.MARKER_CLICK)

  }

  );

});

}

in config file

<preference name="GOOGLE_MAPS_IOS_API_KEY" value="AIzaSyCGCjN3qK_eoYut2nOHluS8xw4TsRW4qGI" />

Posts: 1

Participants: 1

Read full topic

Ionic 4 ion-tab-bar set background transparent in tabs only

$
0
0

@sehsah2020 wrote:

hi
how can change background to transparent in first tabs
when i use this class

ion-tab-bar {

--background: transparent;

--ion-color-base: transparent !important;

position: absolute;

bottom: 0px;

width: 100%;

--color: #b9b9b9;

}

it’s change in all tabs but i neef first tabs only

Posts: 2

Participants: 2

Read full topic

Creating a new blank project with specific ionic version

$
0
0

@semanticnet wrote:

Hello

I need to create ionic blank project verison 4.

ionic start map4 blank --type=angular (this is creating version 5)
ionic start map4 blank --type=ionic-angular (this is creating version 3.9 version)

Ionic CLI : 5.2.3

Posts: 2

Participants: 2

Read full topic


Where to find custom css tags / attributes?

$
0
0

@Divergent wrote:

Hey guys, not sure if you understand my question but where can I find a guide on how customization works on Ionic? I mean, how to center things? Tables? Forms? For example what Bootstrap provides. Or do I have to integrate bootstrap too? Doesn’t Ionic not have such features?

Posts: 1

Participants: 1

Read full topic

Ionic 5 CameraOriginal loaded instead of just Camera

$
0
0

@swissfritz wrote:

I’m trying to migrate an app to Ionic 5 by rebuilding it from scratch. I loaded the Cordova plugins and the corresponding ionic-native classes. Now, it seems that by entering

npm i @ionic-native/camera

I get something called CameraOriginal instead of the Camera class which gives an error in app-module.ts.
Mac OS Catalina 10.15.3
Ionic 5/Angular 9
Nodejs 10.15.3
Cordova CLI 9.0.0
The same error occurs with all explicitly imported plugins.
First picture is of the ionic 5 app-module.ts, second of the same file in ionic 4 (error free).

Posts: 1

Participants: 1

Read full topic

Ionic 5 : pushObject.on("notification") not triggering

$
0
0

@kodetratech wrote:

Any change required in ionic 5 to handle the push notification. I am able to receive the push notification, but the control is not coming to pushObject.on(“notification”).subscribe((notification: any) => {}), to this event listener.

Please let me know if any change required

Thanks

Posts: 1

Participants: 1

Read full topic

Routing Error

$
0
0

@vivek98322 wrote:

Hello All,

I am facing one issue related to routing, I am having parent routing where I want to load few data which is common to all child routs. And I am seeing the url is changing in browser but its not actually loading the child component.

Here is AppRoutingModule:
import { NgModule } from ‘@angular/core’;

import { PreloadAllModules, RouterModule, Routes } from ‘@angular/router’;

const routes: Routes = [

{ path: ‘’, redirectTo: ‘testseries’, pathMatch: ‘full’ },

{

path: 'login',

loadChildren: () => import('./Page/login/login.module').then( m => m.LoginPageModule)

},

{

path: 'course',

loadChildren: () => import('./Page/course/course.module').then( m => m.CoursePageModule)

},

{

path: 'testseries',

loadChildren: () => import('./Page/test/test.module').then( m => m.TestPageModule)

}

];

@NgModule({

imports: [

RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })

],

exports: [RouterModule]

})

export class AppRoutingModule { }

Its navigating to testseries and its loading file in testseries component I am loading few data which is required for all child routs

import { NgModule } from ‘@angular/core’;

import { Routes, RouterModule } from ‘@angular/router’;

import { TestPage } from ‘./test.page’;

const routes: Routes = [

{

path: 'exams',

component: TestPage,

children: [

  { path: '', redirectTo: 'examlisting', pathMatch: 'full' },

  {

    path: 'examlisting',

    loadChildren: () => import('./examlisting/examlisting.module').then(m => m.ExamlistingPageModule)

  },

  {

    path: 'testlisting',

    loadChildren: () => import('../../Page/test/testlisting/testlisting.module').then(m => m.TestlistingPageModule)

  }

]

},

// {

// path: ‘’,

// redirectTo: ‘/testseries/exams/examlisting’,

// pathMatch: ‘full’

// }

];

@NgModule({

imports: [RouterModule.forChild(routes)],

exports: [RouterModule],

})

export class TestPageRoutingModule { }

in the browser I am seeing the URL is getting changed to http://localhost:/testseries/exams/examlisting but it not loading examlisting component. Can someone help me in this what mistake I am doing.

Posts: 1

Participants: 1

Read full topic

Having problem that 'id' is undifined (using ionic storage)

$
0
0

@b3nny wrote:

Hello guys, I have a problem when I’m displaying information without id, it’s work fine. But , I’m adding id to the SQL command (“SELECT * FROM tb_case WHERE id = ‘$postjson[id]’ ORDER BY casename DESC LIMIT $postjson[start],$postjson[limit]”), it said that “Undefined index: id in fyp\api\process.php on line 140 {“success”:true,“result”:}”

the other page works fine but this page is undefined.

Am I doing anything wrong ?

This code is inside mycase.ts

import { resolve } from 'url';
import { LoadingController, ToastController } from '@ionic/angular';
import { AccessProviders } from 'src/app/providers/access-providers';
import { Storage } from '@ionic/storage';

@Component({

  selector: 'app-mycase',

  templateUrl: './mycase.page.html',

  styleUrls: ['./mycase.page.scss'],

})

export class MycasePage implements OnInit {

  cases: any = [];

  limit: number = 13;

  start: number = 0;

  datastorage: any;

  id: string;

  constructor(

    private loadingCtrl: LoadingController,

    private accesspvdr: AccessProviders,

    private toastCtrl: ToastController,

    private storage: Storage,

  ) { }

  ngOnInit() {

  }

  ionViewDidEnter() {

    this.storage.get('storage_xxx').then((val) => {

      this.datastorage = val;

      this.id = this.datastorage.id;

    });

    this.start = 0;

    this.cases = [];

    this.loadCase();

  }

  async presentToast(a) {

    const toast = await this.toastCtrl.create({

      message: a,

      duration: 1500,

      position: 'top'

    });

    toast.present();

  }

  async doRefresh(event) {

    const loader = await this.loadingCtrl.create({

      message: 'Please wait . . .',

    });

    loader.present();

    this.ionViewDidEnter();

    event.target.complete();

    loader.dismiss();

  }

  loadData(event) {

    this.storage.get('storage_xxx').then((val) => {

      this.datastorage = val;

      this.id = this.datastorage.id;

    });

    this.start += this.limit;

    setTimeout(() => {

      this.loadCase().then(() => {

        event.target.complete();

      });

    }, 500);

  }

  async loadCase() {

    return new Promise(resolve => {

      const body = {

        act: 'loadCase',

        id: this.id,

        start: this.start,

        limit: this.limit

      };

      this.accesspvdr.postData(body, 'process.php').subscribe((res: any) => {

        for (const datas of res.result) {

          this.cases.push(datas);

        }

        resolve(true);

    });

    });

  }

  async delCase(a) {

    return new Promise(() => {

      const body = {

        act: 'delCase',

        casename: a,

      };

      this.accesspvdr.postData(body, 'process.php').subscribe((res: any) => {

        if (res.success === true) {

          this.presentToast('Delete Successful');

          this.ionViewDidEnter();

        } else {

          this.presentToast('Delete Unsuccessful');

        }

    });

    });

  }

}

mycase.html

<ion-header>

  <ion-toolbar color="success">

    <ion-title>My Case</ion-title>

    <ion-buttons slot="start">

      <ion-back-button></ion-back-button>

    </ion-buttons>

  </ion-toolbar>

</ion-header>

<ion-content>

  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">

    <ion-refresher-content pullingIcon="arrow-down-outline"></ion-refresher-content>

  </ion-refresher>

  <ion-list>

    <ion-item-sliding *ngFor="let case of cases">

      <ion-item>

        <ion-label>{{ case.casename }}</ion-label>

      </ion-item>

      <ion-item-options side="end">

      <ion-item-option (click)="openCrud(case.casename)" color="primary">Update</ion-item-option>

      <ion-item-option (click)="delCase(case.casename)" color="danger">Delete</ion-item-option>

    </ion-item-options>

    </ion-item-sliding>

  </ion-list>

</ion-content>

Posts: 1

Participants: 1

Read full topic

Ionic 4, background image

$
0
0

@TaimoorMughal wrote:

Hello,
I am trying to add image on my home screen as i am getting image path from api so i’m using style="background-image: url({{flag}})", i want to add multiple images on my background. Or you can say i want to add 2 images one half of screen will have one flag and the other half will have the second flag.

<ion-content>
   <div style="background-image: url({{toFlag}})">
   <div style="background-image: url({{fromFlag}})">

  <.......Code......>

   </div>
   </div>
</ion-content>

How can i be able to add 2 images on ion-content by giving them 2 parts.
Thanks

Posts: 1

Participants: 1

Read full topic

Ionic 3 Share Audio File

$
0
0

@mahmoudmobile55 wrote:

Hello All,

I Want to make Sharing Option to my audio files so i want to ask if there is any plugin of extension can help me to doing that?

i tried to use social sharing but it is only working for images and urls

waiting for your help

thanks

Posts: 1

Participants: 1

Read full topic


'http://localhost:8100' has been blocked by CORS policy

$
0
0

@sahibsingh wrote:

I am using Ionic 4 and facing the CORS Issue problem. I want to access mysql using php, but it is blocked by CORS, i have add all the headers in the php file for permissions but problem still exist.

file_aksi.php file

<?php header('Access-Control-Allow-Origin: http://localhost:8100'); header('Access-Control-Allow-Credentials: true'); header('Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE'); header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization'); header('Content-Type: application/json; charset=UTF-8'); include "config.php"; $postjson = json_decode(file_get_contents('php://input'), true); $today = date('Y-m-d'); if($postjson['aksi'] == "add_register") { $password = md5($postjson['password']); $query = mysqli_query($mysqli, "INSERT INTO login SET full_name = '$postjson[full_name]', phone_number = '$postjson[phone_number]', username = '$postjson[username]', password = '$password' "); if($query) $result = json_encode(array('success' =>true)); else $result = json_encode(array('success' => false, 'msg'=>'error , please try again')); echo $result; } elseif($postjson['aksi'] == "login") { $password = md5($postjson['password']); $query = mysqli_query($mysqli, "SELECT * FROM login WHERE username='$postjson[username]' AND password='$password' "); $check = mysqli_num_rows($query); if($check>0){ $data = mysqli_fetch_array($query); $datauser = array( 'user_id' => $data['user_id'], 'full_name' => $data['full_name'], 'phone_number' => $data['phone_number'], 'username' => $data['username'], 'password' => $data['password'] ); if($query) $result = json_encode(array('success' =>true, 'result'=>$datauser)); else $result = json_encode(array('success' => false, 'msg'=>'error, please try again')); }else{ $result = json_encode(array('success' => false, 'msg'=>'unregister account')); } echo $result; } if($postjson['aksi']=='add'){ $query = mysqli_query($mysqli, "INSERT INTO master_customer SET name_customer = '$postjson[name_customer]', desc_customer = '$postjson[desc_customer]', created_at = '$today' "); $idcust = mysqli_insert_id($mysqli); if($query) $result = json_encode(array('success'=>true, 'customerid'=>$idcust)); else $result = json_encode(array('success'=>false)); echo $result; } elseif($postjson['aksi']=='getdata'){ $data = array(); $query = mysqli_query($mysqli, "SELECT * FROM master_customer ORDER BY customer_id DESC LIMIT $postjson[start],$postjson[limit]"); while($row = mysqli_fetch_array($query)){ $data[] = array( 'customer_id' => $row['customer_id'], 'name_customer' => $row['name_customer'], 'desc_customer' => $row['desc_customer'], 'created_at' => $row['created_at'], ); } if($query) $result = json_encode(array('success'=>true, 'result'=>$data)); else $result = json_encode(array('success'=>false)); echo $result; } elseif($postjson['aksi']=='update'){ $query = mysqli_query($mysqli, "UPDATE master_customer SET name_customer='$postjson[name_customer]', desc_customer='$postjson[desc_customer]' WHERE customer_id='$postjson[customer_id]' "); if($query) $result = json_encode(array('success'=>true, 'result'=>'success')); else $result = json_encode(array('success'=>false, 'result'=>'error')); echo $result; } elseif($postjson['aksi']=='delete'){ $query = mysqli_query($mysqli, "DELETE FROM master_customer WHERE customer_id='$postjson[customer_id]' "); if($query) $result = json_encode(array('success'=>true, 'result'=>'success')); else $result = json_encode(array('success'=>false, 'result'=>'error')); echo $result; } ?>

config.php file

<?php define('DB_NAME', 'ionic4login'); define('DB_USER', 'root'); define('DB_PASSWORD', ''); define('DB_HOST', 'localhost'); $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME); ?>

register.page.ts file

import { Component, OnInit } from ‘@angular/core’;

import { Router } from ‘@angular/router’;

import { ToastController } from ‘@ionic/angular’;

import { PostProvider } from ‘…/…/providers/post-provider’;

import { async } from ‘q’;

@Component({

selector: ‘app-register’,

templateUrl: ‘./register.page.html’,

styleUrls: [’./register.page.scss’],

})

export class RegisterPage {

full_name: string = ‘’;

phone_number: string = ‘’;

username: string = ‘’;

password: string = ‘’;

confirm_password: string = ‘’;

constructor(

private router: Router,

public toastController: ToastController,

private postPvdr: PostProvider,

) { }

ngOnInit() {

}

formLogin() {

this.router.navigate(['/login']);

}

async addRegister() {

if (this.full_name == '') {

  const toast = await this.toastController.create({

  message: 'Fullname is required',

  duration: 2000

  });

  toast.present();

} else if (this.phone_number == '') {

  const toast = await this.toastController.create({

    message: 'Phone number is required',

    duration: 2000

    });

  toast.present();

} else if (this.username == '') {

  const toast = await this.toastController.create({

    message: 'Username is required',

    duration: 2000

    });

  toast.present();

} else if (this.password == '') {

  const toast = await this.toastController.create({

    message: 'Password is required',

    duration: 2000

    });

  toast.present();

} else if (this.password != this.confirm_password) {

  const toast = await this.toastController.create({

    message: 'Password does not match',

    duration: 2000

    });

  toast.present();

} else {

  let body = {

    full_name: this.full_name,

    phone_number: this.phone_number,

    username: this.username,

    password: this.password,

    aksi: 'add_register'

  };

  this.postPvdr.postData(body, 'file_aksi.php').subscribe(async data => {

   var alertpesan = data.msg;

   if (data.success) {

     this.router.navigate(['/login']);

     const toast = await this.toastController.create({

      message: 'Register successfully',

      duration: 2000

     });

     toast.present();

   } else {

     const toast = await this.toastController.create({

       message: alertpesan,

       duration: 2000

     });

   }

 });

}

}

}

Posts: 1

Participants: 1

Read full topic

Ionic PWA goes blank after 2-3 updates & if user hasn't open the app in a while

$
0
0

@carlosGAlfonzo wrote:

I have a huge problem with my PWA app where if I deploy 2-3 new versions and the user has not opened or updated their app for 2-3 versions, their app just goes blank!

I am not sure what the reason is, it could be that the runt-time file or one of the .js files has changed and is not able to be compiled.

Is there any way to make ionic refresh or update itself, if it detects it has broken itself?

Posts: 1

Participants: 1

Read full topic

Async data to child page with Ionic5

$
0
0

@arcanjo42 wrote:

I’m trying to pass data between a parent and a child page in ionic using Ionic Storage to get the data in an async way.

What is happening is that when I get to the page, the data didn’t return from the storage yet and I have an undefined error: ERROR TypeError: Cannot read property ‘name’ of undefined.

What I am using:

  • A parent page that I click in an item in the grid and it forwards me to the child page, using router.navigate
  goToMediaDetails(data) {
    this.router.navigate([`slate-list/${data.id}`]);
  }
  • The child route is listed in the app-routing.module.ts receiving the id
  {
    path: "slate-list/:mediaId",
    loadChildren: () =>
      import("./pages/slate-list/slate-list.module").then(
        m => m.SlateListPageModule
      )
  }
  • I grab the mediaId in the child’s constructor page and use a service to get the data from ionic storage.
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";

//Services
import { MediaService } from "../../services/media.service";

@Component({
  selector: "app-slate-list",
  templateUrl: "./slate-list.page.html",
  styleUrls: ["./slate-list.page.scss"]
})
export class SlateListPage implements OnInit {
  public media: any;
  private mediaId: number;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private mediaSvc: MediaService
  ) {
    //if the id is provided in the url, get the media by id using the service
    if (route.snapshot.params.mediaId) {
      this.mediaId = route.snapshot.params.mediaId;
      this.mediaSvc.getMediaById(this.mediaId).then(result => {
        this.media = result;
      });
    }
  }
  • Here is the service code returning a promise
  //GET Media By ID
  getMediaById(mediaId) {
    let mediaToReturn = new Media();
    return new Promise(resolve => {
      this.storage.get("media").then(result => {
        if (result != null && result.length != 0) {
          mediaToReturn = result.find(x => x.id == mediaId);
        }

        resolve(mediaToReturn);
      });
    });
  }
  • Here is the simple html giving the problem
<ion-content>
  <ion-grid class="ion-no-padding">
    <ion-row>
      Slates for <strong>{{media.name}} </strong> / Episode: {{media.episode}}
    </ion-row>
  </ion-grid>
</ion-content>

Yes, the data is returned using the service, I console.log it right after the .then and the data is there, so I’m assuming that it’s just a classic async situation.

I saw I can introduce a loading component, make it show up for 1 second or a bit more and then the data will be there but is that the better/official way to do it?

I’m at the beginning of my journey with ionic/async so forgive me if I made some silly mistake

Posts: 6

Participants: 3

Read full topic

How to get data post from blogger api using ionic 5?

$
0
0

@Script47ind wrote:

If using Ionic 3:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ConstantsProvider } from '../providers/constants/constants';
import { PostPage } from '../pages/post/post';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    PostPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    PostPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ConstantsProvider
  ]
})
export class AppModule {}

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ConstantsProvider } from '../../providers/constants/constants';
import { HttpClient } from '@angular/common/http';
import { PostPage } from '../post/post';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  title: string;
  posts: any[];
  constructor(private constants: ConstantsProvider, private http: HttpClient, public navCtrl: NavController) {
    http.get('https://www.googleapis.com/blogger/v3/blogs/byurl?key=' + constants.getApiKey() + '&url=' + constants.getUrl())
    .subscribe(data => {
      this.title = data.name;
      this.getPosts(data.posts.selfLink);
      console.log(data);
      });
  }

  getPosts(url: string) {
    this.http.get(url + '?maxResults=80' + '&key=' + this.constants.getApiKey())
      .subscribe(data => {
        this.posts = data.items;
        console.log(this.posts);
      });
  }

  openPost(post) {
    this.navCtrl.push(PostPage, {post: post})
  }
}

post.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the PostPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-post',
  templateUrl: 'post.html',
})
export class PostPage {
  private post;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.post = navParams.get('post');
    console.log(this.post);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PostPage');
  }

}

if using ionic5:

app.module.ts


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { PostPage } from "./post/post.page";
import { HttpClientModule} from '@angular/common/http'
import { PostPageRoutingModule } from './post/post-routing.module';
import { PostPageModule } from './post/post.module';

@NgModule({
  declarations: [AppComponent,],
  entryComponents: [PostPage],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    PostPageRoutingModule,
    PostPageModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

folder.page.ts (homepage)

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ConstantsService } from '../constants.service';
import { HttpClient } from '@angular/common/http';
import { PostPage } from "../post/post.page";
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-folder',
  templateUrl: './folder.page.html',
  styleUrls: ['./folder.page.scss'],
})
export class FolderPage implements OnInit {
  public folder: string;
  title: string;
  posts: any[];
  constructor(
    private activatedRoute: ActivatedRoute, 
    private constants: ConstantsService, 
    private http: HttpClient,
    private navCtrl: NavController,
    private route: Router)  { 
    this.http.get('https://www.googleapis.com/blogger/v3/blogs/byurl?key=' + constants.getApiKey() + '&url=' + constants.getUrl())
    .subscribe(data => {
      this.title = data.name;
      this.getPosts(data.posts.selfLink);
      console.log(data);
    });
    
  }
  getPosts(url: string) {
    this.http.get(url + '?maxResults=80' + '&key=' + this.constants.getApiKey())
      .subscribe(data => {
        this.posts = data.items;
        console.log(this.posts);
      });
}
  ngOnInit() {
    this.folder = this.activatedRoute.snapshot.paramMap.get('id');
  }
  openPost(post) {
    this.route.navigate(['post', {post:post}])
  }
}

post.page.ts (postpage)


import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from '@ionic/angular';
import { ActivatedRoute } from '@angular/router';
import { FolderPage } from '../folder/folder.page';

@Component({
  selector: 'app-post',
  templateUrl: './post.page.html',
  styleUrls: ['./post.page.scss'],
})
export class PostPage implements OnInit {
  private post: any;
  constructor(private navCtrl: NavController, private activatedRoute: ActivatedRoute) {
    this.activatedRoute.paramMap.subscribe(params => {
    this.post = params.posts[+params.get('post')];
    console.log(this.post)
  });
   }

  ngOnInit() {
    
  }
  
}

Using ionic 3 there is no problem when loading parts of the post when clicking on it. But, in ionic 5 i get this error:
ERROR TypeError: Cannot read property ‘NaN’ of undefined

ezgif.com-video-to-gif

Posts: 1

Participants: 1

Read full topic

Ionic Firebase field counting

$
0
0

@WhoSketchy wrote:

Hello,

I am trying to count the fields in my Firebase database this is my method inside of a provider (it is an observable):

(console logging is the only way ive been able to return the value so far but i cannot assign it to anything).

When calling the provider in my ts page, its always being returned as null, any advice on how I can get it to return a number value?

Posts: 1

Participants: 1

Read full topic

Viewing all 49526 articles
Browse latest View live


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