What is the best way to determine in component.html whether the column type is equal to 1 to show the label text "Active,"

Having trouble checking the value of an object named ReportControl.

If the column type is 1, display the label "active"; otherwise, display the label "not active" on reportcomponent.html.

The data for the ReportControl object is as follows:

{"reportId":2028,"fieldName":"offilneURL","reportStatus":"HiddenColumn","columnType":1}

In reportcomponent.ts:

this._displayreport.GetReportControl(param2).subscribe((res: any) => {
        this.ReportControl = res;
        console.log("report control is" + JSON.stringify(this.ReportControl) );

      });

In service.ts:

  GetReportControl(id : string){
      return this.http.get<any[]>(this.url+ 'report/GetAllReportControl/id=' + id)
      .map(res=>res);

    }

reportcomponent.html:

Need to check if the column type equals 1 to display a label with the text "active", or display a label with the text "not active".

Expected result is to display the label with the text "active".

Answer №1

Here is a way to conditionally display text in HTML. Does this meet your expectations?

<label>{{ReportControl.columnType == 1 ? 'Active' : 'Inactive'}}</label>

You can also achieve this using *ngIf

<label *ngIf="ReportControl.columnType == 1">Active</label>
<label *ngIf="ReportControl.columnType == 0">Inactive</label>

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

Including material-ui/core/Table produces a data error before it has even been connected

My Initial Redux Saga Setup In my Redux Saga code, I have a generator function that fetches data from a mock API: function* fetchPickingScans({orderReference}){ try{ const response = yield call( scanningMockApi.getPickingScans, orderReference ...

Using Ajax to fetch project data from an API

Currently immersed in a personal coding project, I'm struggling to troubleshoot my code. Essentially, I need to retrieve data from an API and display it on my HTML page. The data type is "jsonp" due to CORS errors that required this workaround for de ...

Adjusting the display of HTML elements depending on geolocation authorization

I am currently facing an issue with my HTML code where I want to show an element only if the user declines to share their location with the browser. However, my code is not functioning as expected when the user rejects the location request. On the other ha ...

Topaz font does not properly display backslashes and certain characters when rendered on Canvas

Who would have thought I'd stumble upon a new challenge on Stack Overflow? But here we are. If there's already a solution out there, please guide me in the right direction. I'm currently developing an interactive desktop environment inspired ...

Utilizing various settings using `.env` files in NodeJs

As I work on building a backend in nodejs, one of the key considerations is how to incorporate an environment configuration into the project. I am envisioning a structure where there is a /config folder housing my envparser.ts (still brainstorming a catchi ...

Iterate using jQuery through all child div elements

<div id="SelectedSection" class="selected"> <div class="sec_ch" name="7"> <div class="sec_ch" name="8"> <div class="sec_ch" name="9"> <div class="sec_ch" name="11"> <div class="clear"> </div> </di ...

What steps are involved in creating a local unleash client for feature flagging?

Currently attempting to implement a feature flag for a Typescript project using code from the Unleash Client. Here is where I am creating and connecting to an instance of unleash with a local unleash setup as outlined in this documentation: Unleash GitHub ...

Undefined error when refreshing Angular page

One particular page on my forum-like website is causing issues with refreshing. In my project, users can log in, view their profiles as well as others'. However, when I refresh a profile page, no data loads from the server and an error appears in the ...

Troubleshooting Problem with CSS Background-Image in Safari

These questions have been popping up all over the web with little response. I've added some CSS in jQuery like this: $('#object').css('background-image', 'url(../../Content/Images/green-tick.png)'); This works in all b ...

How to automatically select the first item in a populated dropdown list using Vue JS

My HTML select element is populated with options from a server, but when using v-model, it initially selects an empty option instead of the first one. I came across a solution on a post which suggests selecting the first option manually, but since the dat ...

Transitioning from Webpack to Vite: Resolving Path Alias and Ensuring Proper Imports

Recently, I decided to transition my project from Webpack to Vite with "vite": "^4.3.9",. However, upon running npm start, I encountered the following error: Error: The dependencies imported could not be resolved: In my React Typesc ...

What issues are hindering the successful export of my Vue component packaged with npm?

I created a small local npm package called fomantic-ui-vue with the following main js file: import Vue from 'vue' // Import vue component import button from './elements/button/button.vue' import buttonGroup from './elements/butt ...

Tips on using the ref attribute in Vue.js to focus on an input element

In my Vue.js component for 2FA, I have implemented the following structure: <template> <div :class="onwhite ? 'on-white' : ''"> <input :id="`n1`" ref="n1" v-model=&quo ...

Having an issue with the pop state function not functioning correctly

I am facing an issue with my images where clicking on a specific image changes the URL to that ID. However, I can only go back once and then the same URL is repeated every time I press the back button. Additionally, the forward button does not work at all. ...

Are you ready to create a Modal Factory?

For a while now, I have been utilizing modals in various front-end frameworks to communicate with users in my applications. Typically, the process involves defining the modal's html and then rendering it through a click event. As my apps continue to ...

Guide to developing a versatile Icon Wrapper component for FontAwesome Icons in React that adapts to changing needs

I'm looking to develop a customized React Icon-Component where I can simply input the icon name as a string and have the icon display automatically. After following the guidelines provided here: https://fontawesome.com/docs/web/use-with/react/add-ico ...

HTML string decoded incorrectly in CodeIgniter due to encoding error

When I send data that includes an HTML string along with other information from JavaScript to the PHP (Codeigniter) server using AJAX and JSON, I notice that the style information within the HTML string is missing once it reaches the server. Everything els ...

Issue with SignalR client functionality following update to .NET Core 3.1版本

Upon updating our server-side code to asp.net core 3.1, we encountered an issue with the javascript client for signalr (@microsoft/signalr 3.1.0). The errors we are facing are: https://i.sstatic.net/ITZyK.png Here is the code snippet for the hub initial ...

Make sure to update the package.json file at multiple locations following the execution of the "npm i" command

My goal is to automatically detect any newly installed packages based on my package.json file. This way, whenever I run "npm i", the new package will be added not only to the usual "dependencies" section but also to a custom section called "extDependenci ...

Transforming HTML features into PHP scripts. (multiplying two selected values)

I am currently working on converting these JavaScript functions into PHP in order to display the correct results. I need guidance on how to use PHP to multiply the values of the NumA and NumB select options, and then show the discount in the discount input ...