Angular13: Share functions between components

That's the purpose of a service.

Components should be "dumb" in the sense that they don't anything business-wise : they give responsibility to the services. That's what dependency injection is about.

So to share those methods, create a service that contains them, and let your components call those methods on your service.

You have a lot of way to share data betwen component.

1. Sharing Data via Input
2. Sharing Data via ViewChild
3. Sharing Data via Output() and EventEmitter
4. Sharing Data with a Service
5. Share same logic (method) betwen component

In your case the solution would be number 5. If you want to have sharable method (some logic and use it aproach the whole app)

Example of simple service:

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

@Injectable()
export class ExampleOfService{


  constructor() { }

  exampleOfFunction() {
   doSomething();
  }

}

And after that you can call your method in every component. You can add pameters etc...

  import { Component, OnInit  } from '@angular/core';
    
  @Component({
   selector: 'app-example-component',
   template:  ['./app-example-component.html'],
   styleUrls: ['./example.component.scss']
    })

export class ExampleComponent implements OnInit{
   constructor(private exampleOfService: ExampleOfService) { }

ngOnInit(){
     //you can subscribe or whatever you need.
     this.exampleOfService.exampleOfFucntion();
     }

  }

To manage a component in Angular that shares a few methods, you have 3 options:

Service: Create a shared service that contains the common methods and inject it into the components that need access to those methods. The shared service acts as a central place to hold the shared logic, and the components can use the service's methods as needed. This approach promotes code reuse and allows for easy maintenance and modification of the shared methods.

Inheritance: If you have multiple components that share common functionality, you can create a base component that includes the shared methods. Other components can then extend the base component to inherit the shared methods. This approach is useful when the components have similar behavior but require slight variations or additional functionality.

Abstract Class: Similar to inheritance, you can create an abstract class that includes the shared methods. Components can then extend the abstract class to inherit the methods. The abstract class serves as a blueprint for the components, providing a common set of methods that can be reused across multiple components.