Angular 2 @Input() decorator: use from typescript

Question

I've got a menu built this way in an Ionic2/Angular2 project:

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

   public appRoot;
   public menuPages;

   constructor(
      public navCtrl: NavController,
      public modalCtrl: ModalController
   ){
      //Initialize root page
      this.appRoot = StreamPage;

      //Declare pages for menu items
      this.menuPages = [
         {
            page: StreamPage,
            name: "Home",
            icon: "home"
         },
         // more pages

   menuOpenPage(page){
       if(page === 0){
           this.chatsModal();
       }else{
            this.appRoot = page;
       }  
   }

The page is rendered in the following nav component, in the same menu.html file:

<ion-nav id="mainNav" #content [root]="appRoot"></ion-nav>

... So when I want to open a page, I call from the menu.html, the "menuOpenPage(page)" function, passing a page as an argument. It works perfectly, indeed, but now that I'm building a page for the profile, I also want to pass via the @Input() decorator, some data to determine which user's profile I'm going to see.

Ie: I want to open my profile when clicking the image in the top side of the sidemenu, so I call menuOpenPage(Profile), and somehow, I pass "currentUser" as parameter. Other example: I click on other guy's profile, so now I pass his objectId as parameter, to get his data and be able to see it.

Well, I just don't have any idea on how to do this. I know how to do it from the HTML, but... how do I use this decorator from the Typescript?

Answer 1

In a case such this I would consider to use Dependency Injection. Specifically I would define service class (ie a Class with @Injectable decoratori) to be used to store the data I want to share in different parts of the app and configure DI so that an instance of such class is actually shared between HomePage component and the components actually responsible for retrieving or building the Profile.

See https://angular.io/docs/ts/latest/cookbook/component-communication.html for further details.

I hope this helps