Passing value to app.component.ts

How to passing parameter to app.component.ts?

Can you be more detailed? what component?

pass value from page.ts to app.component.ts.

hi @ekjs

Could you try for passing the value using navCtrl

import { NavController } from 'ionic-angular';

constructor(public navCtrl: NavController) {}
         page:'your value'


Why do you want to do this?

I need those values to edit the pages that show in the side menu.

There’s a saying that virtually any problem can be solved by adding another layer of indirection, and I think this is one of them. Instead of storing your menu items in the app component, store them in a service, inject that service in the app component, and populate the menu using it. Then, any other page can inject the same menu items service, and modify its contents as appropriate. I use this technique for conditionally enabling admin-only or registered-user-only menu items.


You can use provider. I am also doing the same using provider.

hi, did you solve this prob

it is better, if you describe your problem.
Otherwise use for commuication between pages navparams or if you need something anywhere, then use a shared provider (aka service).

Best regards, anna-liebt

i have two role in login and i want to display different menu options for each so i need to pass data from login page to app.component then use it to display menu options,
i’m trying now to use provider i can get data from provider in app.component but i dont know how can i send data to provider thank you


I am not sure about what the problem is to write to your provider. You can access a shared provider from any page in your app by inceting it into the constructor.

Code your provider.
import it in app.module.ts
Add it to provider section in app.module.ts
Inject it anywhere you need it.

Then you can use any public whatever from them.

for example: You have in your provider, maybe called RoleProvider.
isadmin: boolean = false;

And in your whatever.ts you have it imported und injeteced in construtor for example.

constructor(public myrole: RoleProvider) {

and access it like

let logedasadmin:boolean = this.myrole.isadmin;//read
this.myrole.isadmin = false;//write

But I guess I have you understood wrong, so post code and what you wanna do more specific.

Best regards, anna-liebt

hi ,“POST”, ‘core/’ + ‘login/’ + ‘backoffice’, this.dataPayload).then(
res => {
console.log(“here is role”,res.role);

        console.log("here is userRole",this.userRole);
      res => {
      if (this.userRole == 'ADMIN')
          return this.navCtrl.push(StorelistPage);
          if(this.userRole == 'BACKOFFICE_USER')
          return this.navCtrl.push(HomePage); 
  }, err => {

this is my login.ts

this userRole i need to use it also in app.component to display different options in menu depend on the role,
so i need to pass this user role to app.component

Could you explain with a sample example please… it Would help me alot… THanks in ADV.

1 Like

Please look at the ionic conference starter app

It has all the goodies u r looking for

1 Like

i have in my app two login roles and every one have different pages and menu so i stored the role in a var then i used it before pushing home page also i sent it via events to app.component because i created the menu there this is how i resolved it urw :slight_smile:

thank you so much for your reply i resolved it :grinning:

can we send json data from api to app.component.ts using event ?

Hi all, i am also facing the same problem but solved using events.

import { Events } from 'ionic-angular';

// login.ts page (publish an event when a user is created)
constructor(public events: Events) {}
createUser(user) {
  console.log('User created!')'user:created', user,;

// app.component.ts page (listen for the user created event after function is called)
constructor(public events: Events) {
  events.subscribe('user:created', (user, time) => {
    // user and time are the same arguments passed in `events.publish(user, time)`
    console.log('Welcome', user, 'at', time);