Angular 2 Component - Tuong-Nguyen/Angular-D3-Cometd GitHub Wiki

Binding

1-way binding: Display value in component in template:

{{event.name}}

Component decorator

selector: element name
templateUrl: html view
styles: css stylesheet applied to the component - It is applied to the component only. (note: /deep/ can be used for applying css to child components)

@Component({
  selector: "events-list",
  templateUrl: "app\events\events-list.component.html",
  styles:[`
    .block: {display:inline-block}
  `]
  
})

Communication between Components: Parent - Child

Pass data from Parent component to Child component

Input - @Input() decorator

Declare an input property in the component

export class EventThumbnail {
  @Input() public event: any;
}

Parent-component passes data to component

<event-thumbnail [event]="parent-field"></event-thumbnail>

Send data from Child Component to Parent Component

@Output() decorator

Declare an output property (EventEmitter) - send event to Parent component by calling emit method and passing data

  @Output() public eventClick = new EventEmitter();

  public handleClickMe() {
    this.eventClick.emit("data");
  }

Parent component: set function to event ($event: convention)

<event-thumbnail [event]="event" (eventClick)="handler($event)"></event-thumbnail>

Template variable

Child component is identified with a template variable. This variable can be used for accessing public properties and methods of child component but in template code only

<!-- Specified variable for event-thumbnail component: thumbnail -->
<event-thumbnail #thumbnail [event]="event" (eventClick)="hello($event)"></event-thumbnail>

<!-- Access component property -->
  <h3>{{thumbnail.property}}</h3> 

<!-- Call component method -->
<button class="btn btn-primary" (click)="thumbnail.methodFoo()">Log me some foo</button>