comparison src/app/simple-form/simple-form.component.ts @ 3:b4a1e0a67389

Playing around with material2

 import {
   Component, OnInit, Input, Output, EventEmitter,
-  ViewEncapsulation
+  ViewEncapsulation, ViewChild, ElementRef
 } from '@angular/core';
 
 @Component({
   encapsulation: ViewEncapsulation.Emulated,
   selector: 'app-simple-form',

       [ngClass]="{mousedown: isMousedown}"
       (mousedown)="isMousedown = true"
       (mouseup)="isMousedown = false"
       (mouseleave)="isMousedown = false"
     />
+    <pre #testPre>Hi</pre>
+    <pre>{{testHi}}</pre>
     <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;
-}
-`]
+  
+`,
+  styleUrls: ['./simple-form.component.css']
 })
 export class SimpleFormComponent implements OnInit {
+
+  @ViewChild('testPre') testPre: ElementRef;
+  testHi = 'Hi';
 
   isMousedown;
 
   @Input() message;
 

   constructor() {
     // setInterval(() => this.message = Math.random().toString(), 1000);
   }
 
   ngOnInit() {
+    this.testPre.nativeElement.innerHTML = Math.random().toString();
   }
 
 }