Angular Typescript Share Properties Between Components

Question

I am looking to have some type of a config file that I can use to store properties that are needed in multiple components. Let me give you an example:

number-one-component.ts

export class NumberOneComponent {
    view: any[];
    xAxis: number;
    yAxis: number;
    label: string;
    labelPosition: string;

    chartSize: number;
}

number-two.component.ts

export class NumberTwoComponent {
    view: any[];
    xAxis: number;
    yAxis: number;
    label: string;
    labelPosition: string;

    chartSize: number;
}

I tried to create a file that I imported into one of the files and then do Object.assign(this, tokenName) in the constructor. Only problem was that TS complained about those properties not being part of the component.

I tried:

chart-config.ts

export const ChartConfig = {
    view: any[];
    xAxis: number;
    yAxis: number;
    label: string;
    labelPosition: string;

    chartSize: number;
}

That, did not work. In the constructor of either of the files, I did:

constructor() {
  Object.assign(this, ChartConfig);
}

With no luck.

I would appreciate insight as to how I can do this so that I can have a configuration file to share between components that need those properties.

x4rf41 · Accepted Answer · 2019-04-02 22:22:17Z

1

You can just do

export class NumberOneComponent {
    chartConfig = ChartConfig;
}

export class NumberTwoComponent {
    chartConfig = ChartConfig;
}

Then both components share the same config object.

in the template you would bind for example:

{{chartConfig.label}}

instead of

{{label}}

answered Apr 2, 2019 at 22:22

x4rf41

5,3672 gold badges24 silver badges36 bronze badges

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

1 Comment

pertrai1 Over a year ago

AHHH!!! I was not binding it right in my template. This is exactly what I needed. Thank you

Collectives™ on Stack Overflow

Angular Typescript Share Properties Between Components

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related