Angular 1 vs Angular 2 Built-in Directives

angular1-filters-v-angular2-built-in-directives.js

// Angular 1
const module = angular.module('myModule', []);
module.component('myComponent', {
  template: `
    <div 
      ng-if="$ctrl.isShown" 
      ng-click="$ctrl.onClick($event)" 
      ng-class="{blue: $ctrl.isBlue}">

        Hello World!

    </div>
    <ul>
      <li ng-repeat="name in $ctrl.names">{{name}}</li>
    </ul>
  `
});

/***************************************************************/

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

@Component({
  selector: 'my-component',
  template: `
    <div 
      *ngIf="isShown" 
      (click)="onClick($event)" 
      [ngClass]="{blue: isBlue}">

        Hello World!

    </div>
    <ul>
      <li *ngFor="let name of names">{{name}}</li>
    </ul>
  `
})
class MyComponent {}