I have a simple button in ionic 4, i wan to run a function on clicking this button. but it seems like click event is not triggering.
here is html
<ion-content >
<ion-button (onclick)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
ts:
export class HomePage {
text = "Lakhan"
changeText(){
this.text="Ram";
}
}
Try this:
<ion-content >
<ion-button (click)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
Instead of using onclick you need to use click so
<ion-content >
<ion-button (onclick)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
you need to change to
<ion-content >
<ion-button (click)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
Related
While designing a next and previous button inside an 'ion-slides', these two buttons get automatically placed inside 'swiper-wrapper' class. Need to make it outside the 'swiper-wrapper' class, so that it is visible from any slide. Has any solution?
<ion-slides pager="false" #mySlider>
<ion-slide>1</ion-slide>
<ion-slide>2</ion-slide>
<ion-slide>3</ion-slide>
<ion-slide>4</ion-slide>
<ion-button class="slide-prev-btn"><ion-icon name="chevron-back" (click)="swipeNext()"></ion-icon></ion-button>
<ion-button class="slide-next-btn"><ion-icon name="chevron-forward" (click)="swipePrev()"></ion-icon></ion-button>
</ion-slides>
I do this by using position and two-line code
<div style="position: absolute;top: 50%;left: 16px;font-size: 25px;z-index: 2;" (click)="slidePrev()">
<ion-icon name="arrow-back"></ion-icon>
</div>
<div style="position: absolute;top: 50%;right: 16px;font-size: 25px;z-index: 2;" (click)="slideNext()">
<ion-icon name="arrow-forward"></ion-icon>
</div>
<ion-slides paginationType="bullets" slidesPerView="1" pager="true">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
TS
#ViewChild(Slides) slides: Slides;
slidePrev() {
this.slides.slidePrev();
}
slideNext() {
this.slides.slideNext();
}
How can I uncheck a radio button or reset a radio group in Ionic 4?
This is not working (which used to work until Ionic 2):
<form [formGroup]="myForm">
<ion-list formControlName="listOptions">
<ion-radio-group>
<ion-item class="bgtransparent" [ngClass]="{'bgred': correctAnswerFirst}">
<ion-radio value="answer1" (ionSelect)="processSelectedAnswer(1)"></ion-radio>
<ion-label>{{answer1}}</ion-label>
</ion-item>
<ion-item class="bgtransparent" [ngClass]="{'bgred': correctAnswerSecond}">
<ion-radio value="answer2" (ionSelect)="processSelectedAnswer(2)"></ion-radio>
<ion-label>{{answer2}}</ion-label>
</ion-item>
<ion-item class="bgtransparent" [ngClass]="{'bgred': correctAnswerThird}">
<ion-radio value="answer3" (ionSelect)="processSelectedAnswer(3)"></ion-radio>
<ion-label>{{answer3}}</ion-label>
</ion-item>
<ion-item class="bgtransparent" [ngClass]="{'bgred': correctAnswerFourth}">
<ion-radio value="answer4" (ionSelect)="processSelectedAnswer(4)"></ion-radio>
<ion-label>{{answer4}}</ion-label>
</ion-item>
</ion-radio-group>
</ion-list>
</form>
.
this.myForm = formBuilder.group({
listOptions: ['']
});
So mainly this function does not work anymore:
this.myForm.controls.listOptions.reset();
Should your formControl be on the ion-radio-group?
<form [formGroup]="myForm">
<ion-list>
<ion-radio-group formControlName="listOptions">
I am using ionic 4. I want to ask if I want to send value to side menu then when I open the menu the value is already at side menu. Now I need to open the side menu then click one time to show the value. Can I know how to do it? Here is my code. Thank you
app.component.html
<ion-menu side="start" (click)="onOpen()">
<ion-content>
<ion-list>
<ion-menu-toggle>
<ion-item lines="none">
<ion-icon name="business" slot="start"></ion-icon>
<ion-label>{{text}}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>
I put the onOpen() method at app.component.ts
onOpen() {
this.text = "my pass value";
}
If you want something triggered when the menu is opened you need to handle the ionWillOpen or ionDidOpen events:
ion-menu - Ionic Documentation
An example of this would look like:
<ion-menu (ionWillOpen)="onMenuOpen()" (ionDidOpen)="menuOpened()">
I am currently experimenting in Element UI a beautiful VueJS frame for ui.
I am having issue when putting an select element inside a dropdown menu because when I select an item inside the select element it will close the dropdown also.
How should I make the dropdown stay whenever I select an item in select element?
Here is the sample demo. fiddle
https://jsfiddle.net/vy70ogbz/
I got the same problem and I solved it by small hack: when a dropdown is open I set disabled="true" property to the trigger button.
<el-button
:disabled="dropdownIsOpen"
slot="button"
>Open</el-button>
It works because in the source code we have condition for this case
https://github.com/ElemeFE/element/blob/dev/packages/dropdown/src/dropdown.vue#L121
Example: click
Why dont you use a menu to achieve this. I find it is more flexible, you can use the menu-trigger="click" attribute to toggle the menu only when clicked. like this
<el-menu
:default-active="activeIndex"
mode="horizontal"
menu-trigger="click"
#select="handleSelect">
<el-submenu
class="sub-menu-more">
<template slot="title">
<b>Click to dropdown</b>
</template>
<el-menu-item
index="1">
<span >Team</span>
</el-menu-item>
<el-menu-item
index="2">
<span >Product</span>
</el-menu-item>
<el-menu-item
index="3">
<span >item</span>
</el-menu-item>
<el-menu-item
index="4">
<el-select v-model="value" placeholder="Select">
<el-option
:label="'test1'"
:value="'test1'">
</el-option>
<el-option
:label="'test1'"
:value="'test1'">
</el-option>
<el-option
:label="'test1'"
:value="'test1'">
</el-option>
</el-select>
</el-menu-item>
</el-submenu>
</el-menu>
see fiddle
You can prevent the dropdown from hiding.
Use the following code in your template
<el-dropdown ref="dropdown" trigger="click">
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>
<el-select v-model="selectData" #change="handleChange">
<el-option value="1">Option 1</el-option>
<el-option value="2">Option 2</el-option>
<el-option value="3">Option 3</el-option>
</el-select>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
And this in your script
new Vue({
data: {
selectData: null
},
methods: {
handleChange() {
this.$nextTick(() => {
this.$refs.dropdown.show();
});
}
}
}).$mount('#app')
I work on Ionic v3 app and I'm trying to do something.
I've a HomePage with:
<ion-header>
<ion-navbar>
<ion-buttons *ngIf="showBackBtn" left>
<button ion-button icon-only class="my-style-for-modal">
<ion-icon name="arrow-back"></ion-icon>
</button>
</ion-buttons>
<ion-title>
{{ ttttt }} - {{ eeee }}
</ion-title>
</ion-navbar>
</ion-header>
<ion-tabs #globalTabs>
<ion-tab [root]="page1" tabTitle="1"></ion-tab>
<ion-tab [root]="page2" tabTitle="2 avis"></ion-tab>
<ion-tab [root]="page3" tabTitle="3"></ion-tab>
<ion-tab [root]="page4" tabTitle="4"></ion-tab>
<ion-tab [root]="page5" tabTitle="5"></ion-tab>
</ion-tabs>
In my Page1, I've:
<ion-content class="has-header" padding>
<ion-list >
<button ion-item (click)="menuSelected('test')">
{{ 'Test' | translate }}
</button>
<button ion-item (click)="logout()">
{{ 'Logout' | translate }}
</button>
</ion-list>
</ion-content>
When I click on button 'Test' I do this.nav.push(TestPage);
And I want on this page to show the hide button of the HomePage header changing the showBackBtn value.
Is it possible?
Create a method to change showBackBtn value on HomePage.ts:
showBackButton(): void {
this.showBackBtn = true;
}
Then you can inject the HomePage on TestPage.ts and call the method:
export class TestPage {
constructor(
#Inject(forwardRef(() => HomePage)) private homePage: HomePage
) {
this.homePage.showBackButton();
}
}