How to retrieve a Typescript variable within an ngIf conditional statement in Angular

Question

How to retrieve a Typescript variable within an ngIf conditional statement in Angular

How can I access a TypeScript variable inside an ngIf statement?

TS:

  public data: string;

HTML:

<td> 
      <div *ngIf="data === 'BALL' ; else noplay" >{{ play }}</div>
      <ng-template #noplay> {{ gotohome }}
     </ng-template>
  </td>

I am attempting to use conditional logic in Angular to display different values in a table based on the value of the "data" variable. However, I am struggling to access the "data" variable from TypeScript.

Here is a sample StackBlitz link for reference:

https://stackblitz.com/edit/angular-ivy-c6zyqg?file=src%2Fapp%2Fapp.component.html

javascript angular typescript angular-material angular6

Answer 1

Answer №1

An error in the getter definition has been identified and should be corrected using the syntax provided below:

  _information;

  get information() {
    return this._information = "SOCCER";
  }

Answer 2

An error in the getter definition has been identified and should be corrected using the syntax provided below:

  _information;

  get information() {
    return this._information = "SOCCER";
  }

Answer 3

Answer №2

The issue arises from using the method get() to assign a value to the variable data, which is not being invoked anywhere in the code.

I have resolved the problem by initializing the value with declaration and it now works properly. You can see the updated code on stackblitz.

Updated StackBlitz link

If you prefer to use a getter instead, you can refer to the following stackblitz example.

StackBlitz example with getter

Answer 4

The issue arises from using the method get() to assign a value to the variable data, which is not being invoked anywhere in the code.

I have resolved the problem by initializing the value with declaration and it now works properly. You can see the updated code on stackblitz.

Updated StackBlitz link

If you prefer to use a getter instead, you can refer to the following stackblitz example.

StackBlitz example with getter

How to retrieve a Typescript variable within an ngIf conditional statement in Angular

Answer №1

Answer №2

Similar questions

Display a component just once in React or React Native by utilizing local storage

Update a DIV when ajax call is successful

Navigating through various features in nodejs / expressjs

Accessing JSON data from a URL for use within a specific context

Displaying images retrieved from firebase on a React.js application

Artistic Canvas: Selected Image

How can I correct the error in accessing state data with a getter and displaying the outcome in a component?

What is the best way to query the ng-model table using xpath in Selenium with Java?

Effective steps after Ajax request

Exploring the narrowing capabilities of TypeScript within while loops

Trapped in the Google Maps labyrinth (Angular)

The width values in the array are constantly shifting upon refreshing

What is the best way to extract specific information from an API using AJAX and Axios?

Struggling with properly locating a string within an array

Sending Data Between Web Applications in JavaScript

Is there a way to host an AngularJS 2 application without needing to serve all the files in the `node_modules` directory as well?

Utilizing a MONGO_URL to efficiently run multiple Meteor applications on a single server

Transferring data from an Angular variable to an Express backend using a POST request

Combining two objects/interfaces in a deep merging process, where they do not intersect, can result in a final output that does not

The Angular application is encountering difficulty accessing the Django Rest Framework API due to a CORS problem