refactored-newsletter.ts

@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"
                     (click)="subscribeToNewsletter(email)">
          </form>
      </fieldset>
    `
})
export class NewsletterComponent implements OnInit {

    firstName$: Observable<string>;

    constructor( 
        private userService: UserService,
        private newsletterService: NewsletterService
    ) {}

    ngOnInit() {
        this.firstName$ = this.userService.user$.map(user =>  user.firstName );
    }

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