How to use enum data type in angular html? [duplicate]

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
– Yuva Raj, Commented May 5, 2021 at 13:23

Gabriel Sereno · Accepted Answer · 2021-05-05 13:23:43Z

2

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>

answered May 5, 2021 at 13:23

Gabriel Sereno

8551 gold badge5 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use enum data type in angular html? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related