How can I disable a button inside ion-nav-buttons depending on an action in the ion-content?
example: if I click in a button inside ion-content the button inside
ion-nav-buttons get disabled.
As I see, I can´t controll the elements inside ion-nav-buttons from the controller of the template that has the ion-nav-buttons.
This can be done with ng-disabled in button
Check this Try ng-disabled
<ion-view>
<ion-nav-buttons side="primary">
<button class="button" ng-disabled="disabled" ng-click="doSomething()">
I'm a button on the primary of the navbar!
</button>
</ion-nav-buttons>
<ion-content>
<button class="button" ng-click="disable()">
Click to disable
</button>
</ion-content>
</ion-view>
//Angular code
$scope.disable=function(){
$scope.disabled=true;
}
Related
using ionic 3.9.2
Objective:
back button in navbar using ios-arrow-back style and "back" with translate pipe
with setBackButtonText(), manage to set back button text.
But it's tedious to do it for every page with getting reference of nav bar, set text after view init.
Any way to set back button text in template in which can set it like {{ 'back' | translate }}
How to use other icon for back button?
first try: ion-nav-back-button, prompt ion-nav-back-button not known
second try:
<ion-buttons start>
<button ion-button>
<ion-icon name="ios-arrow-back"></ion-icon>
<p>back</p>
</button>
</ion-buttons>
However, it's strange that even with start, the button is on right end.
Playground:
ionic playground
hope to see advice, thanks
Try this. Works well on android and ios
<ion-buttons left>
<button ion-button (click)="dismiss()">
<span ion-text color="primary" showWhen="ios">Back</span>
</button>
<button ion-button (click)="dismiss()">
<ion-icon name="arrow-round-back" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
I want the ion-header with fixed position. When keyboard appears it also scroll up with the rest of the screen in iOS. How to make ion-header remain stick to the top while other part of a screen scroll up?
<ion-header no-border>
<button class="left-button" (click)="delete()" >
Delete
</button>
<button class="right-button" (click)="save()" >
Save
</button>
</ion-header>
<ion-content id="home" class="background-Image" no-bounce>
<form [formGroup]="signup" novalidate>
<!-- User email -->
<div class="label">Wnat is your email?</div>
<div class="row">
<input class="input" autocorrect="off" type="email" placeholder="" formControlName="email" (input)="onEmailChange()" (blur)="onEmailSubmitted()" (keyup.enter)="hideKeyboard()">
<div class="validation-image">
<img [src]=validationImageEmail [hidden]=!validationImageEmail />
</div>
</div>
<hr class="underline">
</form>
</ion-content>
I think that the case is that your header lacks of a navbar or toolbar. By my experience both have the sabe result, but as the documentation says:
A Toolbar is a generic bar that is positioned above or below content. Unlike a Navbar, a toolbar can be used as a subheader. When toolbars are placed within an ion-header or ion-footer, the toolbars stay fixed in their respective location. When placed within ion-content, toolbars will scroll with the content.
So update your code like this:
<ion-header no-border>
<ion-toolbar>
<button class="left-button" (click)="delete()" >
Delete
</button>
<button class="right-button" (click)="save()" >
Save
</button>
</ion-toolbar>
</ion-header>
Hope this helps.
I'm Trying to hide/show elements of a ion-list depending of a boolean variable which is changed when a button is clicked.
The problem is that if I try with *ngIf="{{editMode}}" the ionic serve --lab shows blank screen on browser.
<ion-item-sliding *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-item>
<ion-icon item-left name="rose" *ngIf="{{editMode}}"></ion-icon>
<ion-icon name="{{item.icon}}" item-left></ion-icon>
{{item.title}}
<div class="item-note" item-right>
{{item.note}}
</div>
</ion-item>
And if i try with *ngIf="'editMode'" the result of click on button is nothing.
When I click on a nav bar button the boolen variable is modified to true/false.
What would be wrong?
Check here
You have to do *ngIf="editMode"
*ngIf="'editMode'" - Here you are just taking the string editMode which is truthy and button will not work.
I have to create popover in an ion-view page. I try this HTML code :
<ion-view view-title="Search">
<div class="buttons">
<button class="button button-icon ion-more" ng-click="popover.show($event)">
</button>
</div>
<ion-content >
</ion-content >
</ion-view>
But i didn't get the button in the header page.
Any help is appreciated.
The button won't show up unless included in ion-header, ion-nav-buttons, ion-content. You can use the below to add the button to the header:
<ion-nav-buttons side="right">
<button class="button button-icon ion-more" ng-click="popover.show($event)">
</button>
</ion-nav-buttons>
Also make sure popover is present on your scope
Below is the template code to a page in my app. You can see that I am using the ion-nav-bar. I would like to disable the ion-nav-bar on the login screen and to not have a back button to go back to the login screen.
The best solution I can come up with is to remove <ion-nav-bar> from the login page and add an ng-show directive to <ion-nav-back-button> that tests if the previous page is login and hides the tag in that case.
Is there any better design pattern for this?
<ion-view view-title="Sales">
<ion-pane>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-content class="padding">
<ionic-datepicker input-obj="datepickerObject">
<button class="button button-block button-positive"> {{datepickerObject.inputDate | date:'dd - MMMM - yyyy'}}</button>
</ionic-datepicker>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Amount" ng-model="data.amount">
</label>
</div>
<button class="button button-block button-stable" ng-click="enter()">Save</button>
</ion-content>
</ion-nav-bar>
</ion-pane>
</ion-view>
To your ion-view, you need to add the hide-nav-bar directive and set it to true to hide it on this page.
Like so
<ion-view hide-nav-bar="true">
This will hide the whole nav-bar when you enter the view
For hiding back button just add this tag to your view just like this
<ion-view title="Login" hide-back-button="true">