Angular component Inheritance and inheriting subscriptions

Question

Let below is a component which I will be extending in various other components ti reuse some code..

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

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

export class AppComponent {
   appTitle: string = 'Welcome';
   ngOnInit(){
      this.registerSomeSubscriptions();
   }
   registerSomeSubscriptions(){
      this.subscribeSomething.subscribe((data)=>{
         performSomeAction();
      })
   }


}

I can extend it like below

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

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

export class ChildComponent extends AppComponent {
   
}

While I know that public members of the component will be available in the child component.

My Question

1. 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.

Answer 1

The Child components can either use the same html template as the parent Component or they can have their own html files, in which case the html of the parent component will not be used.

If you want to use the parent component's html with some modification in the Child components you can reuse the parent component instead of inheriting it.

• make your parent component as a reusable component
• in the child/feature component's template, add the parent component using its selector

    // add something specific to child/feature component here
    <app-reusable-component></app-reusable-component>
    // add something specific to child/feature component here

The reusable component's html will be available along with the additional html that you add in the feature component's html.

• to pass the data between the reusable component and the feature component use component interaction - Input and Output.

• Input - Pass data from feature component to reusable component with input binding

reusable-component.ts:
export class ReusableComponent implements OnInit {
   @Input() dataIn: Observable<object>;
   ngOnInit() {
     dataIn.subscribe(data => {
       // display data
     });
   }
}

feature-component.html:
...
<app-reusable-component [dataIn]="dataToDisplay$"></app-reusable-component>
...

feature-component.ts:
export class FeatureComponent implements OnInit {
  public dataToDisplay$: Observable<object>;
  ngOnInit() {
    this.dataToDisplay$ = this.http.get(url);
  }
}

• Output - Send data/events from reusable component to feature component

reusable-component.ts:
export class ReusableComponent implements OnInit {
   @Input() dataIn: Observable<object>;
   @Output() eventOut: EventEmitter<object> = new EventEmitter<object>();
   ngOnInit() {
     dataIn.subscribe(data => {
       // display data
     });
   }
   userInput(value) {
      this.eventOut.emit(value);
   }
}

feature-component.html:
...
<app-reusable-component [dataIn]="dataToDisplay$" (eventOut) ="handleUserData($event)"></app-reusable-component>
...

feature-component.ts:
export class FeatureComponent implements OnInit {
  public dataToDisplay$: Observable<object>;
  ngOnInit() {
    this.dataToDisplay$ = this.http.get(url);
  }
  handleUserData(value) {
    this.http.post(url, value);
  }
}

In this approach you can reuse the template of the parent component in all your child/feature components, and you will be able add additional html content in your child/feature components and pass data between them.