In the ionic project I want to change the varaible showSearchBox dynamically that's why. I have used a custom event searchBox which is triggered by an another component but the searchBoxShow() never called. So how can I fix this issue so that I can trigger a function dynamically in the app.component which will update the variable searchBox dynamically.
Here is my app.component.html code.
<ion-app>
<ion-router-outlet style="margin-top: 50px; bottom: 0px;" *ngIf="showSearchBox" (searchBox)="searchBoxShow()"></ion-router-outlet>
<ion-router-outlet *ngIf="!showSearchBox" (searchBox)="searchBoxShow()" ></ion-router-outlet>
</ion-app>
And the code of the other.component.ts.
#Output('searchBox') showSearchBox = new EventEmitter();
ionViewDidEnter() {
this.showSearchBox.emit();
}
Related
I have a custom button component that accepts on:click event handler. Currently it looks like this:
<!-- Button.svelte -->
<button on:click>
<slot />
</button>
And I use it like this
<Button on:click={doStuff}>click me</Button>
I want to access doStuff handler inside Button component to wrap it with another function. How can I do that?
I know that I can add a custom onClick prop, but this is ugly.
You can call a function inside Button component than dispatch click event, so that will work as wrapper method.
Something like this
/* Button.svelte */
const handleClick = () => {
// your wrapper method or logic here
dispatch('click'); // this is basically doStuff()
}
<button on:click={handleClick}>
<slot />
</button>
I am trying to implement the show/hide button for the password field in Ionic 3. I have got the code help from here
login.html
<ion-item>
<ion-input [type]="passwordType" placeholder="Password" formControlName="password"></ion-input>
<ion-icon item-end [name]="passwordIcon" class="passwordIcon" (click)='hideShowPassword()'></ion-icon>
</ion-item>
login.scss
.passwordIcon{
font-size: 1.3em;
position: absolute;
right: .1em;
top: .5em;
z-index: 2;
}
login.ts
passwordType: string = 'password';
passwordIcon: string = 'eye-off';
hideShowPassword() {
this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
this.passwordIcon = this.passwordIcon === 'eye-off' ? 'eye' : 'eye-off';
}
I have done one modification in the .scss file and made the icon absolute so that it appears on top of the input field instead of the side.
This icon click is working when the Input field is not active/selected but if I am in the middle of typing in the Input Field, the click is not working/recognized. Please help.
With the solution suggested my field looks like this.
I'm not entirely sure of what
... and made the icon absolute so that it appears on top of the input field instead of the side
would mean, but still, using position: absolute on top of inputs may lead to bugs specially on iOS.
Another possible issue of your code is that buttons are designed to handle issues related with taps in mobile devices, but icons may not work properly sometimes.
Anyway, please take a look at this working Stackblitz project to do something like this:
The code is quite simple actually - the idea is to use a button with an icon instead of just an icon to avoid issues with the tap event:
Component
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public showPassword: boolean = false;
constructor(public navCtrl: NavController) {}
public onPasswordToggle(): void {
this.showPassword = !this.showPassword;
}
}
Template
<ion-header>
<!-- ... -->
</ion-header>
<ion-content padding>
<!-- ... -->
<ion-item>
<ion-input placeholder="Password" [type]="showPassword ? 'text' : 'password'" clearOnEdit="false"></ion-input>
<button (click)="onPasswordToggle()" ion-button clear small item-end icon-only>
<ion-icon [name]="showPassword ? 'eye-off' : 'eye'"></ion-icon>
</button>
</ion-item>
</ion-content>
EDIT
Based on your comments, one way to keep the button inside of the border would be not to apply the border to the input, but to the ion-item.
Something like this for example:
ion-item {
border: 1px solid #ccc;
border-radius: 10px;
}
would result in:
I'm using Ionic 3.*, tring to create a component that contains just a button.
The component code is:
#Component({
selector: 'profile-button',
templateUrl: 'profile-button.html',
})
export class ProfileButtonComponent {
constructor(
private popoverCtrl: PopoverController
) {}
/**
* Present the Profile popover
* #param ev
* #returns {Promise<any>}
*/
async presentPopover(ev) {
let popover = this.popoverCtrl.create(ProfilePopover);
return popover.present({
ev
});
}
}
and my template is:
<button ion-button icon-only (click)="presentPopover($event)" title="Profile">
<ion-icon name="person"></ion-icon>
</button>
The problem:
The problem is that the icon-only directive is just ignored. The button still have a background color.
If I put the template outside the component, it shows the right style.
Looks like the directives is not available inside a Component. My component is inside a custom module, not on AppModule.
How can I solve this? Found that on Ionic2 i need to import the directives manually, but it don't work on Ionic3.
I've solved the issue, maybe with an workarround:
Changed the component selector to attribute selector: [profile-button]
Wrapped the template in a <ion-buttons end> tag
Called the component as an attribute of <ion-buttons end>
<ion-buttons profile-button end></ion-buttons>
Note: The issue wasn't with icon-only directive. But it's a style issue on Ionic that required the button directly child of the toolbar or ion-buttons to get proper styles.
I found solution on another S.O. thread.
In your *.module.ts add IonicModule into imports section.
#NgModule({
imports: [
CommonModule, // <-- standard Angular module
IonicModule // <-- standard ionic module
], ...
})
In your template try adding your content inside a ion-content
<ion-content>
</ion-content>
you can remove ion-button and add:
class="disable-hover button button-ios button-clear button-clear-ios button-clear-ios-dark"
change dark as you want.
History and Home page are work fine but 'ng-click="toggleMenu()"' are not working so please help me
click event ng-click="toggleMenu()"is not working..
can anyone help me to solve it?
My code is,
<ion-tab title="History" icon-off="ion-document" icon-on="ion-document-text" href="#/tab/history">
<ion-nav-view name="tab-history"></ion-nav-view>
</ion-tab>
<a class="button" ng-click="toggleMenu()">More</a>
.controller('MoreCtrl', function($scope,$ionicSideMenuDelegate) {
$scope.toggleMenu = function()
{
alert('test toggle');
$ionicSideMenuDelegate.toggleRight();
};
})
I think controller are not required here . can you try this way.
<ion-tab title="More" icon-off="ion-ios-more-outline" icon-on="ion-ios-more" ng-click="toggleMenu()">
</ion-tab>
</ion-tabs>
.run(function($ionicPlatform,$state,$rootScope,$ionicActionSheet,$ionicSideMenuDelegate) {
$rootScope.toggleMenu = function() {
alert('test toggle');
$ionicSideMenuDelegate.toggleRight();
}
})
check this question please Ionic framework ion tabs not firing event
more information this link for demo
http://codepen.io/cfjedimaster/pen/iplCx
Please add your full html code. Have you correctly attached MoreCtrl to the DOM? Is your DOM in line with Ionic guidelines for $ionicSideMenuDelegate? I don't see the <ion-side-menus> tag for example, like below:
<body ng-controller="MoreCtrl">
<ion-side-menus>
<ion-side-menu-content>
Content!
<button ng-click="toggleRightSideMenu()">
Toggle Right Side Menu
</button>
</ion-side-menu-content>
</ion-side-menus>
</body>
I have a div draggable using YUI3 code:
dd1 = new Y.DD.Drag({
node: '#dd-demo-rep'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#container'
});
I need to be able to interact with other links within the node "dd-demo-rep" when it is not being dragged.
I want to be able to disable the DD code and then re-enable it when I am ready. This may happen different times so it needs to be able to toggle as needed.
I tried using the destroy() event {dd1.destory()}, and that works to stop it, but I was not able to get it working again. Is there a better way to do this ? Appreciate any help or advice.
You need to set the lock attribute of dd1 to true:
dd1.set('lock', true);
Setting lock to true stops the element from being draggable. Here's a runnable example:
<script src="https://cdn.rawgit.com/stiemannkj1/0214fdc4cccaa77d6e504320cf70a571/raw/63d260364730fb067f103c00862c7e65685256df/yui-3.18.1_build_yui_yui-min.js"></script>
<button id="toggleLock">Toggle Lock</button>
<div id="container" style="height: 200px; width: 200px; border-style: solid;">
<span id="drag" style="border-style: dotted;">Draggable</span>
</div>
<script type="text/javascript">
YUI().use('dd-drag', 'dd-constrain', function(Y) {
var dd = new Y.DD.Drag({
node: '#drag'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#container'
});
Y.one('#toggleLock').on('click', function(event) {
dd.set('lock', !dd.get('lock'));
});
});
</script>