Using ng-show in ionic template - html

I need to show a corresponding button to my string value in JSON.
I tried to use ng-show but I see every button on my site.
<ion-col ng-show="channels.fields.status == 'on'" col-sm-1 class="verse">
<button ion-button color="secondary" class="big_on"> On </button>
</ion-col>
<ion-col ng-show="channels.fields.status == 'off'" col-sm-1 class="verse">
<button ion-button color="light" class="big_off"> Off </button>
</ion-col>
<ion-col ng-show="channels.fields.status == 'error'" col-sm-1 class="verse">
<button ion-button color="danger" class="big_error"> Error </button>
</ion-col>


Change ng-show to ng-if
Try Following code,
<ion-col ng-if="channels.fields.status == 'on'" col-sm-1 class="verse"><button ion-button color="secondary" class="big_on">On</button></ion-col>
<ion-col ng-if="channels.fields.status == 'off'" col-sm-1 class="verse"> <button ion-button color="light" class="big_off">Off</button> </ion-col>
<ion-col ng-if="channels.fields.status == 'error'" col-sm-1 class="verse"> <button ion-button color="danger" class="big_error">Error</button> </ion-col>


I haven't used ionic 2 but as far as I know, "ion-col" is part of ionic 2 which uses Angular2.
Try using *ngIf instead of ng-show. For example:
<ion-col *ngIf="channels.fields.status == 'on'" col-sm-1 class="verse <button ion-button color="secondary" class="big_on">On</button></ion-col>

Related

Sliding cards in Ionic 3

