dev@1: import {
dev@1:   Component, OnInit, Input, Output, EventEmitter,
dev@1:   ViewEncapsulation
dev@1: } from '@angular/core';
dev@1: 
dev@1: @Component({
dev@1:   encapsulation: ViewEncapsulation.Emulated,
dev@1:   selector: 'app-simple-form',
dev@1:   template: `
dev@1:     <input #myInput type="text" 
dev@1:       [(ngModel)]="message"
dev@1:       [ngClass]="{mousedown: isMousedown}"
dev@1:       (mousedown)="isMousedown = true"
dev@1:       (mouseup)="isMousedown = false"
dev@1:       (mouseleave)="isMousedown = false"
dev@1:     />
dev@1:     <button (click)="update.emit({text:message})">Click me!</button>
dev@1:   `,
dev@1:   styles: [`
dev@1: :host {
dev@1:   display: flex;
dev@1:   flex-direction: column;
dev@1: }
dev@1: 
dev@1: .mousedown {
dev@1:   border: 2px solid green;
dev@1: }
dev@1: 
dev@1: input:focus {
dev@1:   font-weight: bold;
dev@1:   outline: none;
dev@1: }
dev@1: 
dev@1: button {
dev@1:   border: none;
dev@1: }
dev@1: `]
dev@1: })
dev@1: export class SimpleFormComponent implements OnInit {
dev@1: 
dev@1:   isMousedown;
dev@1: 
dev@1:   @Input() message;
dev@1: 
dev@1:   @Output() update = new EventEmitter();
dev@1: 
dev@1:   constructor() {
dev@1:     // setInterval(() => this.message = Math.random().toString(), 1000);
dev@1:   }
dev@1: 
dev@1:   ngOnInit() {
dev@1:   }
dev@1: 
dev@1: }