Angular 2 Component Interaction

So I’ve started working on a project without prior experience to using Angular 2 and Meteor. I’ve gone through the Socially tutorial.

I’m having trouble figuring out how components are supposed to interact. I see there’s a way to do it with Angular2 using @Input and @Output, but I’m not exactly sure how to get it to work, and I’m not sure if something needs to be imported.

I’m trying to create a page in which:

  • the user clicks a button to select the day of week ( Mon-Sun) (DayOfWeekComponent)
  • then the page populates with a list of activities that occur on that day (ActivitiesListComponent)

I want to be able to pass the day selected from DayOfWeekComponent into ActivitiesListComponent.

Basically you need a smart/parent component on top of DayOfWeekComponent and ActivitiesListComponent.

Check Desugar Meteor, Angular 2, and ngrx page 19 to 21 to understand the data flow and @Input, @Output.