How to use enum data type in angular html?

Question

In my .ts file i have created an enum dataType like this:

export enum UploadORCompareHash {
  UPLOAD,
  COMPARE_HASH
}
@Component({
  selector: 'attachmentList',
  templateUrl: './attachment-list.component.html',
  // styleUrls: ['./attachment-list.component.css']
})
export class AttachmentListComponent implements OnInit, OnDestroy, OnChanges {

    public uploadOrCompareHash: UploadORCompareHash;

Now I want to use this in my html as bellow:

<button *ngIf="uploadOrCompareHash === UploadORCompareHash.COMPARE_HASH" (click)="onConfirmUpload()" class="btn btn-primary"> compare hash
            </button>


<button *ngIf="uploadOrCompareHash === UploadORCompareHash.UPLOAD" (click)="onConfirmUpload()" class="btn btn-primary"> Upload
            </button>

but unfortunately, I can not use this. I am getting this error:

Property 'UploadORCompareHash' does not exist on type 'AttachmentListComponent'.

can someone please tell me what have I done wrong here?

Where do you assign the uploadOrCompareHash value in component? — Yuva Raj, May 05 '21 at 13:23

score 2 · Answer 1 · answered May 05 '21 at 13:23

You need to turn the Enum in an member of the class, like this:

export enum UploadORCompareHash {
  UPLOAD,
  COMPARE_HASH
}
@Component({
  selector: 'attachmentList',
  templateUrl: './attachment-list.component.html',
  // styleUrls: ['./attachment-list.component.css']
})
export class AttachmentListComponent implements OnInit, OnDestroy, OnChanges {

    public uploadOrCompareHash: UploadORCompareHash;
    
    get enumUpload(){
      return UploadORCompareHash
    }

<button *ngIf="uploadOrCompareHash === enumUpload.COMPARE_HASH" (click)="onConfirmUpload()" class="btn btn-primary"> compare hash
            </button>


<button *ngIf="uploadOrCompareHash === enumUpload.UPLOAD" (click)="onConfirmUpload()" class="btn btn-primary"> Upload
            </button>

How to use enum data type in angular html?

1 Answers1