11. Angular 이벤트

import { Component } from '@angular/core';
@Component({
  templateUrl: '<button ion-button (click)="onClick()>버튼</button>'
})
export class TabsPage {
  constructor() {
  }
  onClick() {
    alert('dd');
  }
}

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[highlight]'
})
export class HighlightDirective {
  private el: HTMLElement;
  constructor(el: ElementRef) {
    this.el = el.nativeElement;
    this.el.style.fontSize = "30px";
  }
  @HostListener('mousemove') onMouseMove() {
    this.el.style.backgroundColor = "blue";
    this.el.style.color ="white";
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.el.style.backgroundColor = null;
    this.el.style.color ="black";
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'member-list',
  template: ` 
  <div highlight (mouseover)="setLike('like this')">
    {{like}}  
  </div>`
})
export class MemberListComponent {
  like: string;

  setLike(likethis: string){
    this.like = likethis;
  }
}

@Component({
  selector: 'key-up4',
  template: `
    <input #box
      (keyup.enter)="update(box.value)"
      (blur)="update(box.value)">

    <p>{{value}}</p>
  `
})
export class KeyUpComponent_v4 {
  value = '';
  update(value: string) { this.value = value; }
}