Não é possível abordar enum Typescript em HTML

Fiz um enum com Typescript para usar em MyService.service.ts MyComponent.component.ts e MyComponent.component.html.

export enum ConnectionResult {
    Success,
    Failed     
}

Posso facilmente obter e comparar uma variável enum definida em MyService.service.ts:

this.result = this.myService.getConnectionResult();

switch(this.result)  
{
    case ConnectionResult.Failed:
         doSomething();
         break;
    case ConnectionResult.Success:
         doSomething();
         break;
}

Eu também queria usar o enum para uma comparação dentro do meu HTML usando a instrução * ngIf:

<div *ngIf="result == ConnectionResult.Success; else failed">
            <img src="../../assets/connection-success.png" height="300px" class="image-sign-style" />
</div>
<ng-template #failed>
       <img src="../../assets/connection-failed.png" height="300px" class="image-sign-style" />
</ng-template>

O código compila, mas o navegador me dá um erro:

Não é possível ler propriedade de indefinido

Com a seguinte linha de erro de indicação de html:

Alguém sabe por que o enum não pode ser abordado assim?

O escopo do modelo é limitado aos membros da instância do componente. Se você quiser se referir a algo, ele precisa estar disponível lá

class MyComponent {
  public get connectionResult(): typeof ConnectionResult {
    return ConnectionResult; 
  }
}

No HTML, você agora pode usar

*ngIf="connectionResult.Success"

Veja também Variáveis ​​globais de acesso Angular2 do template HTML

Você terá que escrever da seguinte maneira no .tsarquivo.

enum Tenure { day, week, all }

export class AppComponent {
    tenure = Tenure.day
    TenureType = Tenure
}

E agora em html você pode usar isso como

*ngIf = "tenure == TenureType.day ? selectedStyle : unSelectedStyle"

Espero que esteja mais claro agora. :)

Você pode simplesmente adicionar o enum ao seu componente como propriedade e usar o mesmo nome do enum (Quarters) em seus modelos:

enum Quarters{ Q1, Q2, Q3, Q4}

export class AppComponent {
   quarter = Quarters.Q1
   Quarters = Quarters
}

Em seu template

<div *ngIf="quarter == Quarters.Q1">I=am only visible for Q1</div> 

A razão pela qual isso funciona é que a nova embalagem é basicamente deste tipo:

TileType: typeof TileType

Você pode vincular como texto se enum definido como a seguir (esses valores não impõem um valor de string json vindo da API)

  export enum SomeEnum {
      Failure,
      Success,
  }

No arquivo .ts

public status: SomeEnum;

Em .html

<div *ngIf="status == 'Success'">

Outra maneira, testada em Angular 8+ é ter enums com números

  export enum SomeEnum {
      Failure = 0,
      Success = 1,
  }

No arquivo .ts

public status: SomeEnum;

Em .html

<div *ngIf="status == 1">