Obtaining a value from another field within the same interface in Typescript can be achieved in Angular 2. It is important to note that string interpolation does not

I'm curious if it's possible to achieve the following:

export interface CommonInputProp{
   id:Number;
   value?:String;
   displayName?:String;
   order?:Number;
   viewVal:String=this.value|this.displayName; // This is not supported at the moment
}

Is there any alternative solution available? I'm not planning on implementing this interface, just using it for response mapping and reading values.

The reason behind this, Angular 2 String Interpolation does not offer support for the or and | operators, and the Plain Old JavaScript Objects (POJO) that I am working with are instances of Interfaces.

angulartypescriptangular2-template

Answer №1

Consider these two alternatives:

export class CommonInputProp {
   id:Number;
   value?:String;
   displayName?:String;
   order?:Number;
   get viewVal():String { return this.value || this.displayName; }
}

let commonInputProp = new CommonInputProp();
commonInputProp.value = 'test';
commonInputProp.viewVal === 'test' //You can access viewVal as a property

Alternatively, with your interface you have the option to do:

{{ commonInputProp.value || commonInputProp.displayName }}

Check out this live example on Plunker!

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

ERROR: Emulator engine program is required for 'x86' CPU but not found. [Issue with running Ionic Cordova on Android]

I've been utilizing Ionic Cordova for developing a mobile application. However, after getting a new laptop, I encountered an issue when trying to run 'ionic cordova run android --prod'. The error message reads: 'PANIC: Missing emulat ...

androidangularcordovaandroid-studioionic-framework

Error Encountered: Monorepo Shared Package Not Detected in Docker-Compose Execution

In my development setup, I have organized a monorepo using lerna and yarn workspaces. All code is written in typescript and then compiled into javascript. However, I encountered an issue with sharing packages when running the monorepo with docker-compose. ...

typescriptdockerdocker-composemonorepoyarn-workspaces

What are the steps for manually choosing an option in an Angular2 select dropdown?

As I take over a project from someone else, I find myself facing a seemingly easy task that I just can't seem to crack. The project already has large chunks finished, and one of the elements is a non-dynamic select list defined in the HTML. <form ...

angularselectdropdownreset

What are the steps for updating facade code within ngrx effects in an Angular application?

I am currently utilizing the facade pattern with ngrx in my project. However, I have come across some information stating that calling facade methods inside ngrx effects is not considered a good practice. I would appreciate any suggestions on how I can add ...

angularngrxfacade

Why does an error about an 'Invalid property descriptor' occur when utilizing a custom decorator on a get accessor?

Whenever I apply a decorator to a get accessor in my TypeScript code, everything compiles fine but at runtime I consistently encounter the error message: Uncaught TypeError: Invalid property descriptor. Cannot specify both accessors and a value or writabl ...

angulartypescriptgetter

When utilizing destructuring in React.js with TypeScript, incorrect prop values are not being alerted as expected

I recently started using TypeScript and I have been enjoying it so far. However, I came across an issue today that I couldn't solve. Imagine a scenario where a parent component A passes a function that expects a numeric value to the child component B ...

typescriptreact-typescript

Tips for optimizing compilation of TypeScript during the packaging process using Electron Forge

Upon opening the app, there is a momentary delay with a blank screen before it fully loads. I have utilized electron-forge's react-typescript template. While I am able to successfully create a dmg or deb file, I have observed that when running the p ...

reactjsperformancetypescriptelectronelectron-forge

Navigating to a precise element within a page in Angular with flawless redirection

I recently encountered an issue where I had to add a span element with a specific ID in my HTML code to ensure that clicking on the Reply button would navigate to it. However, this modification was only necessary for the last element on the page. While the ...

htmlangularurl-routing

Dynamic setting of application URL in Spring Social at runtime

Our Application Structure: We utilize APIs such as Spring Boot, Spring Security, and Spring Social. UI-1 is powered by Angular 5 and communicates with the APIs. UI-2 also runs on Angular 5 and interacts with the same APIs. Users are authenticated via Sp ...

angularspring-bootjhipsterspring-social

Tips on detecting an error in a Request, launching a modal, and attempting again once the modal is closed using RxJS

My goal is to implement a call to a server using Angular2's HTTP class that can handle authorization failures (401). The process should follow these steps: The user initiates a request to the server with myService.getSomething().subscribe() If the ...

javascripttypescriptangularrxjsrxjs5

How to assign ngModel to a nested component in Angular?

If I have a component called InputComponent, which implements the ControlValueAccessor interface. Now, another component named AnotherComponent uses the InputComponent like this: <my-input [(ngModel)]="text"></my-input> While testing AnotherC ...

angularunit-testing

Tips for obtaining the most recent HTML element in Angular

I was able to include HTML content in an Angular (7) UI using the DomSanitizer this.sanitizer.bypassSecurityTrustHtml("htmlstr") Once the content is sanitized and displayed in the HTML view, users have the ability to modify the values as desired ...

htmlangulartypescript

Retrieving JSON data with Typescript

https://i.sstatic.net/i5vFM.jpg I recently received some data from a request, expecting to return a JSON object that I can utilize in HTML. However, upon running console.log(this.data); I noticed that there are 20 elements in the articles array, but it ...

htmlcssjsonangulartypescript

Experiencing issues when running `ng serve` with a basic Angular CLI project created using

Just started using angular-cli and initiated an angular 2 project with the command ng new angular2. However, upon trying to run it using ng serve, I encounter crashes accompanied by errors. Error Log: ERROR in [default] C:\Users\user\deskt ...

angularwebpackjasmineangular-cli

Angular 8 - Unraveling the Mystery Behind its Initial Page Discovery

I am facing an issue with my Angular 8 application where the login page is being displayed at startup. I have checked the routing module but couldn't find anything that explicitly sets this page as the startup page. Any suggestions on what might be c ...

angular

What could be causing the reoccurrence of the error message "JSX is not defined no-undef"?

Encountering an issue while adding a carousel to my home page, I stumbled upon the following error: 'JSX' is not defined. Despite searching on Stack Overflow, GitHub, and Google, the answers provided are similar but I am still unsure of what m ...

javascriptreactjstypescripteslintjhipster

Navigating the Cursor in Angular 5: Techniques for Moving the Character Cursor with Keyboard Arrow Keys in Internet Explorer 11

Currently, I am working with Angular 5 and integrating it with Ag-Grid Enterprise Addition. The issue I'm facing is when using the IE11 browser, the cursor gets stuck and doesn't move to the next characters in the input box while using the keyboa ...

javascriptangularcursorinternet-explorer-11ag-grid

Angular 8 encountered an error in content_script.js at line 71. The error was classified as a LEVEL: ERROR within the MODULE:

I am currently working on an Angular 8 application with Dotnet Core, and I have encountered a strange error message in the developer's console recently: content_script.js:71 LEVEL: ERROR | MODULE: LEAKED_CREDENTIALS | SESSION: a1293cfe | MESSAGE: &qu ...

angularnpm

Updating the header content within a single component - Angular 2

Can someone guide me on how to dynamically change the header content from "Login" to "Logout" after a successful login using a token? My layout structure consists of a Main-Layout.component: <app-header></app-header> <div class="main-view"& ...

angular

Extracting deleted characters from input in Angular 2

Is there a way to detect a removed character from a text using ngModel in Angular 2? I am looking for something like: Original text: @Hello World ! Modified text: Hello World ! Console.log Removed character: '@' I came across an interesting ...

javascriptangulartypescript