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

Ionic v4: Main attribute in router-outlet not documented

March 25, 2019, 11:29 am
$
0
0

@suben wrote:

I’ve used the ionic menu in my app–which in the first place, didn’t swipe–so I’ve read some of the documentation of Ionic and saw, that they added an attribute main to the ionic-router-outlet.

This also just works if the menu is not encapsulated into it’s own component. I have to write it down among the router-outlet in the app.component.html

What makes me curious is, that this property “main” on the router-outlet component is not documented at all. At least I didn’t find it. https://ionicframework.com/docs/api/router-outlet

Also, here is the example, where the property has been used: https://ionicframework.com/docs/api/menu (which looks like this: <ionic-router-outlet main></ionic-router-outlet>

Last but not least I want to apologize if I overlooked something–this is my first Ionic app ever-- and I want to thank anybody who helps me solving this problem

Kind Regards

EDIT: It’s not worthy at all but I forgot to post my menu code. It’s really nothing special and almost 1:1 copied.

<ion-menu menuId="sideMenu" swipeGesture="true">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-button slot="start">
        <img alt="logo" src="../../assets/logo.svg">
      </ion-button>
      <ion-title>
        app name
      </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Attack</ion-item>
      <ion-item>Defence</ion-item>
      <ion-item>Feedback</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

Posts: 1

Participants: 1

Read full topic

↧
Search

Store firebase login locally

March 25, 2019, 11:50 am
$
0
0

@heardnetwork wrote:

We have an app that uses firebase to log people in for a local chat app. The app doesn’t store the login locally though, so that a lot of the time especially on a slow connection the user sees the login screen and thinks they have been logged out. The app then finds their account and jumps to their account screen, which is a pretty jarring experience.

I’ve had a look online and can’t seem to find what i need, can anyone point me in the right direction?

thanks

Posts: 1

Participants: 1

Read full topic

↧
↧

--type option with start command in Ionic 4

March 25, 2019, 12:35 pm
$
0
0

@atiyar006 wrote:

this docs page says -

Use the --type option to start projects using older versions of Ionic.

whereas this docs page says -

Next, create an Ionic v4 app using our “Tabs” app template:

ionic start photo-gallery tabs --type=angular

I wanted to create an Ionic 4 app. Do I use the --type option or not?

Posts: 1

Participants: 1

Read full topic

↧

IONIC 4 : content.scrollToPoint is giving an error as Cannot read property 'scrollTop' of null

March 25, 2019, 9:14 pm
$
0
0

@dvtopiya wrote:

I am using scrollToPoint as below to scroll to a specific point in my component.

@ViewChild(IonContent) content: IonContent;

this.content.scrollToPoint(0, yOffset - 70, 1000);

But it is giving an error like

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'scrollTop' of null TypeError: Cannot read property 'scrollTop' of null

Can anyone please suggest me anything on this?

Posts: 1

Participants: 1

Read full topic

↧

How to display api data in ionic 4?

March 25, 2019, 11:05 pm
$
0
0

@gokujy wrote:

Hello, I am getting data using API calls in ionic 4, but I’ve got 3 data at once and it’s three different array so my question is how can i display this data in ionic pages?

I tried like this:

pagedetail.ts

  table: any[];
  information = null;

constructor(private router: Router,
    public shareddataservice: SharedDataService,
    private activatedroute: ActivatedRoute) { }

  ngOnInit() {
    let id = this.activatedroute.snapshot.paramMap.get('id');

    this.shareddataservice.getprodbyID(id).then((dataprod: any[]) => {
      console.log('my data: ', dataprod);
      this.information = dataprod;
    });
  }

pagedetail.html

<h1>Product name:{{information.ProductNameEnglish}}</h1>

here i am getting data in this formate when i am using console.log:

apicall

help please :slight_smile:

Posts: 1

Participants: 1

Read full topic

↧
↧

Time range selection

March 25, 2019, 11:16 pm
↧

Background Service Call

March 25, 2019, 11:36 pm
↧

Ionic cordova prepare ios - not working (ionic4)

March 25, 2019, 11:40 pm
$
0
0

@joabchua wrote:

Hi all,

I am facing this error while trying to run ionic cordova prepare ios and run ios.

Error msg is as shown below.

Using "requireCordovaModule" to load non-cordova module "glob" is not supported. Instead, add this module to your dependencies and use regular "require" to load it.
CordovaError: Using "requireCordovaModule" to load non-cordova module "glob" is not supported. Instead, add this module to your dependencies and use regular "require" to load it.
    at Context.requireCordovaModule (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/hooks/Context.js:57:15)
    at exports.default (/Users/joabchua/Documents/dev/ionic/passguard-v3/plugins/cordova-plugin-add-swift-support/add-swift-support.js:12755:22)
    at runScriptViaModuleLoader (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/hooks/HooksRunner.js:181:32)
    at runScript (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/hooks/HooksRunner.js:157:16)
    at /usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/hooks/HooksRunner.js:125:20
    at processTicksAndRejections (internal/process/next_tick.js:81:5)
