How to use multiple inheritance with angular components

Question

I have two base classes which have structure some what as below shown examples:

 export class EmployeeSearch(){

    constructor(
        public employeeService: EmployeeService,
        public mobileFormatPipe: MobileFormatPipe
    )

    searchEmployeeById();

    searchEmployeeByName();
}

export class EmployerSearch(){

    constructor(
        public employerService: EmployerService,
        public mobileFormatPipe: MobileFormatPipe,
        public employerNamePipe: EmployerNamePipe
    )

    getAllEmployers(){

    }

    getLocalEmployers(){

    }
}

I have a component class where I want to use above two classes.

export class addNewEmployeeComponent(){

    constructor(){

    }
}

I tried using applyMixins solution to use interface to extend multiple classes. but I don't know how to define super() for base class while extending two classes and encountered error when I tried using AddNewEmployee mixin class in component.

import { EmployeeSearch } from './employee-search';
import { EmployerSearch } from './employer-search';

export class  AddNewEmployee{

}
export interface AddNewEmployee extends EmployeeSearch, EmployerSearch{

}

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
      Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
        Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
      });
    });
  }

applyMixins(SearchPatient, [PatientSearch, DepartmentDoctorSelect]);

I have created a mixin using above code but don't know how I can use class AddNewEmployee in AddNewEmployeeComponent.

My use case is that I have two classes which I need to use in my component, but multiple inheritence is not possible. Please suggest some other solution for my use case if any.

I referred this question but couldn't understand the accepted answer.

Thanks!

Angular doesn't allow Multiple Inheritance . You can extend only one class in angular, although you can implement multiple interfaces . But there is a way you can do multiple inheritance (only in say) using ***TypeScript Mixins .*** — Ramesh Rajendran, Feb 04 '20 at 12:41
@RameshRajendran Thanks for your response. I am not able to figure out that how I can use AddNewEmployee in my component class. should I extend it? — Always_a_learner, Feb 04 '20 at 12:46

Alex Biro · Answer 1 · 2020-02-04T19:44:02.473

You don't need to inherit from those classes to consume them, you can just declare EmployeeSearch and EmployerSearch as services, eg.:

@Injectable({
  providedIn: 'root',
})
// note that you don't need `()` in this line
export class EmployeeSearch {

    constructor(
        public employeeService: EmployeeService,
        public mobileFormatPipe: MobileFormatPipe
    )

    searchEmployeeById();

    searchEmployeeByName();
}

And then just insert them into your service or component and use them.

import { EmployeeSearch } from './employee-search';
import { EmployerSearch } from './employer-search';

// if you need them in another service
@Injectable({
  providedIn: 'root',
})
export class EmployeeService {

  constructor(
      private employeeSearch: EmployeeSearch,
      private employerSearch: EmployerSearch
  ) { }

  fancyBusinessMethod(employeeID: number) {
      const employee = this.employeeSearch.searchEmployeeById(employeeID);
      // ...
  }
}

// if you need them in a component
@Component({
  selector: 'app-emp',
  templateUrl: `
<div>
  <p *ngFor="let emp of employees">{{ emp.name }}</p>
</div>
`,
  styleUrls: []
})
export class EmployeeComponent {

  public employees: Employee[] = [];

  constructor(
      private employeeSearch: EmployeeSearch,
      private employerSearch: EmployerSearch
  ) { }

  onEmpSearch(id: number) {
    this.employees = this.employeeSearch.searchEmployeeById(employeeID);
}

Alex Biro, Thanks for the answer. I wanted to extend a class so that I can use properties (variables) of the base class in my derived class. Let's say in employeeSearch I have property name searchedEmpList, and I have updated it using some method, now I can use this property directly in HTML template file of all derived classes(components). In case I use a service class that is not possible. Can u suggest something on this? — Always_a_learner, Feb 04 '20 at 19:01
@Harsimer Well, in that case you just store those values (returned by the services) in a field on your component. Expanded my original answer. This is a usual pattern in angular: the services do data fetching from the backend, and you store the results in your component. — Alex Biro, Feb 04 '20 at 19:44
You can also have a separate data store (= service). services are singletons that are always in memory once constructed, where components are instantiated. So you can for instance define your backend access methods in one service and store that data in another service. Data stored in that service can be used by all components that import this data storage service. So EmployerComponent and EmployeeComponent both can request new data from BackendService. BackendService then stores data in DataStorageService and both EmployerComponent and EmployeeComponent access DataStorageService — , Feb 04 '20 at 20:24

How to use multiple inheritance with angular components

1 Answers1