I am working with ionic 5 ..I have a ionsearch to search the contents from a list.Then i have another reset button while pressing this reset button i want the ionsearch text typed inside the searchbar to be cleared.Kindly help me.
Thanks in advance
You can use its ionClear event to do whatever you want e.g Clear the text
(ionClear)="onClear($event)"
You can set the content of the ion-searchbar component through the value property:
document.querySelector('ion-searchbar').value = '';
This will also automatically call the ionInput event.
you can use [(ngModel)]="searchData" click on button call function and clear 'searchData'.
For eg.
/** html code */
<ion-searchbar placeholder="Search users" [debounce]="250" mode="ios" [(ngModel)]="searchData"></ion-searchbar>
<ion-button mode="ios" expand="block" color="carnation" (click)="clearSearch()">
Clear
</ion-button>
/**
typescript code
*/
public searchData:string ='';
clearSearch(){
this.searchData = '';
}
Related
I think I have a very basic problem but I can't resolve it. So what I am trying to do is to implement a button in Ionic that when pressed change the style of a style. To keep it simple for now I try and change the background color of a div. However, it does not work neither does it give an error. (I use console page of browser to view changes, look for errors etc)
The code in the card.page.html page is
<ion-button
(click)="setStyle('red')"
[style.--background]="'pink'"
>
Some Button
</ion-button>
The code in the card.page.ts is
setStyle(value: string): void {
console.log('read More Works');
this.aColor = '#yellow';
console.log('read More still Works');
}
and that is it. Clicking on 'Some Button' button does not do anything except the logging but I am pretty sure it is not two way binding that is the issue as I tried just using for example trying with just some text as being the 'variable' I want to change and that worked fine.
I do appreciate any help :(
Thanks
You can use pre defined CSS styles for that. Something like this:
card.page.scss
#somediv {
&.initial-style {
background: #000;
}
&.dinamic-style {
background: #fff;
}
}
card.page.html
<div id="somediv" [class]="apply_styles ? 'dinamic-style' : 'initial-style'">
styles applied: {{ apply_styles }}
</div>
<ion-button (click)="changeStyle()">Change Style</ion-button>
card.page.ts
apply_styles: boolean = false;
changeStyle() {
this.apply_styles = !this.apply_styles;
}
Of course this is very simple. But I hope it can put you in the right direction.
It is super easy problem but I just can't seem to figure this out (And yes I have read the documentation).
I am trying to get the input user puts in the ion-searchbar (in Ionic v4) after they the press search and put in a const/let.
Mah HTML
<ion-searchbar showCancelButton="focus" class=""></ion-searchbar>
I don't know how I should write the TS for this.
Thanks in advance :{)
Use (search) event to call your function. This event is fired when the user will click on the search button provided by the ion-searchbar.
To get the value entered in the searchbar, use $event.target.value which gets the value field of the tag which in this case is <ion-searchbar>
<ion-searchbar
showCancelButton
searchIcon="search"
animated
cancel-button-icon
(ionCancel)="hideSearch()"
(search)="yourSearchFunction($event.target.value)"
placeholder="Search Some Values">
</ion-searchbar>
To listen to changes as user types in the search bar:
<ion-searchbar
...
(ionInput)="yourInputChangeFunction($event.detail.value)">
</ion-searchbar>
Note: On Ionic 6+, (ionInput) strangely emits value on $event.target.value although, their documentation mentions $event.detail
In your .html file:
<ion-searchbar
[(ngModel)]="autocomplete.input"
(ionInput)="updateSearchResults()"
placeholder="Search for a place">
</ion-searchbar>
In your .ts file:
export class LoginPage{
autocomplete: { input: string; };
updateSearchResults() {
console.log(this.autocomplete.input) //search input will display
}
}
Hope this works.
Html file.
<ion-toolbar>
<ion-searchbar
debounce="1000"
(ionChange)="ionChange($event)">
</ion-searchbar>
</ion-toolbar>
ts file
ionChange(event) {
console.log(event.detail.value)
}
Always Read Documentation of API, Plugins or anything which you are looking for.
You will get data by using ionChange() or ionInput().
Use following code in HTML file
<ion-searchbar
showCancelButton="focus"
ionInput="getData()"
class="">
</ion-searchbar>
and in TypeScript.
public getData(){
//ur logic here
}
Get a reference to the searchbar using the #ViewChild directive:
View:
<ion-searchbar #search></ion-searchbar>
Component:
#ViewChild('search', {static: false}) search: IonSearchbar;
Thereafter, get the value of the ion-searchbar as follows:
const input = await this.search.getInputElement();
const searchValue = input.value;
Sorry if this sounds very obvious but I am new to Ionic 2 / Angular 2. Upon submitting a form, I need to update the button text and click event, ie:
first click on button = submit form + update button text to "Next"
second click on button = trigger goToNext()
I managed to update the button text but not update the click event (to goToNext() ).
.html
<form (ngSubmit)="logForm(i)">
<ion-item>
<ion-input type="text" [(ngModel)]="form.userinput[i]" name="userinput[i]"></ion-input>
</ion-item>
<button ion-button block type="submit" (click)="setNext($event.target, 'Next')">Check</button>
</form>
.ts
setNext(element, text){
element.textContent = 'Next';
}
goToNext(){
// go to Next Page
}
Ideally you change your design a bit to keep a variable that stores state of your 'Controller'. e.g. stores PageNumber. and then behave differently based on what page you are on. So I suggest change design a bit.
But to answer your current question without major change, you can bind the handler dynamically the same way you bind the text. then in the first handler, change the handler for the next click. the default values for handler and text will decide which one is going the be used initially
handler = this.setNext;
text = 'first text';
setNext(){
alert('handler1 called');
this.handler = this.goToNext;
this.text = 'other text';
}
goToNext(){
alert('second called');
// go to Next Page
}
and in your html you go like
<button ion-button block type="submit" (click)="handler()">{{text}}</button>
You can use n00b answer or something like this:
in html file:
<button ion-button block type="submit" (click)="check()">{{btn_txt}}</button>
in ts file:
btn_txt = 'Check';
check() {
if (this.btn_txt == 'Check') {
//do some logic
this.btn_txt = 'Next';
} else {
console.log('go to next page');
}
}
I'm very new to Ionic framework.
Following the docs I created a searchbar like this:
<ion-searchbar
[(ngModel)]="searchQuery"
[showCancelButton]="true"
(ionInput)="search($event)">
</ion-searchbar>
ionInput When the Searchbar input has changed including cleared.
This works as expected.
However I want a different behaviour. I don't want to trigger search($event) every time the input changes, but I couldn't find an output event that is emitted when the user hits the 'enter' key or clicks a button for example.
Is there a solution for this behaviour?
You should be able to add Angular 2 keyup bindings to elements such as keyup and click
Template:
<ion-searchbar #q
[showCancelButton]="true"
(keyup.enter)="search(q.value)">
</ion-searchbar>
Component TS:
search(q: string) {
console.log(q);
}
With Ionic 5 using Angular you have to wrap the ion-searchbar inside a form tag like this:
<form (ngSubmit)="hideKeyboard()">
<ion-searchbar (ionChange)="search($event)"></ion-searchbar>
</form>
In your component using Capacitor:
import { Plugins } from '#capacitor/core';
const { Keyboard } = Plugins;
...
hideKeyboard() {
Keyboard.hide();
}
Of course you could use the ngSubmit event to also search and not only hide the keyboard.
I was able to capture 'Enter' key click or 'search' key click with (search) output event
<ion-searchbar
(search)="search($event)">
</ion-searchbar>
Just to add to #daniel-rubambura 's answer.
You can use ngModel in conjunction with (search) to get the value.
HTML
<ion-searchbar
showCancelButton="never"
[(ngModel)]="searchTerm"
(search)="testFunc()"
></ion-searchbar>
.ts
searchTerm: string;
testFunc(){
console.log(this.searchTerm);
}
I recently started using the latest Desktop version of Google Material Design Lite, I figured it doesn't have a modal pop up and the team has not yet implemented it for the next release.
I have tried to include bootstrap model into it, but thats not working infect seems pretty messed, I believe with the classes/styles clashing with each others.
Any Idea what will work good as an replacement ??
Thanks for your help.
I was also looking for a similar plugin and then I found mdl-jquery-modal-dialog
https://github.com/oRRs/mdl-jquery-modal-dialog
I used this because the other one I found was having issue on IE11. This one works fine.
<button id="show-info" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Show Info
</button>
Here a JSFiddle: https://jsfiddle.net/w5cpw7yf/
I came up with a pure JavaScript Solution for this
You can use the default bootstrap data attributes for the buttons, and make sure that your buttons and modals have their own unique IDs.
You need to have Material Design Lite's JS included before using this JavaScript
Check out the code. Any reviews are welcomed. :)
// Selecting all Buttons with data-toggle="modal", i.e. the modal triggers on the page
var modalTriggers = document.querySelectorAll('[data-toggle="modal"]');
// Getting the target modal of every button and applying listeners
for (var i = modalTriggers.length - 1; i >= 0; i--) {
var t = modalTriggers[i].getAttribute('data-target');
var id = '#' + modalTriggers[i].getAttribute('id');
modalProcess(t, id);
}
/**
* It applies the listeners to modal and modal triggers
* #param {string} selector [The Dialog ID]
* #param {string} button [The Dialog triggering Button ID]
*/
function modalProcess(selector, button) {
var dialog = document.querySelector(selector);
var showDialogButton = document.querySelector(button);
if (dialog) {
if (!dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener('click', function() {
dialog.showModal();
});
dialog.querySelector('.close').addEventListener('click', function() {
dialog.close();
});
}
}
<!-- Button to trigger Modal-->
<button class="mdl-button mdl-js-button" id="show-dialog" data-toggle="modal" data-target="#upload-pic">
Show Modal
</button>
<!-- Modal -->
<dialog id="upload-pic" class="mdl-dialog mdl-typography--text-center">
<span class="close">×</span>
<h4 class="mdl-dialog__title">Hello World</h4>
<div class="mdl-dialog__content">
<p>This is some content</p>
</div>
</dialog>
I use MDL with bootstrap and the modal is displayed correctly after adding the data-backdrop attribute this to the modal element:
<dialog data-backdrop="false">
Hope it helps!