Thats Great… 
↧
Ionic run android works BUT apk does not access internet
↧
Removing space between ion-header and ion-content
↧
↧
Removing space between ion-header and ion-content
Hi!
Have you inspect the screen? Maybe, there is a margin or padding between ADDITIONAL MATHEMATICS and C1:INTRODUCTION TO PHYSICS and you can change it.
↧
Focus is not pointing to first input
Hi all,
It was worked for me in another way,
<ion-item class="input-has-focus">
Just I added the input-has-focus to my ion-item, Soo issue was fixed
↧
[Ionic V4]How to remove last-child bottom border of ion-item in Ionic4
That’s helped thank You
↧
↧
Ionic 4 - Network - Run in Angular Zone
Hi everyone,
recently I faced a problem with the Ionic Network library.
When I tried to change the UI on a network type change (connection or disconnection) the code is run but the UI does not change at all …
After some headaches, some strange logs ([…] chages outside Angular zone […]), and some Google searches … I found something.
It seems the Ionic Network library is run outside the Angular Zone (I’m quite noob with Angular, so at first I did not know what it meant …) even if this library is specified to work with Angular … (@ionic/network/ngx) …
So I think it is nice to share my method (maybe not the best, but it works ^^).
Step 1 : Creation of a pipe to run observable in the Angular zone
src/app/services/observable-util.service.ts
import {NgZone} from '@angular/core';
import {Observable, OperatorFunction} from 'rxjs';
export function runInZone<T>(zone: NgZone): OperatorFunction<T, T> {
return (source) => {
return new Observable(observer => {
const onNext = (value: T) => zone.run(() => observer.next(value));
const onError = (e: any) => zone.run(() => observer.error(e));
const onComplete = () => zone.run(() => observer.complete());
return source.subscribe(onNext, onError, onComplete);
});
};
}
Step 2 : Wrapping Ionic Network in a Service with «runInZone» pipe
src/app/services/network.service.ts
import {Injectable, NgZone} from '@angular/core';
import {Network} from '@ionic-native/network/ngx';
import {Observable} from 'rxjs';
import {runInZone} from './utils/observable-util.service';
/**
* Network service in Angular zone
*/
@Injectable({
providedIn: 'root'
})
export class NetworkService {
constructor(private network: Network, private zone: NgZone) { }
get Connection(): {
UNKNOWN: string;
ETHERNET: string;
WIFI: string;
CELL_2G: string;
CELL_3G: string;
CELL_4G: string;
CELL: string;
NONE: string;
} {
return this.network.Connection;
}
/**
* Network type
*/
get type(): string {
return this.network.type;
}
/**
* Returns an observable to watch connection changes
*/
onChange(): Observable<any> {
return this.network.onChange().pipe(runInZone(this.zone));
}
/**
* Get notified when the device goes offline
*/
onDisconnect(): Observable<any> {
return this.network.onDisconnect().pipe(runInZone(this.zone));
}
/**
* Get notified when the device goes online
*/
onConnect(): Observable<any> {
return this.network.onConnect().pipe(runInZone(this.zone));
}
}
Step 3 : Use the new network service in place of Ionic Network
For example, trigger an ngrx redux store action
[…]
import {NetworkService} from './services/network.service';
@Component([…])
export class AppComponent implements OnInit {
constructor(
[…]
private store: Store<RootStoreState.State>,
private network: NetworkService,
[…]
) {}
[…]
ngOnInit() {
this.network.onDisconnect().subscribe(() => this.store.dispatch(new ConnectionStatusStoreActions.Disconnect()));
this.network.onConnect().subscribe(() => this.store.dispatch(new ConnectionStatusStoreActions.Connect({network: this.network.type})));
}
[…]
}
Step 5 : The UI is refreshed on connection changes
You can chill and breath ^^
↧
Could not find org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.3.60-eap-25
Hello. I’m having the same issue and I’ve tried this solution but it didn’t work for me. I’m on ionic4 and there’s no cordova-support-google-services folder so I made the changes in platforms/android/build.gradle
I appreciate further help.
My gradle version is 6.1.1 and the project classpath link to 3.3.0. Could this also be an issue?
↧
Removing space between ion-header and ion-content
Sorry this may sound dumb, but how do I inspect the screen?
↧
Ionic responsive
hello
I Use Ionic and Angular. I really need Learn Ionic Responsive, but I cant Understand it. can you help me with a introduce toturial film…
I am Begginer
↧
↧
Steps to have a new working custom component
I’m new to Ionic, I’m using v4, I’m new to Angular and I’m new to Typescript too, so please bear with me and forgive me if I make dumb questions. I’m on Linux.
I’ve started a new app with
$ ionic start
[...]
Project name: comptest
Framework: Angular
Starter template: tabs
[...]
First things first, I try it:
$ cd comptest
$ ionic serve -l
[...]
? Install @ionic/lab? Yes
[...]
the browser opens up and tha app works ok. Now I try to generate a new custom component:
$ ionic generate component mySpan1
[...]
[OK] Generated component!
and try to use that in my tab1 page, so I edit tab1.page.html and add my-span1 tag:
<ion-content>
<my-span1></my-span1>
<ion-card class="welcome-card">
<img src="/assets/shapes.svg" alt="" />
Now tab1 doesn’t work anymore. In the browser console I get the error:
‘my-span1’ is not a known element
Google is my friend, and it leads me here: Can’t get ionic v4 CLI generated component to work
I’ve tried to follow the suggestions in that thread, but when it came down to creating a new module I got lost, since the thread doesn’t show how to do that and “ionic generate module” does not seem to exist.
Can you please guide me step by step, or hand me a link to some docs that guide me step by step?
Thanks in advance.
↧
Website designing in Bangalore
Which company provide Best Website Designing at affordable prices in Bangalore?
↧
Network plugin + Observable = UI not refreshed
Ok I found the solution …
More explanations in this post :
My solution
↧
Network plugin + Observable = UI not refreshed
Thanks but this does not work well.
I found a more elegent and 100% working solution.
If you’re interested in : My solution
↧
↧
Ionic cordova run ios gives "Error: Error code 65 for command"
I have the same, any solution?
↧
Setting field values dynamically from rest api
can u please provide me type script code
↧
Removing space between ion-header and ion-content
It is not dumb.
On the page you show in the posted image, next to the button to see the app like in a device, there is a button with an arrow. If you click in it, you can click on screen and watch and work with their css properties.
Other option, in the same page, is to click on Element tab. In element tab you can search the elements and watch and work with their css properties.
↧
Steps to create working custom components
I’m new to Ionic, I’m using v4, I’m new to Angular and I’m new to Typescript too, so please bear with me and forgive me if I make dumb questions. I’m on Linux.
I’ve started a new app with
$ ionic start
[...]
Project name: comptest
Framework: Angular
Starter template: tabs
[...]
First things first, I try it:
$ cd comptest
$ ionic serve -l
[...]
? Install @ionic/lab? Yes
[...]
the browser opens up and the app works ok. Now I try to generate a new custom component:
$ ionic generate component mySpan1
[...]
[OK] Generated component!
That created some files such as my-span1-component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-span1',
templateUrl: './my-span1.component.html',
styleUrls: ['./my-span1.component.scss'],
})
export class MySpan1Component {
constructor() { }
}
I edited the selector and made it look like my-span1 instead of app-my-span1, but I didn’t touch anything else, not even the html <p> tag that in future will become a <span> instead for obvious reasons. Then I tried to use my-span1 in tab1 page, so I edit tab1.page.html and add my-span1 tag:
<ion-content>
<my-span1></my-span1>
<ion-card class="welcome-card">
<img src="/assets/shapes.svg" alt="" />
Now tab1 doesn’t work anymore. In the browser console I get the error:
‘my-span1’ is not a known element
Google is my friend, and it leads me here: Can’t get ionic v4 CLI generated component to work
I’ve tried to follow the suggestions in that thread, but when it came down to creating a new module I entered the unknown (for me) territory. I tried ionic generate module components, and it worked, then I declared MySpan1Component in that new module:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MySpan1Component } from '../my-span1/my-span1.component';
@NgModule({
declarations: [
MySpan1Component
],
imports: [
CommonModule,
]
})
export class ComponentsModule { }
Then I imported the new module into the app module, like this:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ComponentsModule } from './components/components.module';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ComponentsModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
But I still get the same error in the console, e.g. 'my-span1' is not a known element.
There the thread ends, its author solved the problem with that, but the same is not true for me. And I don’t know what to do next.
Can you please guide me step by step (assuming I’m missing only 1 step or so), or hand me a link to some docs that guide me step by step?
Thanks in advance.
↧
↧
Join Ionic WhatsApp Group
Send me message on this number: 8780606080, i will share you on whatsapp
↧
How to modify css property
Due to mandatory of selection of ionic version, I have selected 3 but the issue is coming in v4 and v5.
I want modify the look and feel of UI component as per my requirement but I am unable to modify and not able to add css and class. There are few css properties are given in the doc but that is not sufficient for requirement. I am trying to change height and position of search icon of ion-searchbar. I am not able to do that. Please help.
↧
Ionic responsive
Hello, check out this tutorial Responsive Grid
↧