0

Currently I working on some home project and learning ionic. I am a php developer moving towards Ionic.

So basically I am using php concept in Ionic project and now I stuck with ngIf condition.

I have a profile page where user info is displayed. condition 1 :I want to display add card button if user has not setup their card detail

condition 2: if card detail already the card is setup I want to show edit the card button and hide the add card button.

here is the HTML view.

<ion-row *ngFor="let c of card | async"> <img src="assets/imgs/{{c.cardtype}}.png" width="100%" height="30px"> <button ion-button (click)="editCard(c)" clear color="core" class="text">Edit Card</button> </ion-row> <ion-row > <button ion-button (click)="addCard()" clear color="core" class="text">Add Card</button> <img src="http://placehold.it/200x100" width="100%" height="30px"> </ion-row>

Thanks.

Improve this question

2 Answers 2

Reset to default
2

You can use something like:

<ng-container *ngIf="(card | async)?.length > 0; else noCard"> <ion-row *ngFor="let c of card | async"> <img src="assets/imgs/{{c.cardtype}}.png" width="100%" height="30px"> <button ion-button (click)="editCard(c)" clear color="core" class="text">Edit Card</button> </ion-row> </ng-container> <ng-template #noCard> <ion-row> <button ion-button (click)="addCard()" clear color="core" class="text">Add Card</button> <img src="http://placehold.it/200x100" width="100%" height="30px"> </ion-row> </ng-template>
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

tnx. I will give it try.
tnx. Works like a charm
Happy to hear that :)
It works great when card is an array.But when card is observable card.length is not working . What condition shall I put for checking observable.? I am new so this might me a simple mistake. plz help
Thnx man. you saved my day. Just tried it now and works like a charm for observable.
|
1

Here's how you do it with ngIfElse

<ion-row *ngFor="let c of card | async"> <div *ngIf="condition; else other"> <button ion-button (click)="addCard()" clear color="core" class="text">Add Card</button> <img src="http://placehold.it/200x100" width="100%" height="30px"> </div> <ng-template #other> <img src="assets/imgs/{{c.cardtype}}.png" width="100%" height="30px"> <button ion-button (click)="editCard(c)" clear color="core" class="text">Edit Card</button> </ng-template> </ion-row>
Improve this answer

1 Comment

tnx for your help.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.