I want to achieve below two functionalities :
toggle button ON/OFF. (Not want new details page to be open here)
clicking on CardView new details page should open.
On clicking cardView new details page opens, this working as expected.
but, currently on hitting toggle button new page opens. I need help to avoid it.
Html Code for cardview:
<ion-list *ngFor="let individual_room of data?.rooms">
<ion-list-header>
<ion-label>{{ individual_room.name}}</ion-label>
</ion-list-header>
<ion-grid>
<ion-row>
<ion-col *ngFor="let device of individual_room.devices">
<ion-card (click)="openDetailsWithState(device)">
<ion-col><img src="assets/icon/favicon.png" /></ion-col>
<ion-card-content>
<ion-card-title> {{ device.name }} <ion-badge item-end>{{ device.company }} </ion-badge> </ion-card-title>
<ion-toggle (ionChange)="deviceStatusChange(device)" [checked]="device.state =='ON'"></ion-toggle>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
home.page.ts :
deviceStatusChange(device: any) {
device.state = device.state === 'ON' ? 'OFF' : 'ON'
console.log('device toggle switch : ' + device.state)
}
openDetailsWithState(device: any) {
let navigationExtras: NavigationExtras = {
state: {
device: device,
},
}
this.router.navigate(['details'], navigationExtras)
}
Related
I created scrollTo functionality by clicking on an icon in a sidebar.
The scrolling works but the ion-header is moved out of view when scrolling to the desired location.
Here is a video of the behavior I am describing:
https://drive.google.com/file/d/1XeCr0RKOlas_9PpZZTUx5pEteA8Np42-/view?usp=sharing
Almost identical template works with Ionic 4 & Angular
Any ideas on what is wrong here?
Template
<template>
<ion-modal>
<ion-header>
<ion-toolbar>
// Close modal button
</ion-toolbar>
<ion-searchbar />
<div>
// Vertical column of scroll to anchor tags
<a #click="scrollTo('Math')">
<ion-icon :icon="calculator"/>
</a>
</div>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header id="Math">
<ion-label>
Math
</ion-label>
</ion-list-header>
</ion-list>
</ion-content>
</ion-modal>
</template>
scrollTo Function
function scrollTo (category: string) {
let elementId = category.replace(' ', '')
let subject = document.getElementById(elementId)
if (subject) {
subject.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
}
I have a HomePage(main page) from which multiple modals are opened (modal1,modal2,modal3). On the last modal 'modal3', I have an ion-search with an ion-virtual-scroll to populate the results which will be show in a card.
Each of these card has an router-link attached to it.
Upon clicking on the card it should open a 'Page' which is associated with the id and present, but since its a page it does not show on top of the modal and is only visible once the modals are dismissed.
I have tried to follow the ion-nav from here but I couldn't get it working and got me all confused.
Modal 3 Code...
<ion-virtual-scroll [items]="this.speclFun.questions" approxItemHeight="185px">
<ion-card *virtualItem="let itemMod;" [routerLink]="['/main/user/tabs/home/view',itemMod.id]" (click)="openPage()">
<ion-row>
<ion-col size=" 12">
<ion-card-header class="card-header">
<ion-icon name="help-circle-outline" style="margin-right: 5px;"></ion-icon>
<ion-label>{{ itemMod.title }}</ion-label>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row>
Modal 3 typeScript:
async openPage() {
const modal = this.modalController.create({
component: ModalBaseComponent,
componentProps: {
rootPage: AnswerPage
}
})
}
Shared Components module is declared as an import in my homepage.module.ts file.
Shared-component module :
modal-base component :
I have used ion-tabs and side-menu for change route the app, both uses routerLink. And when i press Home tab in ion-tab to go back to home page inside other pages, route changed to home but home page constructor method and onInit methods does not invoke.
side-menu.component.ts
<ion-app>
<ion-split-pane contentId="main-content">
<ion-menu *ngIf="isAuthenticated$ | async" contentId="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<div class="menu-header">
<ion-list-header>
<img src="assets/wa-logo.ico">
</ion-list-header>
<ion-note></ion-note>
</div>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
<ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
<ion-footer>
<ion-menu-toggle auto-hide="false">
<ion-item
(click)="logout()"
routerDirection="root"
lines="none"
detail="true"
>
<ion-icon
slot="start"
ios='log-out-outline'
md="log-out-sharp"
></ion-icon>
<ion-label> Logout </ion-label>
</ion-item>
</ion-menu-toggle>
</ion-footer>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
<ion-tabs *ngIf="isAuthenticated$ | async">
<ion-tab-bar [translucent]="true" slot="fixed">
<ion-tab-button (click)="onClick()">
<ion-icon name="home"></ion-icon>
<ion-label> Home </ion-label>
</ion-tab-button>
<ion-tab-button [routerLink]="['/features/new-request']">
<ion-icon name="document-text"></ion-icon>
<ion-label> New Request </ion-label>
</ion-tab-button>
<ion-tab-button [routerLink]="['/features/prev-requests']">
<ion-icon name="reader"></ion-icon>
<ion-label> All Requests </ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-split-pane>
</ion-app>
So if i go inside prev-request page using ion-tab and once using hardware back button or ion-toolbar back button to changes route back to home page constructor and ngOnInit does not invoke, but if i route using side menu and go back with hardware back button or ion-toolbar back button constructor and ngOnInit methods are invoked.
prev-req.page
constructor(private _preReqService: PrevReqService,private platform: Platform,
private _modal: ModalService,
private _router: Router) {
this.platform.backButton.subscribeWithPriority(10, () => {
this._router.navigate(['/features/home'])
});
}
Still i don't have any clue why this happens.
Any idea why this happens ?
If you want to execute a function every time you go to a page Use Ionic Page Life Cycle.
ionViewWillEnter: Fired when the component routing to is about to animate into view.
ionViewDidEnter: Fired when the component routing to has finished animating.
ionViewWillLeave: Fired when the component routing from is about to animate.
ionViewDidLeave: Fired when the component routing to has finished animating.
export class ExamplePage implements OnInit {
constructor(){
}
ionViewWillEnter(){
console.log('Will Enter Fired') // will fire every time to go to a page.
}
}
Ionic Life Cycle Docs
I am trying to show popover when the user click on a button. However, when I position the button to right of the screen, the popover does not show up.
This works, file: basket.page.html
<ion-button slot="icon-only" shape="round" fill="outline" (click)="presentPopover($event)" >
<ion-icon button size="large" name="more"></ion-icon>
</ion-button>
<ion-card-title>
{{ basket.name }}
</ion-card-title>
but this does not work, when I click on the button, the popover does not show up. I just added class="float-right" to ion-button tag.
<ion-button class="float-right" slot="icon-only" shape="round" fill="outline" (click)="presentPopover($event)" >
<ion-icon button size="large" name="more"></ion-icon>
</ion-button>
<ion-card-title>
{{ basket.name }}
</ion-card-title>
I have this in basket.page.ts
async presentPopover(ev: any) {
this.popover = await this.popoverController.create({
component: PopoverComponent,
event: ev,
translucent: true,
componentProps: { basketId: this.basketId }
});
return await this.popover.present();
}
I am using ionic 3, and looping ion-card with like using ngFor. I want to know how can I react with the user when user click the like/unlike button in each ion-card without reload the list.
<ion-card *ngFor="let u of users">
<p>{{u.name}}</p>
<button ion-button [hidden]="u.isliked=='1'" (click)="like(u.id)">like</button>
<button ion-button [hidden]="u.isliked!='1'" (click)="unlike(u.id)">unlike</button>
</ion-card>
You can make use of the *ngIf operator. This won't hide the element like the hidden property, but actually removes the element from the DOM.
(made u.isLiked into a boolean because I think it's cleaner that way, personal preference. Also changed (click) to (tap), see the answer on ionic2 tap vs click for more details.)
<ion-card *ngFor="let u of users">
<p>{{u.name}}</p>
<button ion-button *ngIf="u.isLiked" (tap)="like(u.id)">like</button>
<button ion-button *ngIf="!u.isliked" (tap)="unlike(u.id)">unlike</button>
</ion-card>
And in your ts:
like(userId) {
for(let user of this.users) {
if(user.id == userId) {
user.isLiked = true;
}
}
}
unlike(userId) {
for(let user of this.users) {
if(user.id == userId) {
user.isLiked = false;
}
}
}