Set values to the inner property of the object

In my configuration file, I have set up nested properties as shown below

export class Config {
     public msalConfig: {
        auth: {
          authority: string;
          clientId: string;
          validateAuthority: boolean;
          redirectUri: string;
          postLogoutRedirectUri: string;
          navigateToLoginRequestUrl: boolean;
        },
        cache: {};
        scopes: {};
        system: {};
      };
}

When trying to assign values to the nested properties in the TypeScript file, an error is thrown

public Settings: Config = null;
this.Settings.msalConfig.auth.redirectUri = window.location.href;

Could someone please advise on how to correctly assign values to these nested properties?

typescriptangular8

Answer №1

If you are unable to access the inner property of the Settings variable because it is null, then the msalConfig does not exist within it yet. You must first initialize the Settings as an object before setting a value for msalConfig.

Initialize the Settings with a new instance of Config

private Settings: Config = new Config();

Next, set a value for msalConfig, such as in the constructor:

this.Settings.msalConfig = {
    auth: {
        authority: null,
        clientId: null,
        validateAuthority: false,
        redirectUri: null,
        postLogoutRedirectUri: null,
        navigateToLoginRequestUrl: false
      },
      cache: {},
      scopes: {},
      system: {}
    };

Now you can set a value for redirectUri as desired:

this.Settings.msalConfig.auth.redirectUri = window.location.href;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to create an interactive experience with MapLibre GL in Full Screen mode?

Hello, I am seeking a solution to create a map with the interactive option set to false, but once in full screen mode, I need this parameter to be true. Do you have any suggestions or ideas on how to achieve this? const _map = new MapGL({ contai ...

angulartypescriptdictionarymaplibre-gl

Is there a way for me to implement a "view more posts" button on

I need help figuring out how to hide the "Show More" button when there are no posts. I have created a showLoad function and an isLoad state variable, but I'm unsure of how to implement this. The button display logic is dependent on the isLoad state. ...

reactjstypescriptnext.js

No types are assigned to any props

I recently began working on a SvelteKit skeleton project for my personal website. However, I encountered an error when using Svelte with TypeScript - specifically, I kept getting the message Type '<some prop type>' is not assignable to type ...

typescriptsveltesveltekit

Challenges with formArrayName in Angular can be tricky to navigate

I am in the process of developing an Angular library with the main feature being the provision of a selector with two inputs: a reactive form containing the data an object literal specifying which properties of the data should have editable input fields ...

angulartypescriptangular-reactive-forms

angular2 and ionic2 encounter issues when handling requests with observable and promises

I am attempting to trigger an action once a promise request has been resolved, but I'm having trouble figuring out how to achieve this. After doing some research, I learned that Ionic2 storage.get() returns a promise, and I would like to make an HTTP ...

javascriptangulartypescript

Oops! Angular2 couldn't find a provider for HttpHandler

I have been working on implementing HttpCache through an interceptor. Below is the code snippet for caching-interceptor.service.ts: import { HttpRequest, HttpResponse, HttpInterceptor, HttpHandler, HttpEvent } from '@angular/common/http' import ...

angulartypescripthttpclient

How is it possible to access a variable in a function that hasn't been declared until later?

While working on a Dialog component, I had an unexpected realization. export const alert = (content: string) => { const buttons = [<button onClick={()=>closeModal()}>ok</button>] // seems alright // const buttons = [<button onCli ...

javascriptreactjstypescriptfunctionclosures

Utilizing Custom Validators in Angular to Enhance Accessibility

I'm struggling to access my service to perform validator checks, but all I'm getting is a console filled with errors. I believe it's just a syntax issue that's tripping me up. Validator: import { DataService } from './services/da ...

javascriptangulartypescriptvalidation

Angular 5 is unable to access the value of a form control when the name attribute is not specified

Snippet of HTML code: <li class="dropdownfilter" *ngIf="this.arr.inclues('Male')" (click)="getValueGender('Male',1,)" [(ngModel)]="M"><a>Male</a></li> I encountered the following error: ERROR Error: No value a ...

angulartypescriptangular-ngmodel

Building a typeguard in Typescript that handles errors

type VerifiedContext = Required<ApolloContext>; function authenticateUser(context: ApolloContext): context is VerifiedContext { if (!context.user) { throw new AuthenticationError("Login required for this operation"); } return true; } Here ...

typescripttypeguards

The Dilemma of using forRoot() in Angular 2/4+ Shared Modules

After uncovering the treasure that is forRoot() while delving deeper into Angular dependency injection (DI), I find myself pondering on the best practices for its usage. I came across this method when trying to enable a lazy loaded module to access a serv ...

angulartypescriptrxjsangular-servicesangular-module

Verify that each interface in an array includes all of its respective fields - Angular 8

I've recently created a collection of typed interfaces, each with optional fields. I'm wondering if there is an efficient method to verify that all interfaces in the array have their fields filled. Here's the interface I'm working wit ...

javascriptangulartypescriptangular8

Sorting by date and time in a data grid using MUI X is simple with these steps

In the MaterialUI X data grid, I am facing an issue with sorting a column of dates in the format of DD/MM/YYYY HH:mm:ss. Currently, the default sorting only considers the date and does not account for the time which is causing issues with the order. I was ...

reactjstypescriptmaterial-uimui-x-data-gridmui-x

The error message "Type 'null' cannot be assigned to type 'Element | DocumentFragment'" occurs when using Nextjs/React createPortal

I am completely new to typescript. Currently, I'm working on a project that has a lot of pre-configured react components in JavaScript files (.js). My task now is to convert everything to TypeScript (.tsx) without triggering any ESLint errors. Unfort ...

typescriptnext.jseslintportal

Accessing the OSRM API allows users to determine the distance to the closest emergency station

I am currently working on a typescript project where I need to calculate the distance to the nearest police station and fire station. My approach involves utilizing typescript for this task. Initially, I attempted to use the following URL that I discovere ...

pythontypescriptgoogle-maps-api-3openstreetmap

Advantages of creating model classes in Angular 2 and above

When developing a service for my domain, I discovered that I could easily implement the service using any type like this: list(): Observable<any> { const url = this.appUrlApi + this.serviceUrlApi; return this.http.get(url, { headers: this.he ...

angulartypescript

Exploring Local Gems with Google Places API in Ionic 2

I recently integrated the Google Maps API into my app and now I am looking to incorporate Google Places as well. I have managed to successfully implement Geolocation, but I am facing difficulties when trying to perform a nearby search for "supermarkets" in ...

angularjstypescriptionic-frameworkionic2google-places-api

What causes Node.js to crash with the Headers already sent Error while managing errors in Express?

My current project involves using Express to set up an API endpoint for user registration. However, I've encountered a problem where sending a request that triggers an error to this API endpoint causes my node.js server to crash. The specific message ...

node.jstypescriptexpressheader

Convert JSON data into an array of strings that are related to each other

I'm encountering an issue with converting JSON into a string array I must convert a JSON into a string array to dynamically INSERT it into our database, as I need this to work for any type of JSON without prior knowledge of its structure. Here is th ...

node.jsjsontypescript

The JSX element 'SubscribeCard' does not contain any construct or call signatures

I'm looking to implement the react-subscribe-card module for handling email subscriptions in my react.js project. Below is the code snippet from my popup.tsx file: import React from "react"; import SubscribeCard from "react-subscribe-c ...

reactjstypescript