[ERROR] An error occurred while running subprocess cordova.

Anyone face this issue before? Appreciate if there is any help.

Posts: 1

Participants: 1

Read full topic

↧
Search

Ionic 4 Asynchronous Validator that works?

March 25, 2019, 11:47 pm
$
0
0

@IonicGeoff wrote:

Does anyone have an example of an Asynchonous custom validator using a http call that actually works?

I have tried adapting this to Ionic, but I can’t figure out how to get it to work in Ionic 4…

Ditto with Joshua Morony’s tutorial, I can’t get it to work with an http call…

…any help appreciated!

Posts: 1

Participants: 1

Read full topic

↧
↧

IONIC 4: Slides content not displayed properly

March 25, 2019, 11:47 pm
$
0
0

@daminivyas wrote:

I implemented 3 ion-slides which displays components under the same ion-content tag. But the slides view have some space at the bottom according to the maximum content area of the 3 slides.
image

These are the screenshots of slide 1 and slide 3. Slide 3 has the maximum content and that’s why it defines the content area for 1 and 2 slide too.

sldie3

Is it possible to have the content area(without space at bottom same as slide 3) for slide 1 and 2 also?

Posts: 1

Participants: 1

Read full topic

↧

How to handle CORS issue, API called twice?

March 26, 2019, 1:12 am
$
0
0

@ashokInceptive wrote:

Hi,

I have integrated change password API with header (‘Content-Type’, ‘application/json’). API called twice,
1st - Request Method: OPTIONS
2nd - Request Method: GET

The password gets changed with the 1st request but I got the response of the 2nd request. That was the wrong response which I got. I want to handle the 1st request’s response which is the correct response.

Please help to handle that request.

Thank You.

Posts: 1

Participants: 1

Read full topic

↧

Ionic 3: Ionic Storage with Observables

March 26, 2019, 2:01 am
$
0
0

@maxkoch wrote:

Hey Ionites!

I have CustomerPage, CustomerService and AuthService.

In need to pass an access_token from AuthService to CustomerService for http-get request.
AuthService and CustomerService are not working(see comments).
Please help me :slight_smile:

CustomerPage:

this.customerService.getCustomersDashboard()
      .subscribe(....)

CustomerService:

getCustomersDashboard(): Observable<any> {
      var url = "......";
    let authHeader = this.authservice.getAuthHeaders();  // HttpHeader with access_token

    return this.http.get(url, { headers: authHeader }).pipe(
      map((resp: Response) => {
        let response = this.extractData(resp);
        return response;
      }));

AuthService:
** is not working !!!**

 getAuthHeaders(){
    const authtoken = Observable.fromPromise(this.storage.get(`access_token`));
   
    return new HttpHeaders({ 'authorization': authtoken });  // => **not working**
  }

Posts: 3

Participants: 2

Read full topic

↧

Preload components, page opens with delay after first click

March 26, 2019, 2:18 am
$
0
0

@Corbis wrote:

I am using ionic v4 and lazy loading in my app like

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
            useHash: false,
            preloadingStrategy: PreloadAllModules,
        })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

but pages which use ionic elements take some time to show when I click the button for the first time. Repeat clicks show pages much faster.

Here is “Followers” page network tab screenshot after the first click:

click1
click1.png1246×671 35.2 KB

Here is “Followers” page network tab screenshot after the second click:

click2
click2.png1257×465 27.5 KB

Also inserting video example maybe it would be more clear what is the problem:

Screencast-2019-03-26
Screencast-2019-03-26.gif972×512 840 KB

As you see clicking the page second time doesn’t load any js chunks and page opens instantly. So my question is how to preload those js chunks so I can improve user experience when they open my app pages for the first time?

Posts: 1

Participants: 1

Read full topic

↧
↧

Ionic 4 Nav Push not pushing Page

March 26, 2019, 2:31 am
$
0
0

@D4rkMindz wrote:

While developing a new (tabs based) ionic app, i tried to push a new page. I already tried this.navCtrl.navigateForward(MyComponent) and this.router.navigate(['tabs','my','component']). I injected the Router (or NavCtrl) in the constructor and made it private.


@Component({
  selector: 'app-stream',
  templateUrl: './stream.page.html',
  styleUrls: ['./stream.page.scss'],
})
export class Component {
  constructor(
    private router: Router,
    private navCtrl: NavController,
  ) {
  }

 public navigateRouter() {
  this.router.navigate(['some', 'url'])
 }

 public navigateNav() {
  this.navCtrl.navigateForward(OtherComponent)
 }
}

In both cases, the URL gets updated, but the page component wont be displayed.
This is an example, the real app could be found on github (currently in the feature/stream branch)
Git (Fixed commit)

I’m actually not so sure about my routing (anymore).
My goal is to have /tabs removed in the URL and have routes like:
/stream
/stream/locations/:locationId
/tab2
/tab3

src/app/app-routing.module.ts
src/app/tabs/tabs.router.module.ts
src/app/tabs/stream/stream.module.ts

