@Component({
    selector: 'newsletter',
    template: `
<fieldset class="newsletter">
    <legend>Newsletter</legend>
    <h5>Hello {{firstName}}, enter your email below to subscribe:</h5>
    <form>
        <input #email type="email" name="email">
        <input  type="button" class="button button-primary" value="Subscribe"
               (click)="subscribeToNewsletter(email)">
    </form>
</fieldset>
`,
    styleUrls: ['./newsletter.component.css']
})
export class NewsletterComponent {

    @Input()
    firstName:string;

    @Output()
    subscribe = new EventEmitter();

    subscribeToNewsletter(emailField) {
        this.subscribe.emit(emailField.value);
        emailField.value = '';
    }
}