CODEWITHSUNDEEP
javascripthtmlangularangular-ng-if
Alex
Alex

Reputation: 143

Want to load img inside the div with the ngif, and when the ngif==false

Basically, I have a div with the *ngIf condition, but I also have a img inside this div. It is an login page, I want to show different login page for different types of user. That is why I use ngIf. However, the img is not load until I click the username input field. Is there anyway I could fix this problem? Sorry about any of unclear description, still improving my English.

This is the simple version of the problem: 

<div *ngIf="somecondition">
<img> 
</div>

So I want the img can be loaded no matter the ngif is true or false, and the img must be inside the div.

Thanks for any help..

Upvotes: 1

Views: 1131

Answers (2)

Devansh J
Devansh J

Reputation: 4194

I guess what you want is to "load" (not show) no matter the condition of *ngIf is...

Just try using [style.display]="condition ? '' : 'none'" instead of *ngIf="condition"

I guess what's happening is that when condition is false, the img is not in the dom and hence the browser doesn't load it... When you hide it, instead of removing it from dom via *ngIf, the image will load...

Upvotes: 2

Thilina Sampath
Thilina Sampath

Reputation: 3775

There are use 2 div with all code and other with only image

<div *ngIf="somecondition">
   <-- some code-->
    <img>
    <-- some code--> 
</div>

 <--without some code--> 
<div *ngIf="!somecondition">
   <img> 
</div>

Upvotes: 0

Related Questions