components design: rescue-bot-example

bot-detail.ts

@Component({
  selector: 'rescue-bot-detail',
  templateUrl: './rescue-bot-detail.component.html'
})
export class RescueBotDetailComponent implements OnInit {
  user$: Observable<User>;
  bot$: Observable<Bot>;
  completedRescues$: Observable<completedRescue[]>;

  constructor(
      private route: ActivatedRoute,
      private botsService: BotsService,
      private newsletterService: NewsletterService,
      private userService:UserService
    ) {}

  ngOnInit() {
      this.user$ = this.userService.user$;

      this.bot$ = this.route.paramMap
          .map(params => params.get('id'))
          .switchMap(botId => this.botsService.findBotById(botId));

      this.completedRescues$ = this.bot$
         .switchMap(bot => this.botsService.findRescuesForBot(bot.id));
  }

    onSubscribe(email:string) {
        this.newsletterService.subscribeToNewsletter(email)
            .subscribe(
                () => alert('Subscription successful ...'),
                console.error);
    }
}