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

Ionic Local Notification Daily

December 21, 2018, 3:24 am
$
0
0

@evripides wrote:

I want to to build app that I take the date and time from date picker and I set a daily notification but the notification will be start from the date that user choose, any help?

Posts: 1

Participants: 1

Read full topic

↧
Search

V4 - fromEvent (Rxjs) - ERROR TypeError: Invalid event target

December 21, 2018, 4:53 am
$
0
0

@WIllBr wrote:

I’m trying to get the event from an input field but the following error occurs (same error for ngAfterViewInit / ionViewDidEnter):

ERROR TypeError: Invalid event target
    at setupSubscription (fromEvent.js:50)
    at Observable._subscribe (fromEvent.js:24)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
    at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:18)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:23)
    at PeoplePage.push../src/app/people/people.page.ts.PeoplePage.ionViewDidEnter (people.page.ts:88)
    at HTMLElement.handler (angular-delegate.js:101)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)

people.page.ts

import {concat, fromEvent, Observable, of, pipe} from 'rxjs';
...
    @ViewChild('searchInput') searchInput: ElementRef;
  
    ionViewDidEnter() {
        fromEvent<any>(this.searchInput.nativeElement, 'keyup')
            .pipe(
                map(ev => ev.target.value)
            )
            .subscribe(console.log); // <--- The error occurs here.

people.page.html

<ion-input placeholder="Name" #searchInput> </ion-input>

Ionic:

   ionic (Ionic CLI)             : 4.5.0
   Ionic Framework               : @ionic/angular 4.0.0-beta.19
   @angular-devkit/build-angular : 0.7.5
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : not installed

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.2
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 11 other plugins)

System:

   Android SDK Tools : 26.1.1 
   NodeJS            : v11.5.0
   npm               : 6.5.0
   OS                : Linux 4.15

Posts: 1

Participants: 1

Read full topic

↧
↧

ionBlur event triggered on focus of an element

December 21, 2018, 9:57 am
$
0
0

@amulabasana wrote:

As per the javascript documentation
The blur event occurs when an element loses focus and
The focus event occurs when an element gets focus (when selected by a mouse click or by “tab-navigating” to it).

but for the below code snippet when the element gets focus it is triggering blur event.

    • Posts: 1

    Participants: 1

    Read full topic

    ↧

    New ionic user - Uncaught (in promise)

    December 21, 2018, 10:05 am
    $
    0
    0

    @jamesbrannigan89 wrote:

    Hi everyone, I am new to using iconic and I am doing a module in college on mobile development so I don’t mean to be asking stupid questions but I am having an issue with my app and I thinks it because of [(ngModel)]. Basically I have put it in my ionic input as I am trying to get a users name and display it to a home screen. I have imported import {FormsModule} from ‘@angular/Forms’; and included it in the imports. If i remove mgModel the page loads fine but once i included it I get errors.

    Thanks

    scree mob

    Posts: 1

    Participants: 1

    Read full topic

    ↧

    Ionic 4 RC ion-tab is not known element on blank project

    December 21, 2018, 1:17 pm
    $
    0
    0

    @mohammed_ali wrote:

    I started making an app using ionic 4 RC (4.6.0) with blank template, Midway i decided to add tabs to the blank project so I generated pages and copied code from existing ionic 4 tabs project.
    I get the error in Visual Studio Code ‘ion-tab is not known element’, I have imported IonicModule and everything else is fine (ion-tabs,ion-tab-button,ion-tab-bar, etc) but ion-tab is not defined.

    I think I must import something is not imported by default at blank project, Tried starting a new blank project with 1 tabs page and same.

    Posts: 1

    Participants: 1

    Read full topic

    ↧
    ↧

    Error to Produce

    December 21, 2018, 2:36 pm
    ↧

    Problem Xcode

    December 21, 2018, 4:14 pm
    ↧

    Gradient Fill ang2 chart in Inonic 3

    December 21, 2018, 5:57 pm
    $
    0
    0

    @Kenny82 wrote:

    Hi everyone,
    I used ng2 chart for my Ionic project. It’s useful and cool. But I have 2 problem cannot resolve.
    1 - set gradient fill color for area.
    I read this solution but I cannot use it:

    // in template
<canvas #myCanvas [colors]="lineChartColors" ...

