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?
Related
I have this code, so when you click the button with the ion-icon, the password toggles. For that sake I need to change the type of the ion-input, but it only changes after I have blurred or focused the cursor back.
<button (click)="input.type = input.type === 'password' ? 'text' : 'password';"
style="background: white !important;" item-right icon-only>
<ion-icon *ngIf="input.type === 'password'" item-right name="eye">
</ion-icon>
<ion-icon *ngIf="input.type === 'text'" item-right name="eye-off">
</ion-icon>
</button>
This problem does not exist when using common HTML input elements, but if I switch to those, I'd lose all styles and functionalities ionic components provide.
Finally I had to address the input child element beneath the ion-input, using a simple method:
callInputChild(){
this.inputType = this.inputType === 'password' ? 'text' : 'password';
document.querySelector("#killswitch > input").setAttribute('type', this.inputType)
console.log(this.inputType)
}
then in the HTML:
<ion-input id="killswitch"></ion-input>
<button (click)="callInputChild()" style="background: white !important;" item-right icon-only>
<ion-icon *ngIf="inputType === 'password'" item-right name="eye"></ion-icon>
<ion-icon *ngIf="inputType === 'text'" item-right name="eye-off"></ion-icon>
</button>
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.
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
I'm trying to bind multiple conditions inside the ion-item-sliding ionic2 component using the following code:
<ion-item-sliding *ngFor="let member of members | async">
<ng-container *ngIf="member?.info | async as info">
<ng-container *ngIf="member?.status | async as status">
<ion-item *ngIf="!status.deleted">
{{info.email}}
<span class="status" *ngIf="member?.status | async as status">{{status.owner ? 'Owner' : status.guest ? 'Guest':'Admin'}}</span>
</ion-item>
<ion-item-options side="right" *ngIf="checkEmail(info.email) || status.owner">
<button ion-button class="trash" color="danger" (click)="kickUser(member.$value)">
<ion-icon name="trash"></ion-icon>
</button>
<button ion-button *ngIf="member?.status | async as status" (click)="changeRole(member.$value,status.guest)">
{{status.guest ? 'Change to admin' : 'Change to guest'}}
</button>
</ion-item-options>
</ng-container>
</ng-container>
</ion-item-sliding>
I didn't show any thing in the screen. so how to make the ng-container work?
Thanks.
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