How to use composition instead of inheritance when sharing logic between components in Angular 6?

Question

I have a module in Angular that is structured likes this:

moduleName
    componentA
    componentB

Now componentA and componentB are very similar, as they share some attributes and methods, e.g.:

protected available: boolean = true;

As I don't want to repeat myself, I've created a base class, that stores all this:

export abstract class BaseComponent {
    protected available: boolean = true;
}

And both controllers inherit from that class:

import { BaseComponent } from '../base.component';

export class ComponentA extends BaseComponent implements OnInit {
    constructor() {
        super();
    }

    ngOnInit() {
        console.log(this.available);
    }
}

---

This works just fine. However, when I research this soultion a lot of people are saying:

Don't use inheritance, use composition in this case.

Alright, but how can I use composition instead? And is the gain really that big over the current solution?

Thanks a lot for your time.

Laud

i don't know what composition is, but when there is a lot of repeated code in 2 components i would use a service instead – Lip

@Lip Composition is defined as containing instances of other classes that implement the desired functionality. Your suggestion to use a service is perfect for this. – Perfectionism

@Lip primer on composition - say you have some validation logic. You separate it in a new class called Validator. Now you can just add validator = new Validator() and later do validator.check(input) in many classes. As opposed to each class extending Validator and inheriting the check() functionality. – Inotropic

Ah I see. So, if I create a service and inject it into my component, I have to use serviceName.available to access a property. But the advantage is, that the service is coupled more loosely, right? And a service is not necessarily global in Angular - I mean: the injected services are all individual instances for their component, correct? @KirkLarkin – Laud

In Angular, it depends on how you register the service. It can be registered with the root and therefore be a singleton; otherwise it can be registered with a component and be unique per component instance (docs). – Perfectionism

Thanks @vlaz I was going to add something similar as an explanation. – Laud

@KirkLarkin Ah I see, thank you. – Laud

@vlaz thanks for the explanation,i will have to dig more sometime – Lip

Answer 1

For composing objects in angular you need to have a reference to that object inside of your class, which shares data and functionality. To do that you need to use Angular services, and inject them to your class, and there should be 1 instance of service per component.

1. Create a new service by running ng g s my-service, remove providedIn: 'root' from your service annotation (We want to provide instance per component)
2. Add public available: boolean = true; to the service
3. provide the service through the components, in @Component configs on your components
4. inject the service in your both component constructors, constructor(private myService:MyService)

Now you have a composition that keeps data and functionality

@Component({
  selector: 'app',
  templateUrl: './app.my-component.html',
  styleUrls: ['./app.my-component.css'],
  providers: [MyService]
})
export class MyComponent {
  constructor(private myService: MyService) {
  }
}

Statolith

I think I like this approach better than inheritance in this case. Thanks. It seems that I can't upvote your answer though. – Laud

@Laud no worries, glad it helped – Statolith

@Laud Just pay attention to step 3, you need to provide service to component level, so that you will get a new instance of service for each instance of component – Statolith

I would personally suggest using an interface that abstracts the logic of each component. If the parameters and return type are added to the interface method, then this abstracts the logic away and avoids using inheritance. – Garnish

Answer 2

If you create same components with big part same logic. you can use inheritance for example controlSelectComponent and controlInputComponent stackblitz example

For composition you need to create service and provide it to both components. But you dont keep component state in service becose all service are singletone. And when one component change state another component crash.

You also can provide service to each component in providers section

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [MyService]
})
export class AppComponent {
  constructor(private myService: MyService) {
  }
}

But in case with saving state in service is not the best solution

Conclusion

Use services and composition for share helper methods between components.

Use abstract class and inheritance for components with same logic and state changes.

Murphey

Are you sure that this service will be singleton? This is from the manual: "When you register a provider at the component level, you get a new instance of the service with each new instance of that component.". I understand that the scope of the service depends where you declare it (root singleton throughout the app, module one instance for all components, component like quoted), right? – Laud

I meant this. By default you provide service in module and service generate one instance for module. When you provide it to component you have service instance for each component. Look at my example providers: [MyService] – Murphey

Answer 3

I would also recommend to read about Composition over Inheritance. The syntax(InversifyJs) is very similar that Angular uses. Please see this blog

Synergist

Kindly add context to any links so your Answer is self contained, meaning the answer needs to be here in the Answer itself. See "Provide context for links". It would be preferable if you could answer the Question in your own words here and link only as a reference. – Ledezma