CODEWITHSUNDEEP
angular-reactive-formsangular15
Ajit_S
Ajit_S

Reputation: 3

ngIf with reactive forms in angular 15

I am developing a web application using angular 15. I am using reactive forms. I want to display a div while data is being retrieved and hide it upon successful data retrieval. I am using *ngIf="isLoading". isLoading is the variable defined in component ts file.

I set this.isLoading=true as first statement in ngOnInit() and set it to this.isLoading=false in HttpGet Subscribe() method (after data retrieval) also in ngOnInit().

When I navigate to this page, a blank form is visible. The div with loading text does not load. If I set a breakpoint in subscribe method at line this.isLoading=false, the div loads just before executing this line and disappears as soon as this line is executed. (In other words, the div is never visible if code is run without breakpoint.)

Has anyone else experienced this behavior? What was the resolution/ workaround? Your expert opinion is highly appreciated. Thanks!

Upvotes: 0

Views: 101

Answers (1)

Ajit_S
Ajit_S

Reputation: 3

One observation is that if I comment out the form in html, the div displays when user navigates to the page and disappears as soon as data is retrieved from api using HttpGet, as expected.

HTML

   <!--
    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
    ...
    ...
    ...
    </form>
    -->
      <div *ngIf="isLoading" id="divLoading" style="display:flex; justify-content: center; align-items: center; height:100%">
        <div style="width:200px; z-index: 2;">
          <label style="font-size: x-large;">&nbsp;&nbsp;Loading&nbsp;<i class="fa-solid fa-ellipsis fa-fade fa-2xl"></i></label>
        </div>
      </div>

CSS

#divLoading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 625px;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

  #divLoading input {
    background-color: gray;
  }

Upvotes: 0

Related Questions