Any help is appreciated.

PS: i also tried the directive routerLink="MyComponent" in combination with routerDirection="forward"

Posts: 1

Participants: 1

Read full topic

↧

Cursor blinks on ios

March 26, 2019, 2:38 am
$
0
0

@iokinyu4 wrote:

Cursor blinks when I typing on Input or Textarea
How to fix this issue?

ezgif-2-bca791b44bc4
see video

I use cordova-plugin-ionic-webview 4.0.0. and platform version is ios@4.4.0
cli packages: (/Users/----/.nvm/versions/node/v8.11.1/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)

local packages:

@ionic/app-scripts : 3.2.2
Cordova Platforms  : android 6.3.0 ios 4.4.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.4 
Node              : v8.11.1
npm               : 5.6.0 
OS                : macOS
Xcode             : Xcode 10.1 Build version 10B61

Environment Variables:

ANDROID_HOME : /Users/mingyu/Library/Android/sdk

Misc:

backend : pro

Posts: 1

Participants: 1

Read full topic

↧
Search

Ionic 3 ion-select

March 26, 2019, 2:48 am
$
0
0

@tuxman wrote:

Default values using ion-select multiple.

HTML:

        <ion-select multiple="true" [(ngModel)]="repeated" (ionCancel)="repeatOnCancel()" (ionChange)="repeatOnChange()">
          <ion-option value="mon">Monday</ion-option>
          <ion-option value="tue">Tuesday</ion-option>
          <ion-option value="wed">Wednesday</ion-option>
          <ion-option value="thu">Thursday</ion-option>
          <ion-option value="fri">Friday</ion-option>
          <ion-option value="sat">Saturday</ion-option>
          <ion-option value="sun">Sunday</ion-option>
        </ion-select>

typescript:

repeated:Array<string> = [];

            if(this.alarm.mon === true) { this.repeated.push("mon"); }
            if(this.alarm.tue === true) { this.repeated.push("tue"); }
            if(this.alarm.wed === true) { this.repeated.push("wed"); }
            if(this.alarm.thu === true) { this.repeated.push("thu"); }
            if(this.alarm.fri === true) { this.repeated.push("fri"); }
            if(this.alarm.sat === true) { this.repeated.push("sat"); }
            if(this.alarm.sun === true) { this.repeated.push("sun"); }

With the above code the select shows nothing also when clicked on nothing is ticked.

        <ion-select multiple="true" [(ngModel)]="repeated" (ionCancel)="repeatOnCancel()" (ionChange)="repeatOnChange()">
          <ion-option value="mon" [selected]="alarm.mon">Monday</ion-option>
          <ion-option value="tue" [selected]="alarm.tue">Tuesday</ion-option>
          <ion-option value="wed" [selected]="alarm.wed">Wednesday</ion-option>
          <ion-option value="thu" [selected]="alarm.thu">Thursday</ion-option>
          <ion-option value="fri" [selected]="alarm.fri">Friday</ion-option>
          <ion-option value="sat" [selected]="alarm.sat">Saturday</ion-option>
          <ion-option value="sun" [selected]="alarm.sun">Sunday</ion-option>
        </ion-select>

With this HTML nothing is shown in the select however the tick boxes are ticked however after I cancel they are removed.

Posts: 1

Participants: 1

Read full topic

↧

How to save different relations of different table

March 26, 2019, 3:19 am
$
0
0

@FK2193 wrote:

I want to create a reminder, I have completed my backend in spring-boot but I m confusing how to save all that tables through ionic. please help me out!

Posts: 1

Participants: 1

Read full topic

↧
↧

How to do check if a string is in the array?

March 26, 2019, 3:25 am
$
0
0

@Manel00 wrote:

Hi!

I’d like to know how could I check if theres a string in an array on Ionic 4, thank you so much

Regards

Posts: 2

Participants: 2

Read full topic

↧

How to solve the Promise returned by the Ionic storage?

March 26, 2019, 3:37 am
$
0
0

@ioclaudio wrote:

Hi,
I’m trying to read a token from the Ionic storage with a “get”.
I know it returns a Promise but I’ve defined this asynchronous method:

  async getToken() {
    return await this.storage.get('TOKEN_KEY');
  }

  getWsHeader() {
    let tempToken;
    tempToken = this.getToken();
    console.log('@@@@@@@ TOKEN:', tempToken);

When I run this code the variable “tempToken” is not a string but it is still a Promise.
How is it possible?
This is what I see in the Chrome console about “tempToken”:
ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}

I’m using this version of Ionic:

Ionic:
   ionic (Ionic CLI)             : 4.12.0
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.6
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.6
   @ionic/angular-toolkit        : 1.4.1
System:
   NodeJS : v10.15.1
   npm    : 6.7.0
   OS     : Windows 10

Thank you very much

cld

Posts: 1

Participants: 1

Read full topic

↧

Ion-selectable with default

March 26, 2019, 3:43 am
↧
Viewing all 49213 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>