How to Retrieve a Global Variable in an Angular Template

Question

How to Retrieve a Global Variable in an Angular Template

Is there a way to access a global variable from an Angular template?

let unableToAccess = false;

@Component({
  selector: 'app-payment',
  templateUrl: './buy.component.html',
  styleUrls: ['./buy.component.scss']
})

export class BuyComponent implements OnInit, AfterViewInit {


  constructor() {
  }

  ngOnInit() {
    unableToAccess = false;
  }
}

Later in the HTML template:

<section>
  //This variable cannot be accessed
  {{ unableToAccess }}
</section>

Is there any way to display 'unableToAccess' as true in the template?

angular typescript

Answer 1

Answer №1

Make sure to define cantAccess as a public variable in the AppComponent class and then try to access it.

import { Component } from '@angular/core';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      public cantAccess = false; //Declare cantAccess as a public variable
      constructor() {
      }
      ngOnInit() {
      }
    }

    <section>
      //Trying to access this variable
      {{ cantAccess }}
    </section>

Answer 2

Make sure to define cantAccess as a public variable in the AppComponent class and then try to access it.

import { Component } from '@angular/core';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      public cantAccess = false; //Declare cantAccess as a public variable
      constructor() {
      }
      ngOnInit() {
      }
    }

    <section>
      //Trying to access this variable
      {{ cantAccess }}
    </section>

Answer 3

Answer №2

Check out the latest code snippet below:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @Input() cannotAccess = false;
  constructor() {
  }
  ngOnInit() {
    this.cannotAccess = true;
  }
}

Template

<section>
  //This variable is inaccessible
  {{ cannotAccess }}
</section>

For a live demo of this snippet, click on the following link: https://stackblitz.com/edit/angular-xwwgrt

Answer 4

Check out the latest code snippet below:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @Input() cannotAccess = false;
  constructor() {
  }
  ngOnInit() {
    this.cannotAccess = true;
  }
}

Template

<section>
  //This variable is inaccessible
  {{ cannotAccess }}
</section>

For a live demo of this snippet, click on the following link: https://stackblitz.com/edit/angular-xwwgrt

Answer 5

Answer №3

A global variable can be accessed by reassigning it to a local variable, allowing us to utilize Enum types within a template.

enum Status {
   Active,
   Inactive
}

@Component({
   template: `{{Status.Active}}`
})
class Dashboard {
   Status = Status;
}

Answer 6

A global variable can be accessed by reassigning it to a local variable, allowing us to utilize Enum types within a template.

enum Status {
   Active,
   Inactive
}

@Component({
   template: `{{Status.Active}}`
})
class Dashboard {
   Status = Status;
}

How to Retrieve a Global Variable in an Angular Template

Answer №1

Answer №2

Answer №3

Similar questions

Encountering a "Duplicate identifier error" when transitioning TypeScript code to JavaScript

Displaying real-time data points in OpenLayers 4 with Angular 5

Optimizing Angular Performance with Trackby in Dual Lists

Issue with Angular's BeforeLoginService causing route authorization to fail

I am unable to run ng serve at the moment

Cease the repetitive running of the function in a gentle manner

Adding text in CKEditor with Angular while preserving the existing formatting

Encountering incorrect month while utilizing the new Date() object

The overload signature does not align with the implementation signature when working with subclasses

Converting "Observable<any>" to "any[]" in TypeScript: A beginner's guide

Adding query parameters to links in Angular 10: A beginner's guide

When conducting unit testing in Angular, it is important to avoid calling the Angular service if the return type is an observable of any when dealing

Guide to implementing Google Adsense on a page post-load using Angular 6

What is the best way to bind the value of total when working with forms and the bind method?

Using TypeScript generics to add constraints to function parameters within an object

Angular 11.0.3 displaying ngClass issue (Unable to bind ngClass as it is not recognized as a property of div)

I am faced with a challenge involving an asynchronous function and the best approach to executing it synchronously

Is it ideal for ad-hoc values to reside within the component as class properties, or is there a better approach

An improved method for implementing conditional statements in Angular

The parameter 'To' cannot be assigned the argument of type '{pathname: string; shipment: TShipment;}'