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
– Ramesh Rajendran, Commented Feb 4, 2020 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
– Always_a_learner, Commented Feb 4, 2020 at 12:46

Alex Biro · Accepted Answer · 2020-02-04 19:44:02Z

1

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);
}

edited Feb 4, 2020 at 19:44

answered Feb 4, 2020 at 17:30

Alex Biro

1,2471 gold badge16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Always_a_learner Over a year ago

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?

Alex Biro Over a year ago

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

user12207064 Over a year ago

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

Collectives™ on Stack Overflow

How to use multiple inheritance with angular components

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related