Angular 4 component extends / inheritance

I am trying to create an Angular 4 component that contains styling and markup for a generic box that can be extended with custom behavior / content.

So far, I have a base component that implements an interface like this:

export interface Box {
  heading: string;
  icon: string;
  myEventHandler();
}


@Component({
  selector: 'my-box',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.scss'],
})
export class BoxComponent implements Box {
  public heading: string;
  public icon: string;
  public myEventHandler(){};
}

// box.component.html
<div class="generic-box">
  <header>
    <i class="{{icon}}"></i>
    <h4>{{heading}}</h4>
    <a class="btn btn-primary" (click)="myEventHandler($ev)">
      Btn goes here
    </a>
  </header>

  <div class="box-content">
    <ng-content></ng-content>
  </div>

</div>

      

        
        
        
      

    

^ box.component.html

And a custom component that should be an implementation of this BoxComponent with some custom behavior / content:

<my-box>
  <p>Content</p>
</my-box>

      

        
        
        
      

    

^ order box.component.html

@Component({
  selector: 'custom-box',
  templateUrl: './custom-box.component.html',
  styleUrls: ['./custom-box.component.scss']
})
export class CustomBox extends BoxComponent {
  heading = 'Custom heading';
  icon = 'icon-name';
  myEventHandler() {
    console.log('bar');
  }
}

      

        
        
        
      

    

I also added a sketch to better understand what the Box Component template looks like.

What is the correct approach for extending BoxComponent? Is this the Angular way? If so, what am I missing because it doesn't work?