angular.module('app', [ ])
.directive('hello', function () {
  return {
    restrict: 'E',
    template: '
Hello world
',
  };
});
        

@Component({
  selector: 'hello',
  template: `
Hello world
`
})
class App {}
        

Binding Syntax

1. data -> view (1-way)
   {{val}} OR [target] = "val"
   
   
2. view -> data (1-way)
   (target) = "val"
   
   
3. 2-way
   [(target)] = "val"
   
   

Binding Example

Decorators

function readonly(component) {
  component.writable = false;
  return component;
}

@readonly
class App { }

TalkCmp.ts

@Component({
  selector: 'talk-cmp',
  directives: [FormattedRating, WatchButton, RateButton],
  templateUrl: 'talk_cmp.html'
})
class TalkCmp {
  @Input() talk: Talk;
  @Output() rate: EventEmitter;
  //...
}

talk_cmp.html

{{talk.title}}
{{talk.speaker}}

Forms (ts)

@Component({
  selector: 'login-page',
  templateUrl: 'login-page.html'
})
export class LoginPage {
  constructor(fb: FormBuilder) {
    this.loginForm = fb.group({
      email: ["", Validators.required],
      password: ["", Validators.required]
    });
  }
  doLogin(event) {
    console.log(this.loginForm.value);
    event.preventDefault();
  }
}
          

Forms (html)

    
    
  Log in