CODEWITHSUNDEEP
htmlangulartypescript
Cpt Kitkat
Cpt Kitkat

Reputation: 1402

Image flickers before changing in angular 7

I have a page to display Customer Info where I show female pic if Gender of Customer is Female or a Gents pic is gender is Male. Code for HTML:

<span class="d-none d-lg-block">
            <div *ngIf="male; else female">
              <img class="circular-image" src="../../../assets/images/male_profile_pic.jpeg" alt="" />
            </div>
            <ng-template #female>
              <img class="circular-image" src="../../../assets/images/female_profile_pic.jpeg" alt="" />
            </ng-template>
          </span>

Typescript Code:

this.gender = this.sampleData.individualCustomer.gender;
  if (this.gender === 'Male') {
    this.male = true;
  } else {
    this.male = false;
  }

However if I load a Male Customer profile for a second I see Female profile pic before it changes to Male profile pic. How can I resolve this?

Upvotes: 0

Views: 867

Answers (1)

Ashish Ranjan
Ashish Ranjan

Reputation: 12960

Have a flag, say isCustomerLoaded initialized with false set it to true once customer profile is loaded.

Use this falg in the template as:

<span *ngIf="isCustomerLoaded" class="d-none d-lg-block">
        <div *ngIf="male; else female">
          <img class="circular-image" src="../../../assets/images/male_profile_pic.jpeg" alt="" />
        </div>
        <ng-template #female>
          <img class="circular-image" src="../../../assets/images/female_profile_pic.jpeg" alt="" />
        </ng-template>
</span>

Upvotes: 1

Related Questions