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

Custom Alerts local notification

February 23, 2019, 7:23 am
$
0
0

@aligassan wrote:

l have ionic app for flights schedules details using data json api .l want to make when user click on bell he will get notification about the status of flight , if she is arrival or delay or landed . l installed Local Notifications native for ionic , but l don`t know how can l Custom these steps above ! . there is any idea or step please ?

LEzlm.jpg720×916

Posts: 1

Participants: 1

Read full topic

↧
Search

Ion-slides preloading not working

February 23, 2019, 7:56 am
$
0
0

@brenden wrote:

When I use ion-slides with provided options that contain “preloadImages: true, lazy: false”, the images still appear to be lazy loaded. Any clue as to how to get this to work properly?

this.slideOptions = {
      loop: true,
      preloadImages: true,
      lazy: false
    };

...

 <ion-slides [options]="this.slideOptions">
     <ion-slide *ngFor="let image of this.images; index as i;">
         <ion-img
                 [src]="image">
          </ion-img>
    </ion-slide>
</ion-slides>

Here’s my ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : android 7.1.4, browser 5.0.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.4.0, (and 6 other plugins)

System:

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

Posts: 1

Participants: 1

Read full topic

↧
↧

Ionic V4 - How do you change button background color without --background?

February 23, 2019, 8:16 am
$
0
0

@avex wrote:

How do you change button background color without --background?
Is there --background-color ?
Too many such kind of problems in IONIC4 web component.

For just to change background color, NOT WHOLE BACKGROUND, to using BACKGROUND is very very STUPID , because I don’t want to override background the other attributes.

ion-button {
    --background: orangered;
}

Is using web component just for FANCY? It seems not practical, and increase development time, who decided to change to web component with shadow dom?

Posts: 1

Participants: 1

Read full topic

↧

Ionic 4 redirect to tabs page

February 23, 2019, 9:01 am
$
0
0

@AvW wrote:

I have created a standard tabs app using the command: ionic start tabs tabs --type=angular

Next I modify routes app-routing.modules from:

const routes: Routes = [
{ path: ‘’, loadChildren: ‘./tabs/tabs.module#TabsPageModule’ }
];

to:

const routes: Routes = [
{ path: ‘’, redirectTo: ‘tabs’, pathMatch: ‘full’ },
{ path: ‘tabs’, loadChildren: ‘./tabs/tabs.module#TabsPageModule’ }
];

If I run ‘ionic serve’ I get the following error message:
ERROR Error: “[object Object]”
resolvePromise8Angular

Why?

Posts: 1

Participants: 1

Read full topic

↧

Manipulate Firestore Data in TypeScript

February 23, 2019, 10:34 am
$
0
0

@trevorp123 wrote:

Total noob question, and I’m hoping it’s a simple answer. I’m using the angularfire2 library to connect to a Firestore database. I’m able to subscribe to a field and display it using a ngModel. I’m looking for a way to get the data and manipulate it in TypeScript. So far everything I’ve tried has just gotten me the document pointer but not the data itself. Can anyone point me in the right direction? Any help is greatly appreciated.

Posts: 2

Participants: 2

Read full topic

↧
↧

How to using grid image navigation?

February 23, 2019, 11:44 am
$
0
0

@supakwong wrote:

Can you help me, I try to create menu with grid image clickable to other page.

I try find the idea on the Internet and not found it.

    <ion-col no-padding>
      <ion-img src="/assets/bellwhite.png" full no-margin href="/notification"></ion-img>
    </ion-col>

I try cover by button tag it’s not fit on grid.

Posts: 1

Participants: 1

Read full topic

↧

Uploading file without the now deprecated FileTransfer plugin

February 23, 2019, 12:08 pm
$
0
0

@nharrer wrote:

Cordova deprecated the FileTransfer plugin. So I tried to upload images taken with the Camera plugin without it. Actually uploading a file with angular’s httpClient is pretty easy. However converting a local file into a blob was all but straight forward. There is a cordova blog post, which explains how it is done.

The javascript code is however not very suitable for angular. I ended up with following code:

    private uploadFile(serverurl: string, filePath: string): Observable<boolean> {
        // convert filePath into blob. see:
        // https://cordova.apache.org/blog/2017/10/18/from-filetransfer-to-xhr2.html
        return from(this.file.resolveLocalFilesystemUrl(filePath)).pipe(
            mergeMap((fileEntry: FileEntry) => {
                // wrap callback into observable
                return Observable.create(observer => {
                    fileEntry.file(file => {
                        const name = file.name;
                        const reader = new FileReader();
                        reader.onloadend = () => {
                            const imgBlob = new Blob([reader.result], { type: file.type });
                            observer.next([imgBlob, name]);
                            observer.complete();
                        };
                        reader.readAsArrayBuffer(file);
                    }, error => {
                        observer.error(error);
                    });
                });
            }),
            mergeMap(([imgBlob, name]) => {
                const formData = new FormData();
                formData.append('file', imgBlob, name);

                return this.httpClient
                    .post(serverurl, formData).pipe(
                        map(() => true)
                    );
            })
        );
}

I post this here for anybody who needs it. If the code can be further simplified, please let me know.

A full example project is here on github: https://github.com/nharrer/ionic-file-upload

Regards,
Norbert

Posts: 1

Participants: 1

Read full topic

↧

Ionic 3 - File Opener not working on iOS via DevApp

February 23, 2019, 12:16 pm
$
0
0

@Morgs009 wrote:

Can anyone help figure out why my app is persisting that FileOpener plugin is not installed when it actually is?

Everytime I try to open a PDF/Image/Docx/XLSX or any other file type I get a notification in the console as per below:

enter image description here

I followed this tutorial here line by line and when I investigate the file structure I can see that the FileOpener plugin is there, see:

enter image description here

enter image description here

In my app.module.ts:

enter image description here

In my user.provider.ts file:

enter image description here

enter image description here

This is my DownloadDocument function:

async DownloadDocument( location: string, name: string, mime: string, message: string = undefined )
  {
    var loading = await this.ShowLoading( message );

    try
    {
      var dir = '';

      if ( this.IsIOS )
      {
        dir = this.file.documentsDirectory;
      }
      else if ( this.IsAndroid )
      {
        dir = this.file.dataDirectory;
      }

      dir = `${dir}${name.replace(/ /g, '')}`;

      const fileTransfer: FileTransferObject = this.transfer.create();

      fileTransfer.download(`${this.APIUrl}/${location}`, dir, true)
                  .then( ( f ) => 
                  {
                    this.fp.open( f.toURL(), mime ).then( () =>
                    {
                      console.log('File is opened')
                    } )
                    .catch(err =>
                    {
                      console.log('Open Error: ' + JSON.stringify( err ));
                    });

                    loading.dismiss();
                  }, ( error ) => 
                  {
                    console.log('Download Error: ' + JSON.stringify( error ));

                    loading.dismiss();
                  } );

    }
    catch( error )
    {
      console.log('General Error: ' + JSON.stringify( error ));
      loading.dismiss();
    }
  }

One thing to note though is that if I use the DocumentViewer plugin, it can open the PDF files. But I would like to use the FileOpener plugin as I intend to open other files other than PDFs.

Can anyone perhaps see what I am doing wrong?

Posts: 1

Participants: 1

Read full topic

↧
Search

Using Ionic with Vue?

February 23, 2019, 12:32 pm
$
0
0

@Dog2puppy wrote:

I’m trying to figure out how to use Ionic with Vue but I’m not really sure where or how to start.

Posts: 1

Participants: 1

Read full topic

↧
↧

Screen doesn't turn off

February 23, 2019, 4:00 pm
$
0
0

@behrooz2 wrote:

Hi,
My app doesn’t let the screen go to sleep neither on android nor on ios (after being inactive, no interaction with screen, for several minutes). I did not install any plugin to do so and am wondering why. Here is my config.xml file:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.***" version="0.0.12" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>***</name>
    <description>****</description>
    <author email="***" href="">***</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="http://ionic.local/*" />
    <allow-navigation href="***" />
    <allow-navigation href="http://localhost:8080/*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
        <edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
            <string>To share photos on *</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
            <string>To share photos on *</string>
        </edit-config>
    </platform>
    <preference name="AllowInlineMediaPlayback" value="true" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <plugin name="cc.fovea.cordova.purchase" spec="^7.1.0">
        <variable name="BILLING_KEY" value="*****" />
    </plugin>
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <plugin name="cordova-plugin-camera" spec="^3.0.0">
        <variable name="CAMERA_USAGE_DESCRIPTION" value="To Share Photos on *" />
        <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="To Share Photos on *" />
    </plugin>
    <plugin name="cordova-plugin-device" spec="^1.1.7" />
    <plugin name="cordova-plugin-file-transfer" spec="^1.7.0" />
    <plugin name="cordova-plugin-splashscreen" spec="^4.1.0" />
    <plugin name="cordova-plugin-statusbar" spec="^2.3.0" />
    <plugin name="cordova-sqlite-storage" spec="^2.1.4" />
    <plugin name="cordova-plugin-x-socialsharing" spec="5.4.1" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="2.1.3" />
    <plugin name="cc.fovea.cordova.purchase" spec="^7.2.6" />
    <plugin name="cordova-plugin-inappbrowser" spec="3.0.0" />
    <plugin name="cordova-plugin-ionic-webview" spec="^3.1.2">
        <variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
    </plugin>
    <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
    <plugin name="cordova-plugin-facebook4" spec="4.2.0">
        <variable name="APP_ID" value="*" />
        <variable name="APP_NAME" value="*" />
        <variable name="FACEBOOK_HYBRID_APP_EVENTS" value="false" />
        <variable name="FACEBOOK_ANDROID_SDK_VERSION" value="4.40.0" />
    </plugin>
    <engine name="ios" spec="4.5.5" />
    <engine name="android" spec="^7.1.4" />
</widget>

and ionic info:

Ionic:

   ionic (Ionic CLI)  : 4.10.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

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

System:

   Android SDK Tools : 26.1.1 (/Users/Library/Android/sdk/)
   NodeJS            : v9.11.1 (/usr/local/Cellar/node/9.11.1/bin/node)
   npm               : 5.10.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

Posts: 1

Participants: 1

Read full topic

↧

Ionic 4 apk is bigger that version 3

February 23, 2019, 5:11 pm
$
0
0

@felipeblan wrote:

I just migrated an app that I have made using the version 3 of ionic framework, but now it is completely ported to the actual version (4). But i see that is almost double the size when i generate the apk; even in prod and release mod. Is that norma? or is there any suggestion to try to make it smaller?

Thanks.

Posts: 1

Participants: 1

Read full topic

↧

Ionic-v4 VirtualScroll on screen orientation change

February 23, 2019, 5:48 pm
$
0
0

@arnhrwd wrote:

The IonVirtualScroll component does not update when the screen orientation changes. I have tried something like this, which was recommended in earlier versions of Ionic:

this.screenOrientation.onChange().subscribe(()=>{
    virtualScroll.readUpdate(true)
    virtualScroll.writeUpdate(true)
})

However those methods no longer exist in Ionic-v4 and I can’t find any other equivalent method. Is there one?

Posts: 1

Participants: 1

Read full topic

↧

Validation toast for each input fields

February 23, 2019, 9:48 pm
$
0
0

@aseelali23 wrote:

I have a registration page, it contains some inputs and comboboxes. I need to push a toast when any of the comboboxes or inputs are not selected or entered and thet toast should show which is the field or check box that need to be entered.

      <ion-header>
    <ion-navbar>
        <ion-title>Basic Details</ion-title>
    </ion-navbar>
    </ion-header>

     <ion-content>
    <h1 class="h1">Basic Details</h1>
    <ion-row>
        <ion-col>
            <ion-input name="First Name" placeholder="First Name"></ion-input>
        </ion-col>
        <ion-col>
            <ion-input name="Last Name" placeholder="Last Name"></ion-input>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-input name="Age" placeholder="Age"></ion-input>
        </ion-col>
        <ion-col>
            <ion-datetime displayFormat="MMM DD YYYY" placeholder="Date Of Birth"></ion- 
       datetime>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-select interface="popover" placeholder="Height">
                <ion-option value="nes">4ft 8in</ion-option>
                <ion-option value="n64">4ft 9in</ion-option>
                <ion-option value="ps">5ft</ion-option>
                <ion-option value="genesis">5ft 1in</ion-option>
                <ion-option value="saturn">5ft 2in</ion-option>

            </ion-select>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Weight(Kgs)">
                <ion-option value="nes">48Kgs</ion-option>
                <ion-option value="n64">49Kgs</ion-option>
                <ion-option value="ps">55Kgs</ion-option>
                <ion-option value="genesis">80Kgs</ion-option>
                <ion-option value="saturn">85Kgs</ion-option>
            </ion-select>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Gender">
                <ion-option value="nes">Male</ion-option>
                <ion-option value="n64">Female</ion-option>
            </ion-select>
        </ion-col>
        </ion-row>


      <ion-row>
 
        <ion-col>
            <ion-select interface="popover" placeholder="Marital Status">
                <ion-option value="nes">Never Married</ion-option>
                <ion-option value="n64">Widowed</ion-option>
                <ion-option value="ps">Divorced</ion-option>
                <ion-option value="genesis">Awaiting Divorce</ion-option>
            </ion-select>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Mother Tongue">
                <ion-option value="nes">Hindi</ion-option>
                <ion-option value="n64">Tamil</ion-option>
                <ion-option value="ps">Malayalam</ion-option>
                <ion-option value="genesis">English</ion-option>
            </ion-select>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Eating Habits">
                <ion-option value="nes">Vegetarian</ion-option>
                <ion-option value="n64">Non-Vegetarian</ion-option>
            </ion-select>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-select interface="popover" placeholder="Smoking Habits">
                <ion-option value="nes">No</ion-option>
                <ion-option value="n64">Occasionally</ion-option>
                <ion-option value="ps">Yes</ion-option>
            </ion-select>
        </ion-col>
        <ion-col>
            <ion-select interface="popover" placeholder="Drinking Habits">
                <ion-option value="nes">No</ion-option>
                <ion-option value="n64">Occasionally</ion-option>
                <ion-option value="ps">Yes</ion-option>
            </ion-select>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <button ion-button full color="secondary" block>Save</button>
        </ion-col>
        <ion-col>
            <button (click)="nxt()" ion-button full color="primary" block>Next</button>
        </ion-col>
    </ion-row>
     </ion-content>

ts file

     import { Component } from '@angular/core';
     import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic- 
    angular';
    import { ObsAuthService } from '../../services/obs_auth.services';
    import { MatrirelPage } from '../matrirel/matrirel';

    @Component({
    selector: 'page-matribas',
    templateUrl: 'matribas.html',
    
    providers: [ObsAuthService]
     })
    export class MatribasPage{
    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController) {
        }

    selectChange(e) {
        console.log(e);
    }  
    public nxt(){
    this.nav.push(MatrirelPage);
    } 
    goback() {
            this.nav.pop();
    }   
    }

Posts: 2

Participants: 1

Read full topic

↧
↧

Streaming Media - Object(...) is not a function

February 23, 2019, 11:28 pm
$
0
0

@zkylab wrote:

Hi.
I already added “/ngx” to related imports but I still get ;

TypeError: Object(...) is not a function
    at StreamingMedia.playVideo (http://localhost:8100/build/vendor.js:82539:147)
    at HomePage.webpackJsonp.262.HomePage.play (http://localhost:8100/build/main.js:67:29)
    at Object.eval [as handleEvent] (ng:///AppModule/HomePage.ngfactory.js:37:27)
    at handleEvent (http://localhost:8100/build/vendor.js:13914:155)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:15423:42)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/vendor.js:15010:12)
    at dispatchEvent (http://localhost:8100/build/vendor.js:10329:25)
    at http://localhost:8100/build/vendor.js:10954:38
    at HTMLButtonElement.<anonymous> (http://localhost:8100/build/vendor.js:40350:53)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Stream Media
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button (click) = "play()">Play</button>
</ion-content>

home.ts

import { Component } from '@angular/core';
import {StreamingMedia,StreamingVideoOptions} from "@ionic-native/streaming-media/ngx";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(private streamingMedia:StreamingMedia) {

  }
  play(){
    let options: StreamingVideoOptions = {
      successCallback: () => { console.log('Video played') },
      errorCallback: (e) => { console.log('Error streaming') },
      orientation: 'landscape',
      shouldAutoClose: true,
      controls: false
    };

    this.streamingMedia.playVideo('https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4', options);
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import {StreamingMedia} from "@ionic-native/streaming-media/ngx";

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

Thanks.

Posts: 3

Participants: 2

Read full topic

↧

How to pass a parameter(logged user) to all the ionic pages

February 24, 2019, 12:33 am
↧
Search

Ionic 4 virtual scroll - scroll to a specific element

February 24, 2019, 1:32 am
$
0
0

@salehasadi1994 wrote:

Hi, I have a list of questions which should be rendered programmatically and unfortunately with dynamic height . in purpose of performance and get rid of lags I’m using ionic virtual scroll . the problem is that i have to implement jumping feature but since the target element is not rendered yet it can’t find that element and so it can’t scroll to that! i also tested ngx-virtual-scroller it’s scroll to target works perfectly but it does not support dynamic heights and don’t work perfectly if i don’t specify item height. does any body has any idea about this problem!? that’s killing me :disappointed_relieved:

Posts: 1

Participants: 1

Read full topic

↧

Separate mobile and desktop code?

February 24, 2019, 2:05 am
$
0
0

@pefe wrote:

I’m currently using Ionic 4 to make the mobile apps. with usages of cordova native plugins i know it won’t work with the desktop platform. should i continue to use ionic for desktop/browser and just add platform.is(‘cordova’) to not execute any cordova native plugins? or is there a better way to handle this? or i might need to write another angular project targeting browser?

Posts: 2

Participants: 2

Read full topic

↧
↧

Tap-target-view in ionic 4

February 24, 2019, 2:52 am
↧

Add, edit or delete the features in a page

February 24, 2019, 3:07 am
$
0
0

@neenu123 wrote:

I have a subscription page consist of 3 cards, in which on selecting each card a button is enabled. This button is used to edit or add items to the page. Please helpme with the code to edit the items in the page.
html code

<ion-header>
    <ion-navbar>
        <ion-title>SUBSCRIPTION</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-item>
        <ion-buttons end>
            <button ion-button [disabled]="!isenabled" class="add_buttn" (click)="add_page()">Add/Edit</button>
        </ion-buttons>
    </ion-item>
    <ion-label class="sentnc">Take your desired plan to get access to our content easily</ion-label>
    <ion-row>
        <ion-col col2>
            <ion-card  (click)="onCardClick()">
                    <!-- <div *ngIf="cardClicked"></div> -->
                <ion-card-content>
                    <ion-card-title class="titles">
                        FREE
                    </ion-card-title>
                    <p>1 MONTH FREE</p>
                    <p>&nbsp;</p>
                    <p class="cost">₹0</p>
                    <p>&nbsp;</p>
                    <p>
                        <button (click)="free_pay()" ion-button color="dark" round>Choose plan</button>
                    </p>
                </ion-card-content>
            </ion-card>
        </ion-col>

        <ion-col col2>
            <ion-card (click)="onCardClick()">
                <ion-card-content>
                    <ion-card-title class="titles">
                        CLASSIC
                    </ion-card-title>
                    <p>6 MONTHS PLAN</p>
                    <p><del>₹150</del></p>
                    <p class="cost">₹100<sub>/month</sub></p>
                    <p>&nbsp;</p>
                    <p>
                        <button (click)="classic_pay()" ion-button color="dark" round>Choose plan</button>
                    </p>
                </ion-card-content>
            </ion-card>
        </ion-col>

        <ion-col>
            <ion-card (click)="onCardClick()">
                <ion-card-content>
                    <ion-card-title class="titles">
                        PREMIUM
                    </ion-card-title>
                    <p>1 YEAR PLAN</p>
                    <p><del>₹250</del></p>
                    <p class="cost">₹200<sub>/month</sub></p>
                    <p>&nbsp;</p>
                    <p>
                        <button (click)="premium_pay()" ion-button color="dark" round>Choose plan</button>
                    </p>
                </ion-card-content>
            </ion-card>
        </ion-col>
    </ion-row>
</ion-content>

ts file

import { Component } from '@angular/core';
import { NavController, NavParams, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { JobsearchPage } from '../jobsearch/jobsearch';
import { ConnectpayPage } from '../connectpay/connectpay';


@Component({
    selector: 'page-jobsub',
    templateUrl: 'jobsub.html',
    providers: [ObsAuthService]
})


export class JobsubPage {

     public category: string = "CLASSIC";
     public subscription: string = "PREMIUM";
     public option: string ="";
    //  public cardClicked: boolean = false;
     isenabled:boolean=false;
     editItem: any;
    //  public price: string ="";
    //  public p1: string = "₹100";
    //  public p2: string = "₹200";

    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController,
        public navParams: NavParams) { }

    selectChange(e) {
        console.log(e);
    }

//redirect to job search page
    public free_pay(){
        this.nav.push(JobsearchPage);
    }

//proceed to payment page
    public classic_pay(){

        this.nav.push(ConnectpayPage, {option: this.category});
    }

//proceed to payment page
    public premium_pay(){
        this.nav.push(ConnectpayPage, {option: this.subscription});
    }

//to enable the edit button
    public onCardClick(){
        //  this.cardClicked = !this.cardClicked;
        this.isenabled=true;
        this.editItem()
    }

    // public add_page(){

    // }
}

scss

page-jobsub{

.sentnc{
    color: grey;
    padding: 40px 10px;
    text-align: center;
}
.card-md {
    
    // width: calc(25% - 20px);
    font-size: 1.4rem;
    text-align: center;
    // background: rgb(192, 179, 167);
}
.cost{
    font-weight: bolder;
}
.titles{
    color: crimson;
    font-weight: bolder;
}
.add_buttn{
    // width: 15%;
    // background-color: red;
    padding: 10px 15px;
    // text-decoration-color: white;
   width: 10%;
    
}

}

Posts: 2

Participants: 1

Read full topic

↧

How to read sms using IONIC 4?

February 24, 2019, 3:35 am
$
0
0

@akashpjames wrote:

Is there any way to read SMS when it arrives using IONIC 4? I need to trigger some actions when the incoming message has a specific text. I saw this cordova-sms-plugin, but it can only send SMS. Any help in this regard would be helpful. I don’t need ios support, just Android support. I see many apps reading my messages, but why can’t I do it with IONIC?

Posts: 1

Participants: 1

Read full topic

↧
Viewing all 70440 articles
Browse latest View live
Search