I am trying to delete a card from my page, I want to remove it as soon as it is swiped and update the contents dynamically without using this code to refresh my entire page:
reloadPage() {
this.navCtrl.setRoot(this.navCtrl.getActive().component);
}
ion card:
<ion-card *ngFor="let e of tasks;let i = index" (swipe)="delete(i)">
<ion-card-header>
<ion-label>{{e.taskName}}</ion-label>
</ion-card-header>
<ion-card-content>
<p>{{e.task}}</p>
</ion-card-content>
</ion-card>
ts:
delete(i) {
this.tasks.splice(i, 1);
let newTask = JSON.stringify(this.tasks);
this.nativeStorage.setItem('tasks', newTask);
this.reloadPage();
}
Splicing the entry from your tasks array should suffice, no need to reload your page:
delete(i) {
this.tasks.splice(i, 1);
}
See this Stackblitz
Related
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)
}
I have a form in my ionic project that has 2 dropdown menus of selection ion-select.
When the user selects an option in the first dropdown menu, it generates the options in the second dropdown list. This works well.
When I add new fields, I can reestablish the values of the first list displayed with [(ngModel)] = null in .ts, but I have not been able to reestablish those in the 2 drop-down list.
Image of error
,
image
This is the markup I have
<div formArrayName="sucursales" margin-bottom>
<!--generate new registration fields-->
<section [formGroupName]="i" *ngFor="let tech of form.controls.sucursales.controls; let i = index">
<ion-item>
<ion-icon name="list" item-start></ion-icon>
<ion-label>Departamento</ion-label>
<ion-select [(ngModel)]="locate" name="country" #country formControlName="country" (ionChange)="CountryChange($event)">
<ion-option *ngFor="let department of ubicacion; let i = index" value="{{department.departamento}}">{{department.departamento}}</ion-option>
</ion-select>
</ion-item>
<ion-item *ngFor="let x of selectedMunicipality">
<ion-icon name="list" item-start></ion-icon>
<ion-label>Municipio</ion-label>
<ion-select [(ngModel)]="locates" name="state" #state formControlName="state">
<ion-option *ngFor="let municipio of x.ciudades" value="{{municipio}}">{{municipio}}</ion-option>
</ion-select>
</ion-item>
And this id my code .ts:
this.http.get('http://localhost/ionic-php-mysql/colombia.json').map(res => res.json()).subscribe(
data => {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.ubicacion = data.colombia;
},
error => {
console.log("Oops!", error);
}
);
CountryChange(value: string) {
this.locate = null; //It works well
this.locates = null; //it does not work
this.selectedMunicipality = this.ubicacion.filter(item => item.departamento === value)
}
I want the second ion-select to select according to the first ion-select, and if I add new fields dynamically that the new values are independent.
I finally resolved.
buildGroup(): FormGroup {
return this.fb.group({
selectedSubcategory: [""],
});
CountryChange(value, index:number) {
this.productos.controls[index]selectedMunicipality = this.ubicacion.filter(item => item.departamento === value)
}
and in HTML
(ionChange)="CountryChange($event,i)"
<ion-item *ngFor="let x of tech.selectedMunicipality">
When data get from ant+ device, page cannot show that on time.
code of ts:
this.antplus.subscribeHR(ID, (response) => {
this.heartrate = response.heartRate;
}, (error)=>console.log("error:" + error));
code of HTML:
<ion-item>
<button ion-button (click)="stopSearch();">Stop</button>
{{heartrate}}
</ion-item>
The value of heartrate just will update when page change.
This problem I also get on ionic-Native/stepcounter
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;
}
}
}
i am creating an Listing ionic application where i am displaying feeds from an API in the home page. It also has some filter options which is an actionsheet with options such as near by, populer and so on. What i want to do is when user click one of the filter for example populer, i want to do display the new feeds on the same page. How can i do so ??
My code base is as below
home.ts
constructor(....){
this.getFeeds();
}
//make api call to get the feeds
getFeeds(){
const data = localStorage.getItem('userToken');
this.userPostData.api_token= data;
this.authService.postData(this.userPostData,'feeds').then((result)=>{
this.responseData = result;
})
}
//Feeds by location
//Actionsheet
filters() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Sort Events by',
buttons: [
{
text: 'Location',
icon:'pin',
handler: () => {
//Make api call to feeds based on location
}
},
{
text: 'Popularity',
icon:'people',
handler: () => {
//Make api call to feeds based on location
}
}
]
});
actionSheet.present();
}
And my home.html is
<ion-card *ngFor="let item of responseData?.feed" tappable (click)="viewDetail(item.id)">
<div class="event-image-holder search-list">
<img src="http://localhost:8000/{{item.photo_url}}"/>
<div class="event-attendee-count">
<ion-icon name="people"></ion-icon> {{item.attendees.length}} are going
</div>
</div>
<ion-card-content>
<div class="event-info">
<div class="event-time">
<!-- 04 Feb -->
{{item.gmt_date_set | date:'dd MMM'}}
</div>
<div class="event-descp">
<h2>{{item.title}}</h2>
<p>
{{item.club.name}}
</p>
</div>
</div>
</ion-card-content>
</ion-card>
After some research here and there tutorials from youtube and udemy, i found that when ever you change the data of the variable it automatically change on the view page.
So in my case if i override the data of this.responseData it will automatically updated on the view page with out much doing.