Templates

update widgets.component.html

<div class="mdl-grid items">
  <div class="mdl-cell mdl-cell--6-col">
    <div class="item-card mdl-card mdl-shadow--2dp">
      <div>
        <div class="mdl-card__title">
          <h2 class="mdl-card__title-text">Name</h2>
        </div>
        <div class="mdl-card__supporting-text">
          Description
        </div>
      </div>
      <div class="mdl-card__menu">
        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
          <i class="material-icons">close</i>
        </button>
      </div>
    </div>
  </div>
  <div class="mdl-cell mdl-cell--6-col">
    <div class="item-card mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Select a Widget</h2>
      </div>
      <div class="mdl-card__supporting-text">
        Pending
      </div>
    </div>
  </div>
</div>

ngFor

<div class="mdl-cell mdl-cell--6-col">
  <div *ngFor="let widget of widgets"
    class="item-card mdl-card mdl-shadow--2dp">
    <div>
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">{{widget.name}}</h2>
      </div>
      <div class="mdl-card__supporting-text">
        {{widget.description}}
      </div>
    </div>
  </div>
</div>

Property Binding

TODO: Complete

Event Binding

export class WidgetsComponent implements OnInit {
  widgets: Array<Widget> = widgets;
  selectedWidget: Widget;

  constructor() {}

  ngOnInit() {}

  selectWidget(widget: Widget) {
    this.selectedWidget = widget;
  }
}

<div class="mdl-cell mdl-cell--6-col">
  <div class="item-card mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">Select a Widget</h2>
    </div>
    <div class="mdl-card__supporting-text">
      <pre>{{selectedWidget | json}}</pre>
    </div>
  </div>
</div>

export class WidgetsComponent implements OnInit {
  widgets: Array<Widget> = widgets;
  selectedWidget: Widget;

  constructor() {}

  ngOnInit() {}

  resetWidget() {
    let emptyWidget: Widget = {id: null, name: '', description: ''};
    this.selectedWidget = emptyWidget;
  }

  selectWidget(widget: Widget) {
    this.selectedWidget = widget;
  }

  deleteWidget(widget: Widget) {
    this.widgets.splice(this.widgets.indexOf(widget), 1);
    this.resetWidget();
  }
}

<button (click)="deleteWidget(widget); $event.stopPropagation();"
        class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
  <i class="material-icons">close</i>
</button>

Two-way Binding

TODO: Complete

ngIf

<div class="mdl-card__title">
  <h2 class="mdl-card__title-text" *ngIf="selectedWidget">{{selectedWidget.name}}</h2>
  <h2 class="mdl-card__title-text" *ngIf="!selectedWidget">Select a Widget</h2>
</div>

ngSwitch

TODO: Complete

Safe Navigation Operator

<div class="item-card mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text" *ngIf="selectedWidget">{{selectedWidget.name}}</h2>
    <h2 class="mdl-card__title-text" *ngIf="!selectedWidget">Select a Widget</h2>
  </div>
  <div class="mdl-card__supporting-text">
    <h6>{{selectedWidget.description}}</h6>
  </div>
</div>

<div class="item-card mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text" *ngIf="selectedWidget">{{selectedWidget.name}}</h2>
    <h2 class="mdl-card__title-text" *ngIf="!selectedWidget">Select a Widget</h2>
  </div>
  <div class="mdl-card__supporting-text">
    <h6>{{selectedWidget?.description}}</h6>
  </div>
</div>