Angular 5 shared function & variable among two components

Question

I need a global function for two separate components. I’m loading two angular components using selectors on a main HTML page. One has function buttons and its function has to affect content in the other component as well.

I realized this can’t be easily done… how do you guys set up shared function & variables between two angular components? I’m trying to create a single button which can load tab contents in two separate components. is using angular local storage a solution to store certain function and variables?

Thanks in advance,

If you're using Typescript, why not create a common base class, that the components can inherit from? — user184994
Why not just use a service that you inject into the components you want to use the shared function? — Pytth
Cool, I will try both methods. If there's any github example or plunkr example, I'd appreciate them. Thanks, — jamesharvey

Bogdan Bogdanov Bogdan Bogdanov · Accepted Answer · 2018-01-11T21:56:46

It is pretty simple with service.

export class ExampleService {

   public sharedVariable: any;

   public sharedFunction() {
       // your implementation
   }
}


export class Component1 {
    public constructor(private service: ExampleService) {
        this.service.sharedFunction();
        this.service.sharedVariable;
    }
}

export class Component2 {
    public constructor(private service: ExampleService) {
        this.service.sharedFunction();
        this.service.sharedVariable;
    }
}

In the case of using a common class, you will get two different references for the sharedVariable and if you change the variable value in the first component it won't affect the second one, but if you use service the service is singleton by default in angular so you will get the same value in both components but changing the value just ones from anywhere.

export abstract class BaseClass {

   public sharedVariable: any;

   public sharedFunction() {
       // your implementation
   }
}


export class Component1 extends BaseClass {
    public constructor() {
        super();
        this.sharedFunction();
        this.sharedVariable;
    }
}

export class Component2 extends BaseClass {
    public constructor() {
        super();
        this.sharedFunction();
        this.sharedVariable;
    }
}

Hope that helps.

Angular 5 shared function & variable among two components

1 Answers