title: Angular component Inheritance and inheriting subscriptions
body: <p>Let below is a component which I will be extending in various other components ti reuse some code..</p>
  <pre><code>import { Component } from '@angular/core';
  
  @Component ({
     selector: 'my-app',
     template: ` &lt;div&gt;
        &lt;h1&gt;{{appTitle}}&lt;/h1&gt;
        &lt;div&gt;To Tutorials Point&lt;/div&gt;
     &lt;/div&gt; `,
  })
  
  export class AppComponent {
     appTitle: string = 'Welcome';
     ngOnInit(){
        this.registerSomeSubscriptions();
     }
     registerSomeSubscriptions(){
        this.subscribeSomething.subscribe((data)=&gt;{
           performSomeAction();
        })
     }
  
  
  }
  </code></pre>
  <p>I can extend it like below</p>
  <pre><code> import { Component } from '@angular/core';
  
  @Component ({
     selector: 'my-app',
     template: ` &lt;div&gt;
        &lt;h1&gt;{{appTitle}}&lt;/h1&gt;
        &lt;div&gt;To Tutorials Point&lt;/div&gt;
     &lt;/div&gt; `,
  })
  
  export class ChildComponent extends AppComponent {
     
  }
  </code></pre>
  <p>While I know that public members of the component will be available in the child component.</p>
  <p>My Question</p>
  <ol>
  <li>Do I still have to use separate html files for both the components or is thier some of code style or problem solving technique to reuse the same html template along with some child specific implementation by some technique I am not aware of.</li>
  </ol>