I need to apply the sliding effect with these buttons. I have the following html:
<ion-row class="row-two-button">
<ion-col class="button-group">
<button ion-button round color="secondary" [ngClass]="{dark: travelDestinationA, light: travelDestinationB}" (click)="changeDirectionTravel()">
<ion-icon name="md-bus"></ion-icon>
Centro
</button>
<button ion-button round color="secondary" [ngClass]="{dark: travelDestinationB, light: travelDestinationA}" (click)="changeDirectionTravel()">
<ion-icon name="md-bus"></ion-icon>
Bairro
</button>
</ion-col>
</ion-row>
I need to make the slide effect in scss. I'm using ionic 3. If it does not work with my html code how can I do it with another type, a div or something like
When sliding it is also necessary to perform a function in angular 2 or angular 4
Related
i added an icon in a text input, the icon is supposed to be clickable but after adding inside the text input it's no more clickable
<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon" </ion-icon>
</ion-input>
You need to place the <icon> element inside the <button> element.
<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
<!-- In Ionic 4 version it is used as follows. -->
<ion-button (click)="clickEventFunction($event, item.id)">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
</ion-button>
<!-- Used as below before "Ionic 4" release. -->
<button (click)="clickEventFunction($event, item.id)">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
</button>
</ion-input>
clickEventFunction(event: Event, id: any){
/* Something */
}
References
ion-button
Ionic API Documentation
inside you ts file take a boolean:
showPass: boolean = false;
in html:
<ion-item lines="none">
<ion-input type="{{showPass ? 'text' : 'password'}}" placeholder="Password" (ionChange)="inputChanged($event)" [formControlName]="formCtrlName"></ion-input>
<ion-icon name="eye-outline" slot="end" *ngIf="!showPass" (click)="showPass = !showPass"></ion-icon>
<ion-icon name="eye-off-outline" slot="end" *ngIf="showPass" (click)="showPass = !showPass"></ion-icon>
</ion-item>
A simple way of making a clickable icon in an ion input.
<ion-list>
<div>
<ion-list>
<div *ngFor="let itinerary of filteredItineraries">
<ion-card class="itinerary-module">
<ion-card-content *ngIf="itinerary.id !== selection.id">
<div>
<h2>{{itinerary.startDate | date: "MM/dd/yyyy"}} - {{itinerary.endDate | date: "MM/dd/yyyy"}}</h2>
</div>
<div>
<h1>{{itinerary.jobDesc}}</h1>
</div>
<div>
<h2>{{itinerary.jobCode}}</h2>
</div>
<ion-item lines="none">
<ion-icon slot="start" name="thumbs-down" (click)="removeItem(itinerary.id)></ion-icon>
<ion-icon slot="end" name="thumbs-up" (click)="removeItem(itinerary.id)" ></ion-icon>
</ion-item>
</ion-card-content>
</ion-card>
</div>
</ion-list>
</div>
</ion-list>
Is there a way to only display this list one item at a time...say index 0, then when I click one of the icons to remove the current item in index 0 so that index 1 then moves to 0 and is displayed on the screen?
Do not iterate over the loop and render. Just point the UI to first element filteredItenaries[0]
If you want to show the next item, call a function which has the implementation filteredIternaries.splice(0,1). So, therefore, the first element will be updated in the Array as well as in the UI.
I've an ion-card that get its contents from a web server, all is working fine except linking ion-card click event to external url, below is my code
<ion-content no-padding >
<ion-item no-padding *ngFor="let item of items" >
<ion-card (click)="goToDetails('{{item.link}}')">
<img class="images" src="http://mydomain/{{item.captionImage}}">
<ion-item text-wrap>
<div class="headings">{{item.title}}</div>
</ion-item>
<ion-card-content text-wrap>
<p>{{item.message}}"</p>
</ion-card-content>
<ion-row>
<ion-col col-9>
<ion-row>
<ion-col>
<img class="owner-logo" src="http://mydomain/{{item.sourceLogo}}">
</ion-col>
<ion-col>
<div class="owner-name">{{item.source}}</div>
</ion-col>
<ion-col></ion-col>
<ion-col></ion-col>
<ion-col></ion-col>
</ion-row>
</ion-col>
<ion-col col-3 text-right>
<button ion-button clear small color="danger" icon-start (click)="regularShare(index)">
<ion-icon name='share'></ion-icon>
Share
</button>
</ion-col>
</ion-row>
</ion-card>
</ion-item>
</ion-content>
my .ts file is
public goToDetails(url : string){
let target = "_self";
this.theInAppBrowser.create(url,target,this.options);
}
I got this error message
Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 13.
You need to write ion-card like this
<ion-card (click)="goToDetails(item.link)">
If you are in in-build directive like click, ngIf you don't need to use interpolation
I'm having issues moving the '+' button to the right of the words 'Popular'.
Here's the code:
<ion-header>
<ion-navbar color="navbar">
<ion-buttons left>
</ion-buttons>
<ion-title text-center>Popular Itineraries</ion-title>
<div right>
<img src="assets/img/ic-add.png" (click)="openModal()"/>
</div>
</ion-navbar>
I notice in Ionic framework, you can not use things like right in a div and expect it to float right, Simple set a class name or an id name for your div or img and in the style, you can simple do something like this: assume the id for our div is img, then we can have something like this:
#img{
float: right;
}
Another thing you can do if the above method did not work is
#img{
right: 0;
position: absolute; //This one usually work in most case
}
If you follow docs you should use “start” and “end” with ion-buttons to place buttons and a like elements within toolbar or navbar:
Example:
<ion-buttons end>
<button ion-button clear icon-start>
<ion-icon name="aperture"></ion-icon>
Snip!
</button>
</ion-buttons>
Here is an example from production app:
<ion-header>
<ion-navbar>
<ion-buttons start>
<button [disabled]="false" ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>
<ion-col>
Publisher<br>
<ion-icon *ngIf="!foundation.appIsOnline || foundation.offGridMode" name="warning" isActive="false" color="danger" >
<small>Offgrid</small>
</ion-icon>
</ion-col>
</ion-title>
<ion-buttons end>
<button (click)="loadProfilePage()" ion-button clear item-end icon-right>100
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-toolbar>
<ion-buttons start>
<button ion-button clear icon-start (click)="matrix3d()">
<ion-icon name="glasses"></ion-icon>
Matrix3D
</button>
</ion-buttons>
<ion-title class="centrify">
<button (click)="loadTutorialsPage()" ion-button clear icon-start>
<ion-icon name="school"></ion-icon>
Learn
</button>
</ion-title>
<ion-buttons end>
<button ion-button clear icon-start (click)="saveSceneAsPNG()">
<ion-icon name="share"></ion-icon>
Share
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
In your case if you want users to see only icon as button you can use “icon-only” as attribute for button. Check official docs for more details
In a Ionic2 component I use the [hidden] directive in the HTML template. The #Component definition is:
#Component({
selector: 'login-button',
template:
`<button ion-button round (click)="openLogin()" [hidden]="loggedIn">
Login
<ion-icon name="arrow-up"></ion-icon>
</button>
<button ion-button icon-only menuToggle [hidden]="!loggedIn">
<ion-icon name="menu"></ion-icon>
</button>
`
})
I declare a component variable:
export class LoginButton {
loggedIn: boolean = false;
The [hidden]="loggedIn" is working. The [hidden]="!loggedIn" shows the button no matter of the value of loggedIn variable.
How do I write that?
You can use *ngIf declaration. Example :
<div *ngIf = "loggedIn">
<button ion-button round (click)="openLogin()">
Login
<ion-icon name="arrow-up"></ion-icon>
</button>
</div>
<div *ngIf = "!loggedIn">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</div>
--------------> Edit
<button ion-button round (click)="openLogin()" [hidden]="hideLogin1()">
Login
<ion-icon name="arrow-up"></ion-icon>
</button>
<button ion-button icon-only menuToggle [hidden]="hideLogin2()">
<ion-icon name="menu"></ion-icon>
</button>
-----------------------------
export class LoginButton {
hideLogin1(){
return true;
}
hideLogin2(){
return false;
}
}
May I suggest that you are experimenting the first mistake explained here?
Moreover, in Ionic2 you can also use showWhen and hideWhen (documentation here), could it fit your need?