7. Bindings

Explore different kinds of bindings

<h1>
  {{title}}
</h1>
<img src="{{imageUrl}}" /> <!-- interpolation. cleaner, ess noisy. Use this to render elements -->
<img [src]="imageUrl" /> <!-- property binding -->
<img bind-src="imageUrl" /> <!-- all three the same.  -->
<button class="btn btn-primary" 
[class.active]="isActive" 
[style.backgroundColor]="isActive ? 'blue' : 'gray'">Submit</button> <!-- class binding, style binding, bootstrap classes to make UI pretty -->
<div (click)="onDivClick()"> 
  <button (click)="onClick($event)">Exit</button> <!-- show bubbling up of events event binding like keystroke, mousemoments,-->
</div>
<courses>
</courses>
<authors>
</authors>

app.component.ts

import { Component } from '@angular/core';
import {CoursesComponent} from './courses.component'
import {AuthorsComponent} from './authors.component'

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  directives: [CoursesComponent,AuthorsComponent],
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'Hello World!';
  imageUrl  = 'https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png';
  isActive = true;

  onClick($event){
    $event.stopPropagation(); // to stop propagation of events bubbling up
    console.log("Clicked",$event);
  }

  onDivClick(){
    console.log("Handled by Div");
  }
}