@skyscraperaki001 wrote:
Hello Everyone I am new to ionic and I desperately need your help. I have a web service which returns this kin of json data
return response()->json([
‘questions’=>$questions,
'exam_ID=>$exam_ID,
‘modulechoices’=>$modulechoices,
‘learningpath_ID’=>$learningpath->learningpath_ID
]]);
I just want to know how to access them in ionic view
Posts: 1
Participants: 1
@Samide wrote:
Hello I’m new to Ionic 4 I want to fill an Array from a local json file
Please someone with Help this is my code
Home.pages.ts
Posts: 1
Participants: 1
@salehasadi wrote:
hi, how should scroll programmatically to specific item, when height of the items of virtual scroll is not equal!?
Posts: 1
Participants: 1
@fahd123 wrote:
I testing app in my phone androird but not showing , he only showing in desktop
Why???
Posts: 1
Participants: 1
@NorthFred wrote:
I’m creating an app with tabs in ionic3:
Ionic: ionic (Ionic CLI) : 4.9.0 (C:\Users\_____\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.2.3I have this code in my tabs.ts, which uses “NavParams” to keep track of the tab indices when navigating to a different page:
import { Component } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { IonicPage, NavParams } from 'ionic-angular'; import { Tab1Root, ......Tab5Root } from '../'; @IonicPage() @Component({ selector: 'page-tabs', templateUrl: 'tabs.html' }) export class TabsPage { tab1Root: any = Tab1Root; ... tab5Root: any = Tab5Root; tab1Title = " "; ... tab5Title = " "; tabIndex: number; constructor( navParams: NavParams, public translateService: TranslateService ) { translateService.get(['TAB1_TITLE', ......., 'TAB5_TITLE']).subscribe(values => { this.tab1Title = values['TAB1_TITLE']; .... this.tab5Title = values['TAB5_TITLE']; }); this.tabIndex = 0; if (navParams.data.index) { this.tabIndex = navParams.data.index; } } }In ‘app.comonent.ts’, I open the tabs with this function:
openPage(page) { this.menu.close(); this.nav.setRoot(page.component, {index: page.index}); }I have used the same code in an OLDER ionic project, where everything was working fine. For this newer project, I am getting following NullInjector Error:
ERROR Error: "Uncaught (in promise): Error: StaticInjectorError(AppModule)[TabsPage -> NavParams]: StaticInjectorError(Platform: core)[TabsPage -> NavParams]: NullInjectorError: No provider for NavParams!As far as I remember, NavParams does not need importing/provision in ‘app.module.ts’. So where is this coming from?
Does anyone have any clue what I might be doing wrong?
Posts: 1
Participants: 1
@ioclaudio wrote:
Hi,
according to you, what are the advantages of creating a hybrid app with Ionic 4 rather than with pure Angular?Claudio
Posts: 1
Participants: 1
@raz-ride4you wrote:
Ionic 4 with AngularJS:
<ion-input ng-model="formData.example"></ion-input> {{formData.example}}The data is not getting binded.
The project is setted up with vanilla JS, is there any implementation that can make this to be working with AngularJS?
Posts: 1
Participants: 1
@elaias wrote:
Hi everyone!
I’m having a CORS related issue.
Ionic 3, Angular 5, Java, Spring
The requests from browser are sent fine BUT I can’t send them from iOS Ionic Dev App, it doesn’t reach the server.
How do I solve this issue?
Thanks in advance!
Posts: 1
Participants: 1
@retorres9 wrote:
I’m trying to get the values from my API but I can’t show the in ion-list.
In the image you can see that the data is loaded but I can’t show them in ion-list
I try tho show the in this way<ion-list> <ion-item *ngFor="let item of (results | async)"> <ion-label text-wrap>{{item.nombreProducto}}</ion-label> <ion-button color="light"><img src="../../assets/icon/binoculars.png" alt="" (click)="presentarModal()" item-end></ion-button> <ion-button color="light"><img src="../../assets/icon/cart.png" alt="" (click)="addCart()" item-end></ion-button> </ion-item> </ion-list>I’ve created a service that have a method called getAll
getAll(): Observable<any>{ return this.http.get(`${this.url}`).pipe( map(results=>{ console.log('Data', results); return results['Data']; }) );And in my home.page.ts the getAll method contain this
getAll(){ this.results = this.productService.getAll(); }What i’m doing wrong?
Posts: 1
Participants: 1
@JerryBels wrote:
Hello,
Deeplinking in an Ionic hybrid app feels like something that should be really straightforward - but I really struggle to find an ideal solution.
Official plugin https://github.com/ionic-team/ionic-plugin-deeplinks is said now to be “community maintained” - looking at the code and the issues tracker it seems really not maintained that well. I tried it and got a big bug ( https://stackoverflow.com/questions/54936778/ionic-issue-with-prod-building )
On the github page, Ionic recommends another great solution : https://github.com/BranchMetrics/cordova-ionic-phonegap-branch-deep-linking but this one is part of something much bigger which I don’t need at all.
Finally I found also https://github.com/EddyVerbruggen/Custom-URL-scheme which seems to recommend https://github.com/nordnet/cordova-universal-links-plugin for deeplinking - that one being archived and not maintained anymore.
What solution would you recommend, and if it’s one of these three, how to overcome their flaws ?
Posts: 1
Participants: 1
@Ronbd53 wrote:
I am realy Confused in ionic 4.10.3 . after crating a android application . when i am going to test this on my android device . i realize , my application did not exit when i tap my back button . don’t know why. but its not good for production . if ionic developer team delete this back button future , they must assain a function that help to exit/close a application after clicking the button . i tryed navigator[‘app’].exitApp() . but this function only work blank project . but it does not work for side menu project . Any one here , who can tell me . how i can fix it ? i am really confused .
Posts: 1
Participants: 1
@gentlemanoi wrote:
Cannot add cordova plugin:
ionic cordova plugin add https://github.com/taracque/cordova-plugin-braintreewith this error:
(node:19084) UnhandledPromiseRejectionWarning: CordovaError: Failed to fetch plugin https://github.com/taracque/cordova-plugin-braintree via registry. Probably this is either a connection problem, or plugin spec is incorrect. Check your connection and plugin name/version/URL. Error: cmd: Command failed with exit code 1 Error output: npm ERR! code 1 npm ERR! Command failed: git submodule update -q --init --recursive npm ERR! C:\Program Files\Git\mingw64/libexec/git-core\git-submodule: line 7: basename: command not found npm ERR! C:\Program Files\Git\mingw64/libexec/git-core\git-submodule: line 7: sed: command not found npm ERR! C:\Program Files\Git\mingw64/libexec/git-core\git-submodule: line 19: .: git-sh-setup: file not found npm ERR! npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Dell\AppData\Roaming\npm-cache\_logs\2019-03-03T13_48_13_743Z-debug.log at C:\Users\Dell\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\src\plugman\fetch.js:173:37 at _rejected (C:\Users\Dell\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:864:24) at C:\Users\Dell\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:890:30 at Promise.when (C:\Users\Dell\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:1142:31) at Promise.promise.promiseDispatch (C:\Users\Dell\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:808:41) at C:\Users\Dell\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:624:44 at runSingle (C:\Users\Dell\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:137:13) at flush (C:\Users\Dell\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:125:13) at process._tickCallback (internal/process/next_tick.js:61:11) (node:19084) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)Thank you.
Posts: 1
Participants: 1
@faridb wrote:
Hello,
I have the following error :
ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[Tab1Page -> EventProvider]: **
** StaticInjectorError(Platform: core)[Tab1Page -> EventProvider]: **
** NullInjectorError: No provider for EventProvider!
Error: StaticInjectorError(AppModule)[Tab1Page -> EventProvider]: **
** StaticInjectorError(Platform: core)[Tab1Page -> EventProvider]: **
** NullInjectorError: No provider for EventProvider!This is my code in tab1
this.event.loadEventsByUser(2)
.then((res:Event)=>
{
this.EventsLoad = res;
})
.catch(err => console.log(err));And this is my code in EventProvider.ts :
loadEventsByUser(userid) {
return new Promise((resolve, reject) => {
console.log("this.userid = " + this.UserId);
this.http.api().get(‘Events/GetEventsByUserId’, { search: { userid: userid } })
.subscribe((data: any) => {
console.log("Data = " + data)
resolve(data);
})
});
}And this is my code in httpclient.ts
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
return from(this.setHeaders(options)).pipe(mergeMap(options => super.post(url, options)));
}
Can anyone help me ? Where am’I Wrong ?
Tks for your help
Posts: 1
Participants: 1
@ReaXioN wrote:
So here’s my situation, I hope you can help me out
- on an App, i have an external URL that i get from my WordPress Posts. this is how the element appears
<a target="_blank" rel="noopener noreferrer" href="https://whateverdomain.co.za/"><strong><u>Stream song now</u></strong></a>
- when I click on it; instead of opening the external or InApp browser. I Want to execute my own function
any suggestions on how to do this or code Snippets would be highly Appreciated
Thank You
Posts: 1
Participants: 1
@AmberS wrote:
Hi, I am trying to get the list of names from my Firebase Realtime Database. Below you will see the steps I have taken to do this. However, my problem is that nothing is showing when I am on the page! If anyone have any better suggestions, please let me know! To note: I am only reading the data from Firebase, not writing, deleting or creating.
Firebase Database Structure:
0 Email: "someoneEmail@gmail.com" Location: "Building 0" Name: "Someone Name" Phone Number: "333-3333"Copy my credentials to a a new file in src/app/credentials.ts
export var firebaseConfig = { apiKey: "Your credentials here", authDomain: "Your credentials here", databaseURL: "Your credentials here", projectId: "Your credentials here", storageBucket: "Your credentials here", messagingSenderId: "Your credentials here", };Initialized Firebase in app.module.ts and inside
@NgModule()look for yourimportsarrayimport { firebaseConfig } from './credentials'; import { AngularFireModule } from '@angular/fire'; import { AngularFirestoreModule } from '@angular/fire/firestore'; import { AngularFireStorageModule } from '@angular/fire/storage'; // This is inside @NgModule() import { AngularFireDatabaseModule } from '@angular/fire/database'; imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, AngularFireModule.initializeApp(firebaseConfig), AngularFirestoreModule, AngularFireDatabaseModule],Added this line inside the
initializeAppfunction for running the Firebase configuration in app.component.ts.
firebase.initializeApp(firebaseConfig);Open and edit
src/app/directory/directory-list.page.tsthen add this import.import * as firebase from 'firebase'; import { LoadingController } from '@ionic/angular';Declare variables before the constructor to hold list and referencing Firebase database.
infos = []; ref = firebase.database().ref('infos/');Add this Firebase function to listening any value changes from Firebase Database.
constructor(private router:Router , private location:Location,public loadingController: LoadingController) { this.ref.on('value', resp => { this.infos = []; this.infos = snapshotToArray(resp); }); }Add this constant function below the Class block for converting Firebase response to an array.
export const snapshotToArray = snapshot => { let returnArr = []; snapshot.forEach(childSnapshot => { let item = childSnapshot.val(); item.key = childSnapshot.key; returnArr.push(item); }); return returnArr; };Trying to show the list in directory-list.page.html
<ion-content> <ion-card *ngFor="let info of infos"> <ion-card-header> {{ info.Name }} </ion-card-header> </ion-card> </ion-content>Again, my problem is that nothing is actually showing, the page is just blank except for the styling of the background. Therefore, I am not getting the list of names from Firebase Realtime Database. I really need help as soon as possible
Posts: 1
Participants: 1
@akmca1628 wrote:
I have created frontend in ionic 3. Currently I am using php as a backend on localhost.
what steps i have to follow to host php backend and use it as a backend for ionic 3 frontend.
Below is my code where i am accessing php files for backend on localhost.
So what i have to change if i host php files .import { Http,Headers,RequestOptions } from '@angular/http'; import {Injectable} from '@angular/core'; import 'rxjs/add/operator/map'; @Injectable() export class PostProvider { server:string ="http://localhost/myproject/"; constructor(public http: Http) {} postData(body,file){ let type="application/json; charset-UTF-8"; let headers=new Headers({'Content-Type':type}); let options=new RequestOptions({headers:headers}); return this.http.post(this.server+file,JSON.stringify(body),options) .map(res=>res.json()); } }
Posts: 1
Participants: 1
@anjildhamala1 wrote:
How do I work with global view encapsulation ‘none’ with Ionic Tabs? My tabs rendered fine before I set the global View Encapsulation to none. After doing so, I can see that the component is being mounted (via. constructor logs). However, I don’t seem the html being rendered.
Posts: 1
Participants: 1
@eversonsarcevic wrote:
I’m trying to open an api link using inappbrowser. It is possible?
<div *ngIf="post.featured_image"> <ion-img padding-top class="featured-image" [src]="post.featured_image"></ion-img> <div class="center-message"> <div class="banner2"> <h3 [innerHTML]="post.title.rendered"></h3> <p [innerHTML]="post.content.rendered"></p> </div> </div> </div>{
This is the api I’m using.
- id: 74734,
- date: “2019-02-28T15:45:40”,
- date_gmt: “2019-02-28T18:45:40”,
- guid: {
- rendered: “https://mundohype.com.br/?p=74734”},
- modified: “2019-02-28T15:45:40”,
- modified_gmt: “2019-02-28T18:45:40”,
- slug: “detetive-pikachu-novo-trailer-com-aparicao-do-mewtwo”,
- status: “publish”,
- type: “post”,
- link: “https://mundohype.com.br/noticias/detetive-pikachu-novo-trailer-com-aparicao-do-mewtwo/”,
- title: {
- rendered: “Detetive Pikachu Novo trailer com aparição do MewTwo”},
Posts: 1
Participants: 1
@DMoney wrote:
I’ve been unable to set a background image in Ionic 4. I’ve tried
ion-content { --background: #fff url("../../../assets/img/login-image.jpg") no-repeat center center / cover; }and
ion-content {
background-image: url("…/…/…/assets/img/login-image.jpg");
-webkit-background-image: url("…/…/…/assets/img/login-image.jpg");
background-repeat: no-repeat;
background-size: cover;
}I’m certain the relative paths are correct because if I change them I get a compile error.
page-details { ion-content { --background: #fff url("../../../assets/img/login-image.jpg") no-repeat center center / cover; // background-image: url("../../../assets/img/login-image.jpg"); // -webkit-background-image: url("../../../assets/img/login-image.jpg"); // background-repeat: no-repeat; // background-size: cover; } form { margin-bottom: 32px; button { margin-top: 20px !important; } } p { font-size: 0.8em; color: #d2d2d2; } ion-label { margin-left: 5px; } ion-input { padding: 5px; } .invalid { border-bottom: 1px solid #ff6153; } .error-message { min-height: 2.2rem; ion-label { margin: 2px 0; } } } `type or paste code here`
Posts: 1
Participants: 1
