Angular: ngIf doesn't recognize enum type

Question

this *ngIf:

<div *ngIf="type === FilterType.DateRangeFilter">
    ...
</div>

results in the error

error TS2339: Property 'FilterType' does not exist on type 'FilterComponent

even though the enum type FilterType is imported into the component:

import { FilterType } from '../filter-collection/filter-collection.component'

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {

  constructor(private type : FilterType) {
  }

  ngOnInit(): void {

  }

}

from here:

export enum FilterType {
  DateRangeFilter, SensorSelectFilter
}

Any ideas why this wouldn't work?

Does this answer your question? [Cannot approach Typescript enum within HTML](https://stackoverflow.com/questions/44045311/cannot-approach-typescript-enum-within-html) — R. Richards, Aug 23 '21 at 17:42

score 5 · Answer 1 · answered Aug 23 '21 at 17:35

Your HTML template doesnt have access to variables declared outside of your component. To resolve this, assign the enum to a variable within your component's scope

import { FilterType } from '../filter-collection/filter-collection.component'

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {

  constructor(private type : FilterType) {
  }

  ngOnInit(): void {

  }
  
  filterType = FilterType

}

and then in your template

<div *ngIf="type === filterType.DateRangeFilter">
    ...
</div>

score 0 · Answer 2 · answered Aug 23 '21 at 17:38

0

the property type is used in the FilterComponent as private, to be able to use it change it to public or create a new one in FilterComponent and assign it from the constructor

answered Aug 23 '21 at 17:38

aamd

397
4
12

Angular: ngIf doesn't recognize enum type

2 Answers2