Creating a worldwide variable in Angular 6 using Typescript

Question

Creating a worldwide variable in Angular 6 using Typescript

Two files exist, one named 'Drawer.ts' and the other is the

'sidenav-open-close.component.ts'

component.

A variable needs to be shared between these two files. It should have the flexibility to be updated in 'Drawer.ts', with the

'sidenav-open-close.component.ts'

responding accordingly.

An attempted method was using the following link - What is the best way to declare a global variable in Angular 2 / Typescript and creating a file called globals.ts with this content:

'use strict';
export var diffMode : boolean = false;

This file was then imported into both files using

import * as myGlobals from './src/globals.ts';

The variable diffMode could be read successfully, but encountering an error when attempting to update it through 'Drawer.ts':

ERROR TypeError: Cannot set property diffMode of [object Object] which has 
only a getter

Your assistance would be greatly appreciated. Thank you.

javascript angular typescript

Answer 1

Answer №1

Utilizing JavaScript modules (known as "ESM" for ECMAScript Module), which TypeScript currently incorporates, allows imports to serve as a read-only perspective of the export. This is the reason why altering diffMode from an external module where it was originally defined is not possible.

In the event that there is a necessity to modify its value from another module, a function can be exposed for this purpose:


export var diffMode : boolean = false;
export function setDiffMode(flag: boolean) {
    diffMode = flag;
}

By invoking this function from the external module rather than directly editing it, changes to diffMode can be successfully implemented.

Interactive Example (JavaScript-based proof of concept) hosted on plunker (Please note that Stack Snippets do not support modules).

main.js:

const handle = setInterval(() => {
    const p = document.createElement("p");
    p.appendChild(
        document.createTextNode(`diffMode = ${diffMode}`)
    );
    document.body.appendChild(p);
}, 250);
setTimeout(() => {
    clearInterval(handle);
}, 1000);

export var diffMode = false;
export function setDiffMode(flag) {
    diffMode = flag;
}

othermod.js:

import {diffMode, setDiffMode} from "./main.js";

setTimeout(() => {
    setDiffMode(true);
}, 500);

The execution of the mentioned code illustrates the capacity of othermod.js to effectively modify diffMode, with these alterations being duly recognized by the functionality within main.js.

A side observation to make: Modules automatically operate in strict mode, rendering the inclusion of 'use strict'; at the beginning unnecessary.

Answer 2

Utilizing JavaScript modules (known as "ESM" for ECMAScript Module), which TypeScript currently incorporates, allows imports to serve as a read-only perspective of the export. This is the reason why altering diffMode from an external module where it was originally defined is not possible.

In the event that there is a necessity to modify its value from another module, a function can be exposed for this purpose:


export var diffMode : boolean = false;
export function setDiffMode(flag: boolean) {
    diffMode = flag;
}

By invoking this function from the external module rather than directly editing it, changes to diffMode can be successfully implemented.

Interactive Example (JavaScript-based proof of concept) hosted on plunker (Please note that Stack Snippets do not support modules).

main.js:

const handle = setInterval(() => {
    const p = document.createElement("p");
    p.appendChild(
        document.createTextNode(`diffMode = ${diffMode}`)
    );
    document.body.appendChild(p);
}, 250);
setTimeout(() => {
    clearInterval(handle);
}, 1000);

export var diffMode = false;
export function setDiffMode(flag) {
    diffMode = flag;
}

othermod.js:

import {diffMode, setDiffMode} from "./main.js";

setTimeout(() => {
    setDiffMode(true);
}, 500);

The execution of the mentioned code illustrates the capacity of othermod.js to effectively modify diffMode, with these alterations being duly recognized by the functionality within main.js.

A side observation to make: Modules automatically operate in strict mode, rendering the inclusion of 'use strict'; at the beginning unnecessary.

Creating a worldwide variable in Angular 6 using Typescript

Answer №1

Similar questions

Refine JSON arrays by applying combined nested array filters

Steps for changing an array of objects from a string into a regular array of objects

Is there a way for me to display both the right and wrong answers in real-time as users make their selections on my multiple-choice question website? Additionally, can I track the number

Revisiting Async Await: A guide to implementing callbacks

The AngularJS ngModelController is a powerful tool for managing

The uncomplicated node.js function is providing an unexpected result of undefined rather than an

Extract the array of numbers from the JSON file

Tips on implementing pdf-lib in Angular?

Update a single javascript variable on every rotation of the Bootstrap carousel

Something seems to be missing in Vue.js as it cannot compute the property 'length' of null

Transferring data in PDF format through email with the help of PHPMailer and html2pdf

404 error occurs when trying to access the email address parameter in Angular 2

After I click on an operator button, the display on my HTML calculator does not reset

Encountering problems with concatenating strings due to encoding difficulties

Customized Bootstrap Dropdown with the ability to add text dynamically

Having trouble loading background color or image in three.js

Is it appropriate to include JavaScript and CSS in views?

What possible reason is causing ag grid to overlook the defaultExcelExportParams option that was provided?

Having trouble with the Bootstrap 4 toggle functionality while converting a Bootstrap theme to an Angular 9 project?

Find what you're looking for by exploring the search results inside the text box marked