Sharing Properties Across Angular Components using TypeScript

Question

Sharing Properties Across Angular Components using TypeScript

Seeking a solution for storing properties needed in multiple components using a config file. For 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;
}

Attempted to create a file imported into one component and used Object.assign(this, tokenName) in the constructor. However, TypeScript raised errors about the properties not belonging to the component.

Initial approach:

chart-config.ts

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

    chartSize: number;
}

Unfortunately, this method failed. In the constructor of either component, tried:

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

Any advice on efficiently achieving a shared configuration file for components requiring specific properties would be greatly appreciated.

angular typescript

Answer 1

Answer №1

To simplify, you can use the following code snippets:

export class FirstComponent {
    configuration = ChartConfig;
}

export class SecondComponent {
    configuration = ChartConfig;
}

This way, both components will have access to the same configuration object.

In the template, you can bind like this, for example:

{{configuration.label}}

Instead of

{{label}}

Answer 2

To simplify, you can use the following code snippets:

export class FirstComponent {
    configuration = ChartConfig;
}

export class SecondComponent {
    configuration = ChartConfig;
}

This way, both components will have access to the same configuration object.

In the template, you can bind like this, for example:

{{configuration.label}}

Instead of

{{label}}

Sharing Properties Across Angular Components using TypeScript

Answer №1

Similar questions

Dismiss the necessity of imports in Angular

Despite being logged, the current value of firebase.auth().currentUser in Firebase is null

Why is it that I am limited to running globally installed packages only?

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

When setting up Webpack with TypeScript, an error is encountered related to imports

Creating a function that operates according to the input parameter

Issue with retrieving JSON objects in Next.js

Unable to use console log in shorthand arrow function while working with Typescript

Deploying with Angular

Trigger a PrimeNG p-datatable event when a new row is inserted

Dynamic Angular component loading with lazy loading

Tips for dynamically implementing a pipe in Angular 5

Steps for displaying detailed information about a single product on an Ecommerce page

Angular 15 is unfortunately not compatible with my current data consumption capabilities

NGRX Store: Unable to modify the immutable property '18' of the object '[object Array]'

The classification of rejected promises in Typescript

The standard build.gradle settings for Ionic projects on Android

Error: Unable to locate metadata for the entity "BusinessApplication"

Transform Angular 4 by enforcing fatal errors on ng lint

Angular: navigate to a different page dynamically without triggering a refresh of the current page