angular 2 component inheritance

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

@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent { 
  messages: string[] = [];
  
  gatherCount(message) {
    this.messages.push(message);
  }
  
  gatherPage(pageNo) {
    this.messages.push(`I am at page ${pageNo} now.`);
  }
}


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { SimplePaginationComponent } from './simple-pagination.component';
import { MyPaginationComponent } from './my-pagination.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent,
    SimplePaginationComponent,
    MyPaginationComponent,
  ],
  providers: [
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/


<h1>Parent Component:</h1>
<hr>
<simple-pagination page="1" pageCount="5" 
  previousText="Front" nextText="Back"
  (pageChanged)="gatherPage($event)">
</simple-pagination>

<div style="height: 20px;"></div>

<h1>Child Component:</h1>
<hr>
<my-pagination page="1" pageCount="5"
  title="Random Title"
  (pageChanged)="gatherPage($event)">
</my-pagination>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

button {
  padding: 10px;
  margin: 10px;
}

p {
  margin: 10px;
}

a {
  padding 10px;
  margin: 10px;
}

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
  color: grey;
}

<!DOCTYPE html>
<html>
  <head>
    <title>User Input</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfills for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.7.2?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>

</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'simple-pagination',
  template: `
    <button (click)="previousPage()" [disabled]="!hasPrevious()">{{ previousText }}</button> 
    <button (click)="nextPage()" [disabled]="!hasNext()">{{ nextText }}</button>
    
    <p>page {{ page }} of {{ pageCount }}</p>
  `
})
export class SimplePaginationComponent {
  
  title: string;
  
  @Input()
  previousText = 'Previous';
  
  @Input()
  nextText = 'Next';
  
  @Input() 
  pageCount: number;
  
  @Input()
  page: number;
  
  @Output()
  pageChanged = new EventEmitter<number>();
  
  nextPage() {
    this.page ++;
    this.pageChanged.emit(this.page);
  }
  
  previousPage() {
    this.page --;
    this.pageChanged.emit(this.page);
  }
  
  hasPrevious(): boolean { return +this.page > 1; }

  hasNext(): boolean { return +this.page < +this.pageCount; }
  
}


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import { Component, Input } from '@angular/core';
import { SimplePaginationComponent } from './simple-pagination.component';

@Component({
  selector: 'my-pagination',
  template: `
    <h2>{{ title }}</h2>
    <a (click)="previousPage()" [class.disabled]="!hasPrevious()" 
      href="javascript:void(0)">
      {{ previousText }}
    </a> 
    <span>{{ page }} / {{ pageCount }}</span>
    <a (click)="nextPage()" [class.disabled]="!hasNext()"
      href="javascript:void(0)" >
      {{ nextText }}
    </a>
  `
})
export class MyPaginationComponent extends SimplePaginationComponent {
  @Input()
  title: string;
  
  @Input()
  previousText = '<<';
  
  @Input()
  nextText = '>>';
}

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/