environement is for multiple URL that are alredy fixed in code, but i want that my clients can change URL after “ionic cordova build browser”
↧
Use Script to connect with web api after build
↧
Send data from one component to other
You can use angular router for this. or you can use @input or @output for this.
↧
↧
Ionic native Screen Orientation plugin not working
This was my last resort but it actually made it work for me. Just one note: “@latest” threw me an error, but without it was fine too, and now everything works. So really simply just:
ionic cordova plugin remove cordova-plugin-screen-orientation.ionic cordova plugin add cordova-plugin-screen-orientation
↧
How to change text shown on ion-select when value is changed?
I have a select in my code that looks like this.
<ion-select formControlName="location" (click)="clearSectionAndTask()">
<ion-select-option *ngFor="let location of locations" value="{{location.locationId}}">
{{location.locationName}}
</ion-select-option>
</ion-select>
The list of locations is retrieved from an API in JSON format.
The user is able to select a default location from the settings page which should then pre-select the drop down for him.
this.settings.getStandardLocation().then(val => {
if (val) {
this.formGroup.patchValue({location: val.id});
}
});
Doing it like this has the expected result of changing the value of the drop down to the correct id, but doesn’t actually select and thus change the value shown on the select itself.
Doing it with patchValue({location: val}) results into the value being set to the object rather than the id.
What is the right way to solve this?
Thanks.
↧
Angular HTTP Client
I dont geht any error or something. When executing the app in a simulated device in xcode everything works perfect, but only on a real device the data isnt visible. I am really confused. Does this mean that the problem is at my code (HTTPClient), or is it just a problem with the network?
I am sorry for writing such abstract stuff.
↧
↧
Ionic 4 loading interceptor can't dismiss loading
I am trying to create an Http interceptor to display loading in all the pages. But I am not able to dismiss the loading controller
I have followed this https://www.youtube.com/watch?v=IJWCpa_-MeU But the problem is loading is displayed infinitely.
Actually I am a bit new to these concepts. So please help me out.
Thank you very much
@Injectable()
export class HttpRequestInterceptor implements HttpInterceptor {
constructor(
private loadingCtrl: LoadingController,
) {}
intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
this.loadingCtrl.getTop().then(hasLoading => {
if (!hasLoading) {
this.loadingCtrl.create({
spinner: 'circular',
translucent: true
}).then(loading => loading.present());
}
});
return next.handle(request).pipe(
catchError(err => {
if (err instanceof HttpErrorResponse) {
switch ((<HttpErrorResponse>err).status) {
case 401:
console.log("401")
default:
return throwError(err);
}
} else {
return throwError(err);
}
}),
retryWhen(err => {
let retries = 1;
return err.pipe(
delay(1000),
tap(() => {
// this.showRetryToast(retries);
}),
map(error => {
if (retries++ === 3) {
throw error; // Now retryWhen completes
}
return error;
})
);
}),
catchError(err => {
return EMPTY;
}),
finalize(() => {
this.loadingCtrl.getTop().then(hasLoading => {
if (hasLoading) {
this.loadingCtrl.dismiss();
}
});
})
);
}
}
↧
routerLink not updating url value when changed
Hello,
I have been blocking for three days on a problem that I cannot solve.
I tried several solutions that I could find on the forums but it did not change anything.
I am developing a PWA, I have two “menus”, one for the desktop version which is displayed just below the header and the second for the mobile version which is displayed by clicking on “ion-menu-button”.
To display the articles, the application must know what type of articles it should display, for adults or children.
Example, to see adult articles: https://www.example.com/articles
Example, to see children’s articles: https://www.example.com/kids/articles
You will notice that the “kids” segment has been added.
All the sections have the same thing.
In the menu, I have a button that allows you to switch between adults and children regardless of the section.
The switch system works very well on the menu of the desktop version but not the menu for the mobile version.
The segment returns a value of “NULL” in the “routerLink” and even when I switch between modes the value does not change. When I debug and look at the logs, the value has changed and I can even display it next to the title of the link.
I use a “SegmentPipe” to return the correct value.
I noticed one thing, when the segment changes if I concat the variable « pages »
this.pages = this.pages.concat(...this.pages, ...this.pages);
The new added values have the right segment.
Thanks for your help.
// app.components.html
...
<ion-menu-toggle auto-hide="false" *ngFor="let page of appPages">
<ion-item [routerLink]="page.url | segment | async"
[routerLinkActive]="'active'"
[routerDirection]="'root'">
<ion-icon slot="start" [name]="page.icon"></ion-icon>
<ion-label>
{{page.title | translate}} {{page.url | segment | async}}
</ion-label>
</ion-item>
</ion-menu-toggle>
...
import {Pipe, PipeTransform} from '@angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import {trimSlashes} from '../shared/utils';
import {SettingsFacade} from '../store/settings/settings.facade';
@Pipe({
name: 'segment',
// pure: false
})
export class SegmentPipe implements PipeTransform {
segement$: Observable<string>;
constructor(private settingsFacade: SettingsFacade) {
this.segement$ = this.settingsFacade.segment;
}
transform(value: string): Observable<string> {
return this.segement$
.pipe(
map((segment: string) => {
return `/${trimSlashes(segment + value)}`;
})
);
}
}
↧
Help in sending Get Request in Ionic
Hi Geoff,
Unfortunately, it didn’t work too on my API. It keeps on responding with 406 error. I just don’t know what causes this issue.
↧
How to use capacitor-udp plugin
So the error seems like the plugin isn’t being provided. How are you importing the plugin? Are you including
import { Plugins } from "@capacitor/core";
const { UdpPlugin } = Plugins;
import {UdpPluginUtils} from "capacitor-udp";
↧
↧
How to use capacitor-udp plugin
Yes, i am:
import {Plugins} from '@capacitor/core';
const {UdpPlugin} = Plugins;
import {UdpPluginUtils} from 'capacitor-udp'; // if you want support for converting between ArrayBuffer and String
↧
How to use capacitor-udp plugin
try moving the const {UdpPlugin} part to inside the process method
↧
Text to speech versions not working
Is there a simple API to call device sound system?? I’m getting fed up cuz I’m using capacitor and tried all Cordova plug ins npms etx
In my talking potato app
Cheers
↧
How to use capacitor-udp plugin
Still the same error.
↧
↧
How to use capacitor-udp plugin
I just created a project and tested with this
import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
constructor() {}
async process() {
const { UdpPlugin } = Plugins;
let info = await UdpPlugin.create();
console.log(info);
}
}
And the create call worked
↧
Nativescript like code sharing in Ionic (mono repo)?
Is it possible to share the “code” for a regular webpage and an ionic app in a Nativescript like fashion?
When developing Nativescript Angular applications, multiple html and css files are provided per component, one for each platform.
So could e.g. a component in an Ionic app be structured like this:
- hello-world.component.ts
- hello-world.component.html (the web html file)
- hello-world.component.ionic.html (the ionic html file)
- hello-world.component.scss (the web stylesheet)
- hello-world.component.ionic.scss (the ionic stylesheet)
↧
How can i style a shadow DOM in Ionic 4
ive tried but got an error message ‘cannot read property ‘shadowRoot’ of null’, can you help me with that ? sorry if im asking a dumb question.
↧
Ion-searchbar: pass filtered list results to another page
I´m trying to pass filtered list results to another page. I´m using the ion-searchbar in my filter-page.html:
<ion-searchbar [(ngModel)]="searchTerm" (ionChange)="setFilteredItems(searchTerm)"></ion-searchbar>
And here my typescript:
import { Component, OnInit } from '@angular/core';
import { searchService} from '../../services/search.service';
import { searchInter} from '../../interface/search';
@Component({
selector: 'app-filter',
templateUrl: './filter.page.html',
styleUrls: ['./filter.page.scss'],
})
export class FilterPage implements OnInit {
searchTitle$: SearchInter[] = [];
public items: any;
constructor(
private searchService: SearchService) {
}
ngOnInit() {
}
// Searchbar: set filtered Vorhabentitles
setFilteredVorhaben(searchTerm) {
this.searchService.getTitlesForSearch(searchTerm).subscribe(vorhaben => {
this.searchTitle$ = vorhaben;
});
}
}
The request from the service works fine, I get my filtered items.
But how can I pass these filtered list to another page? Maybe I only want to to integrate my searchbar in a modal window and want press the results button to see these filtered results in the dashboard page.
Any idea?
↧
↧
V4 : back-button doesn't exit app [solved--Tutorial]
You have just to apply this on the homepage or the page from where you want the user to be able to quit the app.
Not on all the pages !
On entering the page, the subscription makes it possible. On leaving, the unsubscribe prevents to exit the app from the other pages
↧
FCM notifications on ionic 3 issue
If at all viable, I would recommend upgrading your ionic framework to the latest version.
But if that is not viable, here is how I resolved the issue for one of our legacy projects.
You can force firebase to use the correct version of firebase-messaging by changing the following in platforms\android\project.properties, platforms\android\app\build.gradle and plugins\cordova-plugin-firebase-lib\plugin.xml files:
- com.google.firebase:firebase-messaging:19.+
+ com.google.firebase:firebase-messaging:20.+
↧
Close Modal with Button
For anyone still wondering, i just found a better solution that doesnt require pop() and you use it in your modal closeModal() { this.modalController.dismiss(); }
and of course you need to import the modal controller on your modal component
import { ModalController, NavParams} from '@ionic/angular';
↧