// in component
export class Demo {
  @ViewChild("myCanvas") canvas: ElementRef;
  lineChartColors;

// in ngOnInit
let gradient = this.canvas.nativeElement.getContext('2d').createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, 'green');
gradient.addColorStop(1, 'white');
this.lineChartColors = [
  {
    backgroundColor: gradient
  }
];

    2 - add an icon to last point (current point).
    Same first problem,I did it but just one chart display and others is error ( I have many charts in my project)

    ngOnInit() {
var specialPoint = new Image();
      specialPoint.src= 'https://i.imgur.com/yDYW1I7.png';
      Chart.pluginService.register({
    afterUpdate: function(chart) {
       chart.config.data.datasets[0]._meta[0].data[23]._model.pointStyle = specialPoint;
      }
});
}

    Please help me. I just a newbie in Ionic, so maybe I can not describe everything clearly. Thank you so much

    Posts: 1

    Participants: 1

    Read full topic

    ↧
    Search

    How to pass data from 1 page to another using navigation in Ionic 4?

    December 21, 2018, 10:37 pm
    $
    0
    0

    @flycoders_sourav wrote:

    I want to pass value one page to another page
    home.html

      <ion-item *ngFor="let item of data" (click)="onClickDetails(item)">
    <ion-thumbnail slot="start" >
      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
    </ion-thumbnail>
    <p>{{item.userFullName}}</p>
    <ion-button color="primary" slot="end">View</ion-button>
  </ion-item>

    home.ts

     onClickDetails(item){
    this.router.navigate(['details',{item:item}])
    }

    details.ts

     ngOnInit() {
    this.getValue= this.router.snapshot.paramMap.get("item")
    console.log(JSON.parse(this.getValue))
  }

    there showing only one value but i want whole value of data variable
    how can i do that
    please help me out
    Thanks in advance

    Posts: 1

    Participants: 1

    Read full topic

    ↧
    ↧

    Ionic FileTransfer Plugin do not work on browser platform

    December 21, 2018, 10:53 pm
    $
    0
    0

    @demokumar wrote:

    Ionic FileTransfer Plugin does not work on browser platform

    Error {“code”:1,“source”:“E:/canvas_draw_image.png”,“target”:“https://Server-Path”,“http_status”:null,“body”:null,“exception”:null}

    Posts: 1

    Participants: 1

    Read full topic

    ↧

    How to send Post Object to Detail page in ionic 4

    December 21, 2018, 11:27 pm
    ↧

    Ionic With Woocommerce 500 ( internel error )

    December 22, 2018, 3:47 am
    $
    0
    0

    @Hammad6264 wrote:

    Hello, and welcome to everybody, actually I am getting an error with Ionic Woocommerce. When I try to place my order from my project to web. i get an 500 ( internal error ).
    Screenshot_1
    Somebody help me please???

    Posts: 1

    Participants: 1

    Read full topic

    ↧

    App rating plugin with 2 buttons is not working on Ionic 3

    December 22, 2018, 5:51 am
    $
    0
    0

    @sampath wrote:

    Hi,

    I use this app rate plugin and it is working fine. I need to remove laterButtonLabel from that dialogue box. I have just removed it from the customLocale . But then it shows NULL instead of removing it. So any clue to do this? i.e. I just need 2 buttons.

    customLocale: {
    title: "Would you mind rating %@?",
    message: "It won’t take more than a minute and helps to promote our app",
    cancelButtonLabel: "No, Thanks",
    //laterButtonLabel: "Remind Me Later", // I don't need this
    rateButtonLabel: "Rate It Now",
    appRatePromptTitle: 'Do you like using %@',
  },

    Posts: 1

    Participants: 1

    Read full topic

    ↧
    ↧

    AngularFire list is loaded every time i open the page

    December 22, 2018, 10:38 am
    $
    0
    0

    @EnzoDLP wrote:

    When I load a list (for example user) it works very well however, every time I load this famous page, the whole list is reloaded by firebase is so uses a lot of data …

    How to load it only once during the session?

    I have already tried to load the list once at the opening of the page in the TS but it still loads the data because of the ngIf in HTML …

    <ion-col col-12>

    <p>Pseudo : {{user.p}}</p>

</ion-col>


this.users = await this.database.list( `G/${this.myUid}/U/` ).valueChanges().take(1);

    I wish that when I open the page it loads the list the first time but when I close this page and I return later (in the same session) it does not reload the data but only that it me them posters

    Posts: 1

    Participants: 1

    Read full topic

    ↧

    Save ionic content as image

    December 22, 2018, 11:43 am
    $
    0
    0

    @mfouash wrote:

    i want to save all my ion-content as image
    and share it to Facebook using social plugin

    i tray using dom to image js library but i get error with when tray to save content as image to device storage

    any suggestion please

    Posts: 1

    Participants: 1

    Read full topic

    ↧
    Search

    How I do correctly push my storage items to my array list?

    December 22, 2018, 3:14 pm
    $
    0
    0

    @ubicak wrote:

    My code like this. I seen on my console correctly values. But i cant use my array list in another function. My storage items seening as undefined. Please help me!

    this.storage.forEach((value, key) => {
    if (key == 'favoriteStory') {
      //console.log("value", value);
      this.item = value.toString();
      this.myItems.unshift(this.item);
    }
 })

    Posts: 1

    Participants: 1

    Read full topic

    ↧

    Ionic 4 bundle size (ionic-angular)

    December 22, 2018, 3:26 pm
    $
    0
    0

    @RobinH wrote:

    What should the expected app size be with Ionic 4 with Angular? Since it’s supposed to be great for building PWAs, bundle size matters a lot.

    When I’m doing a prod build of a blank 4.0.0-rc.0 “sidemenu” app, the Chrome developer tools shows 676kb downloaded on app startup.

    What are the recommended ways to shrink the size of the app on first load? Do I have to ditch Angular?

    (The build is done using --prod with 4.0.0-rc.0. A blank starter template generated by the CLI.)

    Posts: 1

    Participants: 1

    Read full topic

    ↧
    ↧

    Between Angular Flex Layout & Ionic Grid

    December 22, 2018, 4:26 pm
    $
    0
    0

    @thomaskim47 wrote:

    Hi guys, I have a question between these two awesome layout modules. Previously when I was developing an ionic app, I love how ionic grid simpleness. But soon when I start building my website with angular. I found angular flex layout. which has a lesser line of code to achieve the same thing. I was wondering is it better for me to switch from ionic grid to angular flex layout in my ionic app project.
    What do you think guys?

    1. Is ionic grid has better flexibility or advantages compare to angular flex when working in an ionic app? or are they the same?
    2. Which would you choose since angular flex layout is less verbose and look ‘kinda’ neater than ionic grid>ion-row>ion-col

    Happy coding

    Posts: 1

    Participants: 1

    Read full topic

    ↧

    Between Angular Flex Layout & Ionic Grid, Which do you preferred?

    December 22, 2018, 4:31 pm
    $
    0
    0

    @thomaskim47 wrote:

    Hi guys, I have a question between these two awesome layout modules. Previously when I was developing an ionic app, I love how ionic grid simpleness. But soon when I start building my website with angular. I found angular flex layout. which has a lesser line of code to achieve the same thing. I was wondering is it better for me to switch from ionic grid to angular flex layout in my ionic app project.
    What do you think guys?

    1. Is ionic grid has better flexibility or advantages compare to angular flex when working in an ionic app? or are they the same?
    2. Which would you choose since angular flex layout is less verbose and look ‘kinda’ neater than ionic grid>ion-row>ion-col

    Link to Angular Flex Layout

    Happy coding

    Posts: 1

    Participants: 1

    Read full topic

    ↧

    Adding ion-tab-bar on to google maps at the bottom

    December 22, 2018, 8:35 pm
    $
    0
    0

    @anujpunia wrote:

    I am using Ionic4 to build an app around google maps using native maps. Everything works fine except that I am unable to put a tab bar at the bottom of the screen. When I do, it overlaps the whole screen it seems and map becomes non clickable. Following is the html snippet I am using -

    <ion-content padding>
  <div id="map_canvas">
      <ion-searchbar>
        </ion-searchbar>
      <ion-tabs>
          <ion-tab-bar slot="bottom">
            <ion-tab-button tab="account">
              <ion-icon name="heart"></ion-icon>
            </ion-tab-button>
            <ion-tab-button tab="listview">
              <ion-icon name="clipboard"></ion-icon> 
            </ion-tab-button>
            <ion-tab-button tab="add-circle">
              <ion-icon name="add-circle"></ion-icon> 
            </ion-tab-button>
          </ion-tab-bar>
       </ion-tabs>  
  </div>

    It seems to works if I remove <ion-tabs> but then the placement is disturbed. Given below is the image as whats happening -

    Error1
    Error1.png2368x1268 349 KB

    What am I doing wrong here?

    Following seems to work but then the ion-tab-bar gets a bit hidden at the bottom -

    <ion-content padding>
      <ion-tabs>
          <div id="map_canvas">
              <ion-searchbar>
              </ion-searchbar>
          </div>
          <ion-tab-bar slot="bottom">
            <ion-tab-button tab="account">
              <ion-icon name="heart"></ion-icon> 
            </ion-tab-button>
            <ion-tab-button tab="listview">
              <ion-icon name="clipboard"></ion-icon> 
            </ion-tab-button>
            <ion-tab-button tab="add-circle">
              <ion-icon name="add-circle"></ion-icon> 
            </ion-tab-button>
          </ion-tab-bar>
       </ion-tabs>  
</ion-content>

    Following is the screen shot -

    error1
    error1.JPG396x686 64.9 KB

    Posts: 1

    Participants: 1

    Read full topic

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