diff src/app/simple-form/simple-form.component.ts @ 1:44c99e3cb108

App skelton generated with angular-cli, as well as a few experiments (to be deleted).

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