Rome-H

@Component({
    selector: 'bot-detail-header',
    template: `
    <h2>{{bot?.description}}</h2>
    <h5>Total completed Rescues: {{completedRescues?.length}}</h5>
    <newsletter></newsletter>
`, 
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BotDetailHeaderComponent {

Rome-H

@Component({
    selector: 'bot-detail-header',
    template: `
    <h2>{{bot?.description}}</h2>
    <h5>Total completed Rescues: {{completedRescues?.length}}</h5>
    <newsletter [firstName]="firstName" (subscribe)="onSubscribe($event)"></newsletter>
`, 
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BotDetailHeaderComponent {

Rome-H

<div class="container">

    <bot-detail-header 
                        [bot]="bot$ | async" 
                        [completedRescues]="completedRescues$ | async"
                        [firstName]="(user$  | async).firstName" 
                        (subscribe)="onSubscribe($event)">
    </bot-detail-header>

    <table class="table rescues-list">

Rome-H

@Component({
    selector: 'newsletter',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `
      <fieldset class="newsletter">
          <legend>Bots Newsletter</legend>
          <h5>Hello {{firstName$ | async}}, if you like what you see - please enter your email below to subscribe:</h5>
          <form>
              <input #email type="email" name="email">
              <input  type="button" value="Subscribe"

Rome-H

@Component({
    selector: 'newsletter',
    template: `
      <fieldset class="newsletter">
          <legend>Bots Newsletter</legend>
          <h5>Hello {{firstName}}, if you like what you see - please enter your email below to subscribe:</h5>
          <form>
              <input #email type="email" name="email">
              <input  type="button" value="Subscribe"

Rome-H

<div class="container">

    <bot-detail-header 
                      [bot]="bot$ | async" 
                      [completedRescues]="completedRescues$ | async">
    </bot-detail-header>

    <table class="table rescues-list">
        <tbody>
        <tr *ngFor="let rescue of (completedRescues$ | async)">....</tr>

Rome-H

@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(

Rome-H

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

  constructor(
      private route: ActivatedRoute,