CODEWITHSUNDEEP
angular
Arjun Dhilod
Arjun Dhilod

Reputation: 181

Why In angular 6 my ngif and else condition is not working?

I am using *ngif but it's not working.My code are as below if some one have idea pls help me.

<div class="cameracover" *ngIf="prod.productName === 'FLIP BOOK'; then ifcondition else elsecondition">                                                                
      <div class="flipbook-img" #ifcondition>
            <img src="//res.cloudinary.com/klassaktcontent/image/upload/v1536062876/book-service.jpg" />
       </div>
  <div #elsecondition>
     <div class="cameraicon" *ngIf="prod.klasActPreviewimages && prod.klasActPreviewimages.length==0 && prod.noOfImages!=0" (click)="getPreview(studcart.firstName,studcart.userID,prod.cartID,prod.productId,prod.noOfImages,prod.choolPackageId)">
             <img src="//res.cloudinary.com/klassaktcontent/image/upload/v1535474911/camera.svg" />
                                      <p>Choose Photo</p>
     </div>
  </div>                                                  
</div>

Upvotes: 1

Views: 189

Answers (2)

Adrita Sharma
Adrita Sharma

Reputation: 22213

Try like this:

<div class="cameracover" *ngIf="prod.productName === 'FLIP BOOK'; then ifcondition else elsecondition">
</div>


<ng-template #ifcondition>
    <div class="flipbook-img">
        <img src="//res.cloudinary.com/klassaktcontent/image/upload/v1536062876/book-service.jpg" />
  </div>
</ng-template>


<ng-template #elsecondition>
  <div class="cameraicon" *ngIf="prod.klasActPreviewimages && prod.klasActPreviewimages.length==0 && prod.noOfImages!=0" (click)="getPreview(studcart.firstName,studcart.userID,prod.cartID,prod.productId,prod.noOfImages,prod.choolPackageId)">
        <img src="//res.cloudinary.com/klassaktcontent/image/upload/v1535474911/camera.svg" />
      <p>Choose Photo</p>
  </div>
</ng-template>

Working Demo

Upvotes: 1

Sneha Pawar
Sneha Pawar

Reputation: 1127

Using *ngIf you can do as follows, use ng-template for showing if and else block

<div *ngIf="prod.productName === 'FLIP BOOK';then ifcondition else other_content">
   content here ...
 </div>

<ng-template #ifcondition>content here...</ng-template>

<ng-template #other_content>other content here...</ng-template>

Upvotes: 1

Related Questions