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.

I.e.: 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?

Picci · Accepted Answer · 2016-12-20 01:40:56Z

1

In a case such this I would consider to use Dependency Injection. Specifically I would define service class (i.e. 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

answered Dec 20, 2016 at 1:40

Picci

17.8k16 gold badges80 silver badges125 bronze badges

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

2 Comments

Zerok Over a year ago

Thank you, I will give it a try now! Will accept if it works

Aluan Haddad Over a year ago

@Injectable is only required when the service itself has dependencies. It has a bad name.

Collectives™ on Stack Overflow

Angular 2 @Input() decorator: use from typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related