How to transfer parameter from one component to App component In Ionic App

Question

I am working on a Ionic Ecommerce App and I am performing the login in the Ionic Ecommerce App and when the user login with the credentials, I am not able to show the name of the user in the sidebar after the login. Error: No provider for NavParams.

This is my app.component.ts:

import { FrontPage } from './../pages/front/front';
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, NavController, NavParams} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { ProductPage } from '../pages/product/product';
import { LoginpagePage } from '../pages/loginpage/loginpage';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  menuclick: boolean = true;
  menuclick2: boolean = false;
  rootPage: any = FrontPage;
  uname: string;

  pages: Array<{title: string, component: any, name2: string}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public events: Events) {
    this.initializeApp();

    this.pages = [
      { title: 'Home', component: FrontPage, name2: 'home' },
      { title: 'Product Categories', component: ProductPage, name2: 'basket' },
      { title: 'Merchandise', component: ProductPage, name2: 'man' },
      { title: 'My Orders', component: ProductPage, name2: 'cart' },
    ];

    events.subscribe('user:created', (user) => {
    console.log('Welcome', user);
});
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    this.nav.setRoot(page.component);
  }

  loginpage2()
  {
    this.nav.push(LoginpagePage);
  }

  logoutClicked() {
    console.log("Logout");
    this.nav.pop();
  }
}

This is my loginpage.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { ListPage } from '../list/list';
import { FrontPage } from '../front/front';
import { CartPage } from './../cart/cart';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';
import { MyApp } from './../../app/app.component';

@IonicPage()
@Component({
  selector: 'page-loginpage',
  templateUrl: 'loginpage.html',
})
export class LoginpagePage {
  todo : FormGroup;
  responseData : any;
  userData = {"username": "", "password": ""};
  user: any;
  constructor(public navCtrl: NavController, public navParams: NavParams,
    public restProvider: RestapiProvider, private formBuilder: FormBuilder, private alertCtrl: AlertController, public events: Events) {
      this.todo = this.formBuilder.group({
        username: ['', Validators.required],
        password: ['', Validators.required],
      });
    this.createUser(this.user);
  }
  createUser(user) {
  console.log('User created!')
  this.events.publish('user:created', user);
  }

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

    getloginUsers(){
      this.restProvider.getUsers(this.userData, 'user_Login').subscribe((data) => {
        console.log(data);
        if (data) {
          this.responseData = data;
          console.log(this.responseData.msg.name);
          this.user = this.responseData.msg.name;
          if (this.responseData.status === 'success') {
            this.navCtrl.push(MyApp);
          }
          else{
            this.presentAlert();
          }
        }
      });

 }

 presentAlert() {
  let alert = this.alertCtrl.create({
    title: 'Incorrect Username Or Password',
    buttons: ['Dismiss']
  });
  alert.present();
}

 cardpage2()
 {
   this.navCtrl.push(CartPage);
 }
}

I have also concluded that, The app.component.ts is the first thing rendered in your app. You can't navigate to it, obviously, you can't receive params. I have to use a provider to store your user data, and then set your side menu data from the provider but I am confused in the provider code. Any help is much appreciated.

you can Use Events for this. Check this : ionicframework.com/docs/api/util/Events — Najam Us Saqib
– Najam Us Saqib, Commented Jan 16, 2019 at 5:44
@Najamussaqib. I have also used that but it is not working. Can you help me with the code or I can share my code to you. — Rahul Pamnani
– Rahul Pamnani, Commented Jan 16, 2019 at 5:46
are you getting any error? and Why are you calling your function in your constructor? call yout function after the response of your API. — Najam Us Saqib
– Najam Us Saqib, Commented Jan 16, 2019 at 6:00

Rahul Pamnani · Accepted Answer · 2019-01-16 06:33:39Z

1

your login Function should be like this:

    getloginUsers(){
      this.restProvider.getUsers(this.userData, 'user_Login').subscribe((data) => {
        console.log(data);
        if (data) {
          this.responseData = data;
          console.log(this.responseData.msg.name);
          this.user = this.responseData.msg.name;
          if (this.responseData.status === 'success') {
            this.createUser(this.user);
            this.navCtrl.push(MyApp);
          }
          else{
            this.presentAlert();
          }
        }
      });

 }

Try this function as your Login. And remove your this.createUser(this.user) from your constructor. Inside your app.component.ts

    this.events.subscribe('user:created', (data) => { // update from login
      console.log(data);
      this.email = data.email;
      this.userName = data.display_name ;
 });

edited Jan 16, 2019 at 6:33

Rahul Pamnani

1,4356 gold badges32 silver badges69 bronze badges

answered Jan 16, 2019 at 6:07

Najam Us Saqib

3,4411 gold badge29 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rahul Pamnani Over a year ago

I have done that. It is showing value in the console but how to print the value in app.html. Like this {{user}} , it is giving error.

Rahul Pamnani Over a year ago

In the app.component.ts, this is giving the value console.log('Welcome', user); but how to print it in the app.html

Najam Us Saqib Over a year ago

inside your app.component.ts received data like this:

this.events.subscribe('user:created', (data) => {   // update from login      console.log(data);        this.mYdata = data.profile_pic;         this.userName = data.display_name ;         });

Rahul Pamnani Over a year ago

Not showing. console.log(data); this contains only name.

Najam Us Saqib Over a year ago

Can you make working example of this. like codepen or jsfiddle

|

Collectives™ on Stack Overflow

How to transfer parameter from one component to App component In Ionic App

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related