Use of Enums in Angular 8 HTML template for *ngIf

angular 7 enum dropdown
enum in switch case angular
angular typescript enum in class
ngswitch angular with enum
inject enum angular
check enum in angular
use enum in html angular 6
get value from enum angular 7

How can I use Enums in the Angular 8 template?

component.ts

import { Component } from '@angular/core';
import { SomeEnum } from './global';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = SomeEnum.someValue;
}

component.html

<span *ngIf="name === SomeEnum.someValue">This has some value</value>

This currently doesn't work, since the template has no reference to SomeEnum. How can I solve it?

ERROR Error: Cannot read property 'someValue' of undefined

in the TS

public get SomeEnum() {
   return SomeEnum; 
}

in the HTML use

ngIf="SomeEnum.someValue === 'abc'"

Angular2 - How to use string enums with *ngIf, component html. <div id="adminDiv" *ngIf="hasAccess(RoleType. You should not use function with parameter in the template, but do� The plunker example shows, that it is not possible to use enums with *ngIf or somethingelse in the angular2 template. But with the numeric value it works. Is it possible to use the enum expression?

You'll have to declare it as a property first:

import { Component } from '@angular/core';
import { SomeEnum } from './global';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = SomeEnum.someValue;
  importedSomeEnum = SomeEnum;
}

And then use it in the template:

<span *ngIf="name === importedSomeEnum.someValue">This has some value</span>

Here's a Working Demo for your ref.

Working with Enums in Angular components - DEV, This is a short guide on using Enums in an Angular application. Reference an Enum in your component.html templates; Itterate over an enum using an Enum and *ngIf; Get all the values of an enum as an Array<sting>� When we compile our code, we will not see a ng-template tag in HTML DOM. Angular will evaluate the ng-template element to convert it into a comment section in HTML DOM. We will go through the different structural directives like *ngIf,*ngFor and [NgSwitch] to understand this further. Using ng-template with *ngIf example

You can declare a field equal to the SomeEnum enum (it may be imported from another file) as a public class field in the component file. Then it will be accessible in the template.

// component 
export class AppComponent  {
  name = SomeEnum.someValue;
  enum = SomeEnum;
}

// template
<span *ngIf="name === enum.someValue">This has some value</value>

Use Enum in an angular2-template and *ngIf � Issue #8588 � angular , Hello, I have a problem with using typescript enums in angular2 templates. http:// plnkr.co/edit/orQTAcYkySK3tU5wr1Me?p=preview I hope the� Descriptionlink. A shorthand form of the directive, *ngIf="condition", is generally used, provided as an attribute of the anchor element for the inserted template.Angular expands this into a more explicit version, in which the anchor element is contained in an <ng-template> element.

Yes, the template cannot refer to the enum directly. There are few ways to do this. 1. Add Enum reference to the component ts file like below

someEnum = SomeEnum;

then you will be able to use the reference in your template like this

<span *ngIf="name === someEnum.someValue">This has some value</value>
  1. The second way is to call a function from your template with name as parameter and compare it in the typescript file

<span *ngIf="checkCondition(name)">This has some value</value>

Usage of enums in templates not possible? � Issue #2885 � angular , pkozlowski-opensource closed this on Jul 8, 2015 Use Enum in an angular2- template and *ngIf #8588 @angular-automatic-lock-bot� Angular 4 NgIf-Then-Else Angular 4 has introduced NgIf with then and else. If condition in NgIf is false and it is necessary to show a template then we use else and its binding point is <ng-template>. Usually then is the inlined template of NgIf but we can change it and make non-inlined using a binding and binding point will be <ng-template>.

Using TypeScript Enums in Angular Templates, The only way is to use numeric constants corresponding to the enum members, but this approach produces unclear markup, and it might be� How to use *ngIf else in Angular. In this tutorial, we are going to take a look at the ngIf directive. We will discover how we can use it to show or hide parts of our angular application. Also, we will find out how the ngIf directive differs from using the "hidden" attribute.

Angular Tips: Template Binding with Static Types, Learn tips to make Angular templates more aware of our data types and reduce errors typos in our HTML templates and catch errors at build time rather than run time. We can bind the enum to our component property. It's thoughtfully collected picks of articles and tools, that focus on Angular 2+, ASP.NET (4.x/MVC5 and Core), and other fullstack developer goodies. Take it for a test ride , and you may unsubscribe any time.

How to use ng-if condition with enums? (angular2 - html, (angular2/typescript) - angularjs. So I thought doing it with enums, this is how: export enum CurrentListView {People, Cars, Places} That's the specific template: <app-card [hidden]=true> <h2>�berblick</h2> <div padding-left: 300px"> <ng-container *ngIf="cards"> <div *ngFor ="let card of cards | slice:0:8;"> <app-card� HTML is the language of the Angular template. Almost all HTML syntax is valid template syntax. The <script> element is a notable exception; it is forbidden, eliminating the risk of script injection attacks. In practice, <script> is ignored and a warning appears in the browser console. See the Security page for details.

Comments
  • What exactly do you mean by "doesn't work"?
  • ERROR Error: Cannot read property 'someValue' of undefined
  • have you tried creating a public get SomeEnum() {return SomeEnum; } in the TS and then in the HTML use ngIf="SomeEnum.someValue"
  • For future reference, there is already an open feature request in the offical repo: github.com/angular/angular/issues/33652
  • Wow, this is probably the more cleaner way to do it. Like your answer.
  • It's not recommended to use getters though. They cost a lot of performance. So the getter function runs every time Angular performs Change Detection. Now, I'm not saying that just running this function will cost performance. But then this leaves room for someone to add some logic in this getter which might result in performance hits. Just saying. 🤷
  • @SiddAjmera I don't know about this performance issue, can you please show us a source for searching about that? I use this for Enums because they look cleaner in the code. Thanks!
  • Ummmm. Well. Just place a console.log in the getter and place an input in your template with an [(ngModel)] Or just run this StackBlitz and see the console :)
  • This is triggered by the ngIf, not the getter itself. ngIf looks in the variables aswell, but you just can't console them hahaha.
  • If the enum is usable elsewhere, it would be better to have it in a separate file. And then simply importing it in the component as property.
  • Yes, that was what I meant. You don't have to declare the enum in the same file as the component. I've edited my answer.