title: What's the difference between inheriting an angular component from an Abstract Class versus an Abstract Component?
body: <p>I'm trying to re-use certain business logic and properties that are used across various view components. I created an abstract class with the required properties and functions and inherited this in my component. It worked great. I also created an abstract component with an empty template and then moved my business logic here. Inheriting this abstract component too works without any issues? Which approach is right?</p>
  
  <p>Approach 1:</p>
  
  <pre><code>export abstract class GridViewBase implements IFilterView {
  // Bla bla
  }
  </code></pre>
  
  <p>Then in my component:    </p>
  
  <pre><code>@Component({
    selector: 'order-view',
    templateUrl: './order-view.component.html',
    styleUrls: ['./order-view.component.css']
  })
  export class OrderViewComponent extends GridViewBase implements AfterContentChecked, OnInit {
   }
  </code></pre>
  
  <hr>
  
  <p>Approach 2:</p>
  
  <p>Abstract Component:</p>
  
  <pre><code>@Component({
      template: ''
  })
  export abstract class BaseComponent {
  </code></pre>
  
  <p>View Component:</p>
  
  <pre><code>    @Component({
        selector: 'order-view',
        templateUrl: './order-view.component.html',
        styleUrls: ['./order-view.component.css']
      })
      export class OrderViewComponent extends BaseComponent implements AfterContentChecked, OnInit {
  }
  </code></pre>
  
  <p>Both works! Which is right?</p>