'Issue while updated the styles from opactiy 0 to opacity 1 in angular through async call in html

Below is the piece of code I am using in angular

<div class="root" [class.loaded]="loaded$ | async">

The styles applied to the class as follow

div.root {
opacity: 0;
    transition: opacity .3s ease-out .5s;

  &.loaded {
        opacity: 1 !important;
    }
}

The issue is that with the async call (loaded$ | async) sometimes the opacity is not set to 1 and the page is not displayed. I am trying to load the page with the result of the async result. So if the call is successful then the opacity is set to 1 otherwise set to 0.

The code is written in typescript.

htmlcsstypescriptangular10


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions