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 — R. Richards
– R. Richards, Commented Aug 23, 2021 at 17:42

wscttc · Accepted Answer · 2021-08-23 17:35:11Z

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>

aamd · Accepted Answer · 2021-08-23 17:38:02Z

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, 2021 at 17:38

aamd

4575 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular: ngIf doesn't recognize enum type

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related