I have a div with some <ion-row> and ion-col. The thing I would like to do is make the <ion-card> item like an <ion-item-sliding> list https://ionicframework.com/docs/v3/components/#sliding-list
I do not know if it is possible without changing all the structure I have now.
<ion-row>
<h2>{{day.date}}</h2>
</ion-row>
<div *ngFor="let item of day.dayArray; let i=index">
<ion-row>
<ion-col col-10 class="no-padding">
<ion-card (click)="openDetails(j, i)">
<ion-row>
<ion-col col-3>
<span class="departure-time">{{ item.hour }}</span>
<span class="departure-time-desc">{{ item.date | date: "a" }}</span>
</ion-col>
<ion-col col-3>
<ion-avatar item-start>
<img *ngIf="segment != 'driver'" [src]="item.driver.profile_image">
<img *ngIf="segment === 'driver'" [src]="imageUrl">
</ion-avatar>
</ion-col>
<ion-col col-6>
<span *ngIf="segment === 'driver'" class="destination">{{item.destination.direction}}</span>
<span *ngIf="segment === 'driver' && item.passengers.length === 1" class="driver-age">{{item.passengers.length}} pasajero</span>
<span *ngIf="segment === 'driver' && item.passengers.length != 1" class="driver-age">{{item.passengers.length}} pasajeros</span>
<span *ngIf="segment != 'driver'" class="driver-name">{{item.driver.first_name}} {{item.driver.last_name}}</span>
<span *ngIf="segment != 'driver'" class="driver-age">{{item.destination.direction}}</span>
</ion-col>
</ion-row>
</ion-card>
</ion-col>
<ion-col col-2 class="chat-col" (click)="openChat(j, i)">
<ion-icon name="chatbubbles" color="danger" [ngClass]="{'notification': item.notificationInJourney}"></ion-icon>
</ion-col>
</ion-row>
</div>
</div>```

Slider below the header without any spaces in ionic 3

I want to insert a slider just below the header(inside the ion-content). But I'm getting white space from the top, left and right as shown in the figure.
My HTML code for the slider is
<ion-navbar color="river">
<ion-row>
<ion-col width-10 style="text-align: right">
<button ion-button icon-only (click)="shop();" color="yel" clear end>
<ion-icon name="cart"></ion-icon>
</button>
</ion-col>
<ion-col width-10 style="text-align: center">
<button ion-button icon-only (click)="product();" color="yel" clear end>
<ion-icon name="pricetag"></ion-icon>
</button>
</ion-col>
<ion-col width-10 style="text-align: left">
<button ion-button icon-only (click)="feedback();" color="yel" clear end>
<ion-icon name="md-chatbubbles"></ion-icon>
</button>
</ion-col>
</ion-row>
how can I avoid white space in between the header and the slider?

May be your ion-content like this <ion-content padding></ion-content>, Remove the padding and try . <ion-content></ion-content>

How to add a blank space between header and a ion-card in ionic 2 with some color?

I want to add a grayspace of between header and the first card starting.
And want to remove the line highlighting on the card's top area in the screen, I have mentioned it the screenshot provided.
.html
<ion-header>
<ion-toolbar>
<img>
<ion-title>Ion Cards</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-item>
<ion-avatar item-start>
<img src="img/marty-avatar.png">
</ion-avatar>
<h2>Marty McFly</h2>
<p>November 5, 1955</p>
</ion-item>
<img src="img/advance-card-bttf.png">
<ion-card-content>
<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 Likes</div>
</button>
</ion-col>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="text"></ion-icon>
<div>4 Comments</div>
</button>
</ion-col>
<ion-col center text-center>
<ion-note>
11h ago
</ion-note>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
enter image description here

Add the bottom-border in the header.
ion-header {
border-bottom: 10px solid gray;
}

In ionic is having background white
You can change background in
<ion-header>
<ion-toolbar>
<img>
<ion-title>Ion Cards</ion-title>
</ion-toolbar>
</ion-header>
<ion-content style="background:lightgray;">
<ion-card>
<ion-item>
<ion-avatar item-start>
<img src="img/marty-avatar.png">
</ion-avatar>
<h2>Marty McFly</h2>
<p>November 5, 1955</p>
</ion-item>
<img src="img/advance-card-bttf.png">
<ion-card-content>
<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 Likes</div>
</button>
</ion-col>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="text"></ion-icon>
<div>4 Comments</div>
</button>
</ion-col>
<ion-col center text-center>
<ion-note>
11h ago
</ion-note>
</ion-col>
</ion-row>
</ion-card>
</ion-content>

and change header
<ion-header style="border-bottom: 5px solid gray;">
<ion-toolbar>
<img>
<ion-title>Ion Cards</ion-title>
</ion-toolbar>
</ion-header>

How do you implement Ionic2 Virtual Scroll when you have an array of objects that have an array of objects?

Using Ionic2/Angular2 I want to use Virtual scroll to make manageable a long list of contacts in contact invite. I've tried replacing both of my *ngFor with [virtualScroll].
The array to map:
var groupedContacts = [contactObject...];
var contactObject = {letter: "a", contacts: [singleContactObject...]};
//scores or even hundreds of contacts per letter
var singleContactObject = {name: "someName", number: "somePhone"};
Original HTML
<ion-content>
<ion-item-group class="invite-sheet" *ngFor="let group of groupedContacts">
<ion-item-divider class="header-letter">{{group.letter}}</ion-item-divider>
<ion-item *ngFor="let contact of group.contacts">
<ion-row align-items-center>
<ion-col width-40>
<h4 text-wrap class="name-invite">{{contact.name}}</h4>
</ion-col>
<ion-col width-35>
<p>{{contact.number}}</p>
</ion-col>
<ion-col width-25>
<button class="inner-invite" (click)="invite(contact)">Invite</button>
</ion-col>
</ion-row>
</ion-item>
</ion-item-group>
</ion-content>
HTML attempt 1:
<ion-content>
<ion-item-group [virtualScroll] = "groupedContacts">
<ion-item-divider *virtualHeader="let group">
{{group.letter}}
</ion-item-divider>
<ion-item *ngFor="let contact of group.contacts">
<ion-row align-items-center>
<ion-col width-40>
<h4 text-wrap class="name-invite">{{contact.name}}</h4>
</ion-col>
<ion-col width-35>
<p>{{contact.number}}</p>
</ion-col>
<ion-col width-25>
<button class="inner-invite" (click)="invite(contact)">Invite</button>
</ion-col>
</ion-row>
</ion-item>
</ion-item-group>
</ion-content>
HTML attempt 2:
<ion-content>
<ion-item-group [virtualScroll] = "groupedContacts">
<ion-item-divider *virtualHeader="let group">
{{group.letter}}
</ion-item-divider>
<ion-item-group [virtualScroll]="contacts">
<ion-row align-items-center>
<ion-col width-40 *virtualItem="let contact">
<h4 text-wrap class="name-invite">{{contact.name}}</h4>
</ion-col>
<ion-col width-35 *virtualItem="let contact">
<p>{{contact.number}}</p>
</ion-col>
<ion-col width-25 *virtualItem="let contact">
<button class="inner-invite" (click)="invite(contact)">Invite</button>
</ion-col>
</ion-row>
</ion-item>
</ion-item-group>
</ion-content>
HTML attempt 3:
<ion-content>
<ion-item-group class="invite-sheet" *ngFor="let group of groupedContacts">
<ion-item-divider class="header-letter">{{group.letter}}</ion-item-divider>
<ion-item-group [virtualScroll]="group.contacts">
<ion-row align-items-center>
<ion-col width-40 *virtualItem="let contact">
<h4 text-wrap class="name-invite">{{contact.name}}</h4>
</ion-col>
<ion-col width-35 *virtualItem="let contact">
<p>{{contact.number}}</p>
</ion-col>
<ion-col width-25 *virtualItem="let contact">
<button class="inner-invite" (click)="invite(contact)">Invite</button>
</ion-col>
</ion-row>
</ion-item>
</ion-item-group>
</ion-content>
No of the attempts produced results so I must fundamentally misunderstand something.
UPDATE:
Here is what I came up with after seeing #wannadream recommendation. I get a blank screen:
<ion-content>
<ion-list [virtualScroll]="groupedContacts" approxItemHeight="50px">
<ion-item *virtualItem="#group">
<ion-item-divider class="header-letter">{{group.letter}}</ion-item-divider>
<ion-list [virtualScroll]="group.contacts" approxItemHeight="50px">
<ion-item *virtualItem="#contact">
<ion-col width-40>
<h4 text-wrap class="name-invite">{{contact.name}}</h4>
</ion-col>
<ion-col width-35>
<p>{{contact.number}}</p>
</ion-col>
<ion-col width-25>
<button class="inner-invite" (click)="invite(contact)">Invite</button>
</ion-col>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
</ion-content>

`item-right` is not working inside button element of `ion-col`

I want to display name="ios-navigate" (which is showing as a navigation icon in bellow image) right side in the column partition. I have given item-right attribute to the button element inside 'ion-col' but its not working.
Its currently displaying bellow,
<ion-item>
<ion-row>
<ion-col width-33>
<button style="padding: 0px 0px;" [disabled]="!item.Website" ion-button icon-left clear item-right (click)="RedirectWebsite(item.Website)">
<ion-icon name="md-globe" item-left large></ion-icon>
WWW
</button>
</ion-col>
<ion-col width-33>
<button ion-button icon-left clear item-right [disabled]="!item.Phone" (click)="dialNumber(item.Phone)">
<ion-icon name="md-call" color="primary" item-left large></ion-icon>
Phone
</button>
</ion-col>
<ion-col width-33>
<button ion-button item-right icon-left clear (click)="GetRoute(item.geometry.location.lat,item.geometry.location.lng)">
<ion-icon icon-right name="ios-navigate" color="primary" large></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-item>

Check out the latest ion-grid API based on flexbox. width-* is deprecated for col-*. Also item-left and item-right attributes work for ion-item elements.
You need to use row attributes.Try justify-content-end to align horizontally right.
<ion-row justify-content-end>
<ion-col col-4>
<button style="padding: 0px 0px;" [disabled]="!item.Website" ion-button icon-left clear (click)="RedirectWebsite(item.Website)">
<ion-icon name="md-globe" item-left large></ion-icon>
WWW
</button>
</ion-col>
<ion-col col-4>
<button ion-button icon-left clear [disabled]="!item.Phone" (click)="dialNumber(item.Phone)">
<ion-icon name="md-call" color="primary" item-left large></ion-icon>
Phone
</button>
</ion-col>
<ion-col col-4>
<button ion-button icon-left clear (click)="GetRoute(item.geometry.location.lat,item.geometry.location.lng)">
<ion-icon icon-right name="ios-navigate" color="primary" large></ion-icon>
</button>
</ion-col>
</ion-row>