Is it possible to utilize a ternary operator or conditional statement within the body of a constructor in Typescript?

Currently in the process of enhancing the code of a webpage. Specifically, I want to provide users with different dropdown options once they are logged in. Using Angular, the corresponding component.ts file is structured as follows...

constructor () {
    this.name = this.login ? 'User' : 'Guest';
    ...
    this.list = [
        {display: this.name, value: 'name'},
        {display: this.address, value: 'address'},
        {display: this.company, value: 'company'}
    ];
}

In the provided code snippet, the variable login is defined outside of the constructor. The issue I am facing is with the display value of this.name. Can ternary operators be effectively used within Typescript constructors? If not, what would be the ideal approach to handle the condition for the display value to dynamically change? I attempted to declare the list outside of the constructor, but it resulted in display issues on the webpage.

typescriptconstructorconditional-statementsconditional-operator

Answer №1

The issue doesn't lie in the ability to utilize a ternary operator within a constructor. Rather, the problem stems from the fact that the variable this.login is fixed to a single state upon construction of the component. This means that if the component is initially displayed when the user is not logged in, it will remain so even after the user logs in, unless the component is reconstructed.

One potential solution is to implement a setter for the login property as shown below:

private _login = false;

get login(): boolean {
  return this._login;
}

set login(value: boolean) {
  this._login = value;
  this.name = value ? 'User' : 'Guest';
}

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

Jasmine's await function often leads to variables remaining undefined

When testing a function, I encountered an issue where a variable is created and assigned a value, but the payload constant always remains undefined. campaigns-card.component.ts async ngOnInit() { const { uid } = await this.auth.currentUser const { ...

angulartypescriptjasminekarma-jasmine

Set the default requests header in Ionic 3 using data stored in Ionic Storage

This particular issue is related to retrieving a value from local storage. I am trying to set the default header (Authorization token) for all requests, but I can't seem to find a solution that works efficiently. Most of the resources available only e ...

angulartypescriptionic-framework

Angularjs 2 Error: Unable to access the 'infos' property of an undefined object using the Http Client

I've been working on an AngularJS app for about a week now, developing a backoffice application for my service. My main challenge lies in using data retrieved from a remote server. I have 4 HTTP GET requests in my app - 2 of them fetching lists of us ...

javascriptangularjsjsonresttypescript

Dealing with various node types in a parse tree using TypeScript: Tips and Tricks

I am in the process of converting my lexer and parser to TypeScript. You can find the current JavaScript-only code here. To simplify, I have created an example pseudocode: type X = { type: string } type A = X & { list: Array<A | B | C> } ty ...

typescript

What is the best way to manage a promise in Jest?

I am encountering an issue at this particular section of my code. The error message reads: Received promise resolved instead of rejected. I'm uncertain about how to address this problem, could someone provide assistance? it("should not create a m ...

javascriptnode.jstypescriptpromisejestjs

Using Typescript: Utilizing only specific fields of an object while preserving the original object

I have a straightforward function that works with an array of objects. The function specifically targets the status field and disregards all other fields within the objects. export const filterActiveAccounts = ({ accounts, }: { accounts: Array<{ sta ...

typescript

What causes an ObjectUnsubscribedError to be triggered when removing and then re-adding a child component in Angular?

Within a parent component, there is a list: items: SomeType; The values of this list are obtained from a service: this.someService.items$.subscribe(items => { this.items = items; }); At some point, the list is updated with new criteria: this.some ...

angulartypescriptrxjsbehaviorsubjectangular8

Angular/Typescript code not functioning properly due to faulty expressions

What could be causing my {{ expression }} to malfunction? I have exhausted all options, yet the web browser fails to recognize this {{ expression }} or properly bind it using ng-bind. Instead, it either displays the {{ expression }} as is or not at all. C ...

angulartypescriptconstructorexpression

When it comes to rendering components in React using multiple ternary `if-else` statements, the question arises: How can I properly "end" or "close" the ternary statement?

I have developed a straightforward component that displays a colored tag on my HTML: import React, {Component} from 'react'; import "./styles.scss"; interface ColorTagProps { tagType?: string; tagText?: string; } /** * Rende ...

reactjstypescript

Implementing computed properties: A guide to incorporating type setting

I currently have two separate interfaces defined for Person and Dog. interface Person { name: string; weight: number; } interface Dog { name: string; mass: number } const specificAttribute = isDog ? 'mass' : 'weight'; ...

typescripttypescomputed-properties

Inter-component communication in Angular

I am working with two components: CategoryComponent and CategoryProductComponent, as well as a service called CartegoryService. The CategoryComponent displays a table of categories fetched from the CategoryService. Each row in the table has a button that r ...

angulartypescriptrxjs

Angular type error: Attempting to assign a value of type 'string' to a variable declared as type 'string[]' is not allowed

As a newcomer to Angular, I am currently working on building an electron app with Angular 6. My objective is: 1. Implementing SupportInformationClass with specific definitions 2. Initializing the component to populate the definitions from electron-settin ...

angulartypescriptelectronangular6

Is it necessary to include a package.json file in the /src directory when creating a package?

I am facing a situation where I have a package.json file in both the root directory and the /src folder within my projects. However, during the build process, the /src package.json is the one that gets copied to the /dist folder (and eventually published t ...

typescriptnpmpackage.json

typescript import module from tsd

Generated by swagger-codegen, the file index.ts contains: export * from './api/api'; export * from './model/models'; The file tsd.d.ts includes: ... /// <reference path="path/to/index.ts" /> TypeScript version 2.2.1. Why do I ...

typescripttsdswagger-codegen

Tips on utilizing a function that was generated within the constructor

I'm currently in the process of developing a function within the constructor, and it is essential that this function be placed inside the constructor. I am interested in implementing a button to trigger this function from an external source, but unfor ...

javascriptangulartypescriptfunctionionic-framework

Incorporating SVG graphics within a SharePoint web part

I am in the process of developing a webpart for SharePoint using the SharePoint Framework, TypeScript, and ReactJS. I have encountered an issue while trying to incorporate an svg image into my webpart code, resulting in build errors. Initially, I used the ...

reactjstypescriptsvgsharepointsharepoint-online

What is the best way to limit the type of the second argument based on the type of the

Within the tutorial Exploring How to Extract Parameter Types from String Literal Types Using TypeScript, a fascinating problem is presented without a solution. function calculate(operation, data) { if (operation === 'add') { return da ...

typescript

Using Lerna with Docker for Next.js and GraphQL applications

Currently, I am working with lerna and everything runs smoothly locally. However, when I attempt to build the image and operate it through Docker, it does not function as expected. FROM node:16-alpine3.11 ENV NODE_ENV=production COPY . /app WORKDIR /app R ...

node.jstypescriptdockernpmnext.js

Error encountered while installing Material UI in Next.js with TypeScript and pure JavaScript configurations

I'm brand new to React and Next.js, so please forgive me for asking what may seem like a silly question. I'm attempting to install Material UI in a fresh Next.js application that I created using "npx create-next-app@latest". I've been refere ...

javascripttypescriptmaterial-uinext.js

Update an API call to switch from promises to observables, implementing axios

Recently, I have been experimenting with using rxjs for API requests in a React application and this is the approach that I have come up with. What are your thoughts on this method? Are there any best practices that you would recommend following? If you ...

javascriptreactjstypescriptrxjsrxjs6