Any of the CSS white-space options look useful?
↧
How to avoid breaking of text into two lines
↧
How to place a ionic tab in the middle of the screen in ionic4
From a UI perspective, it is super-important that tabs be in a completely predictable place all the time, which is why they get locked either to the header or the footer. Can you put the stuff you want the tabs under above them in the header?
↧
↧
[SOLVED] Ionic navController pop with params
The solution is very easy. Just follow the standard component interaction pattern set by Angular. Here is some code:
ion-nav.service.ts
-To save the IonNav instance. It’s used the same way as NavController in Ionic 4.
@Injectable()
export class IonNavService {
public ionNav: IonNav;
public setIonNav(ionNav: IonNav): void {
this.ionNav = ionNav;
}
}
ion-nav.component.ts
-Root component for using IonNav and setting the instance in the service.
@Component({
selector: 'app-ion-nav',
template: `<ion-nav #nav [root]="root" [rootParams]="rootParams" animated="true" swipeGesture="true"></ion-nav>`
})
export class IonNavComponent implements AfterViewInit, OnInit {
@Input() root : Type<any>;
@Input() rootParams: any;
@ViewChild('nav', { static: false }) ionNav : IonNav;
constructor(private ionNavService: IonNavService) {}
public address : Address;
public onAddressSelect : EventEmitter<Address> = new EventEmitter<Address>();
public onAddressUpdate : EventEmitter<Address> = new EventEmitter<Address>();
ngOnInit():void{
this.onShippingAddressSelect.subscribe(address=> /* logic */ );
this.onShippingAddressUpdate.subscribe(address => /* logic */ ); // dont forget to unsubscribe
//e.g. how you can pass variables.
this.root = AddressListPage;
this.rootParams = {
address: this.address,
onAddressSelect: this.onAddressSelect,
onAddressUpdate: this.onAddressUpdate
}
}
ngAfterViewInit(): void {
this.ionNavService.setIonNav(this.ionNav);
}
}
address-list.component.ts
-Example component set as root in previous code and params were passed through rootParams
@Component({
selector: 'app-address-list',
template: `
<ion-content>
<ion-button (click)="select(address)">select</ion-buttons>
<ion-button (click)="edit(address)">select</ion-buttons>
</ion-content>
`
})
export class AddressListPage {
constructor(private _ionNavService: IonNavService) { }
@Input() address : Address;
@Output() onAddressSelect : EventEmitter<Address> = new EventEmitter<Address>();
@Output() onAddressUpdate : EventEmitter<Address> = new EventEmitter<Address>();
// Pass values back
select(address: Address){
this.onAddressSelect.emit(address);
}
edit(): void {
this._ionNavService.ionNav.push(AddressEditPage, { address: address, onAddressUpdate: this.onAddressUpdate });
}
}
address-edit.component.ts
-Second component on IonNav stack. Pushed in address-list params were passed through Push
@Component({
selector: 'app-address-edit',
template: `
<ion-content>
<ion-button (click)="save()">Save</ion-buttons>
</ion-content>
`
})
export class AddressEditPage {
constructor(private _ionNavService: IonNavService) { }
@Input() address : Address;
@Output() onAddressUpdate : EventEmitter<Address> = new EventEmitter<Address>();
// pass values and go back
save() {
this.onAddressUpdate.emit(this.address):
this._ionNavService.ionNav.pop();
}
}
↧
Error compiling release for Android
I’m trying to compile my app the way I’ve always done it before:
ionic cordova build android --prod --release
And I’m getting a very weird error that seems related more to iOS (which is not my target here, this is a Linux Machine trying to compile Android):
> cordova build android
config file *-Info.plist requested for changes not found at /home/jeudy/Proyectos/crgate/placas/platforms/android/*-Info.plist, ignoring
config file *-Info.plist requested for changes not found at /home/jeudy/Proyectos/crgate/placas/platforms/android/*-Info.plist, ignoring
Cannot find module 'xcode'
This is my Ionic info:
Ionic:
Ionic CLI : 5.2.7 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.10
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, browser 5.0.3
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 7 other plugins)
Utility:
cordova-res : 0.6.0 (update available: 0.9.0)
native-run : 0.2.8 (update available: 0.3.0)
System:
Android SDK Tools : 26.1.1 (/home/jeudy/Apps/android-sdk)
NodeJS : v8.10.0 (/usr/bin/node)
npm : 3.5.2
OS : Linux 4.15
I have been able to compile my app on this same machine many times, and this week I started to get this problem.
Any ideas?
Thanks
↧
Error compiling release for Android
I fed this into the forum search and came up with this thread.
↧
↧
Error compiling release for Android
Thanks man, yes, that was the problem.
↧
Adding cards or passes to Apple Wallet and Google Pay
I am developing a prototype app and I would like to add cards to apple wallet and to google pay passes (or similar).
I have found this for apple wallet: https://github.com/tomavic/cordova-apple-wallet#readme
Is there anything similar for google pay?
Is this possible?
Cheers
↧
Photogallery useFileSystem
I’m trying to learn by doing and following the instructions for the PhotoGallery example but a soon as I try to **useFilesystem()** I get
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
I did check React versions to make sure that’s not the problem. I commented out the rest of the system code and isolated it to the useFileSystem call at this stage of the demo https://ionicframework.com/docs/react/your-first-app/3-saving-photos
Suggestions?
↧
Live reload with electron
I really would like to use ionic capacitor with electron. Everything is working as it should and I’m ready to start development. But I really would like to use live reload with electron, is there any way currently supported by ionic and capacitor?
↧
↧
Trying to migrate project from older mac to newer mac
I’m trying to transfer an old project from the old mac to a new mac so I can continue to build for the future.
Problem is I am currently facing the following error code when i transfer the entire project over the new mac and try to build once more.
Error: Error code 1 for command: xcodebuild with args: -xcconfig,/Users/XXXXX/Downloads/iCloud Drive (Archive)/Archive (1)/SSA 1.10.1_edit/platforms/ios/cordova/build-debug.xcconfig,-workspace,SensSecure.xcworkspace,-scheme,SensSecure,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone 5s,build,CONFIGURATION_BUILD_DIR=/Users/XXXXXXX/Downloads/iCloud Drive (Archive)/Archive (1)/SSA 1.10.1_edit/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/anthonyman/Downloads/iCloud Drive (Archive)/Archive (1)/SSA 1.10.1_edit/platforms/ios/build/sharedpch
I’ve tried googling but there aren’t many results on this.
Currently, the project builds perfectly on the old mac which is running on highSiera v10.13.6, Xcode ver 10.1.
The new mac is currently running on macOS Mojave v10.14.6, Xcode ver 11.3.
The project info are as below
Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0-beta.4
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
OS:
Node Version: v4.4.7
thanks a lot for any replies!
↧
Scss file is not working
I’m migrating source code from ionic3 to ionic4.
After source code migration, my scss is not working(only html is displayed without scss).
How do I change below code?
home.page.ts - @component
@Component({
selector: 'page-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
providers: [CustomNativeStorage]
})
home.page.scss
$iphone4: "(device-width: 320px) and (device-height: 480px)";
$iphone5: "(device-width: 320px) and (device-height: 568px)";
$iphone6_7: "(device-width: 375px) and (device-height: 667px)";
.ios,
.md {
page-home {
.swiper-slide.swiper-slide-active{
width: 100% !important;
}
ion-slide {
background-size:cover;
background-position: top center;
}
.home-content-card{
background-color: rgba(255,255,255,0.85);
position: absolute;
width: 100%;
bottom: 0px;
}
.text-container{
padding: 5%;
.home-title{
font-size: 1.6rem;
font-weight: bold;
margin-bottom: 10px;
}
.home-text{
font-size: 1.5rem;
margin-bottom: 30px;
}
}
.button-container{
width: 100%;
text-align: center;
margin-bottom: 15px;
.button_continue{
min-width: 50%;
@extend .remove-text-transform,
.remove-button-curves !optional;
}
}
}
}
.swiper-pagination-fraction, .swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets{
bottom: 10%;
}
.swiper-pagination-bullet-active{
background: #FF9800;
}
.slide-zoom{
height: 100% !important;
}
@media #{$iphone4}{
.swiper-pagination-fraction, .swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets{
bottom: 14.5% !important;
}
}
@media #{$iphone5}{
.swiper-pagination-fraction, .swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets{
bottom: 11.5% !important;
}
}
@media #{$iphone6_7}{
.swiper-pagination-fraction, .swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets{
bottom: 10% !important;
}
}
↧
Help in sending Get Request in Ionic
Hello,
What do you mean? Can you instruct me what to do to in using HTTPS instead of HTTP?
↧
How to apply primary shade color to ion-button
Is it possible to apply primary-shade to ion button
↧
↧
Help in sending Get Request in Ionic
You probably need your REST server to be served using https instead of http.
Try your code using this url…
↧
How to apply primary shade color to ion-button
I don’t know what that means?
How would you do it with html and css?
↧
Scss file is not working
Create one of the default apps using Ionic 4 (or 5?) and see how it is implemented.
↧
How to apply primary shade color to ion-button
normally we do
<ion-button color="primary"></ion-button>
But it is not working when i tried
<ion-button color="primary-shade"></ion-button>
I get a white button with no text
↧
↧
Scss file is not working
Thank you for your reply.
Of course, I have done that.
But, The default app doesn’t have enough samples for SCSS and could not solve it.
↧
How to apply primary shade color to ion-button
Have you done as explained here…
↧
Prevent Alert from closing if condition is not satisfied
I have an alert dialog with an input text field. It requires the user to input his PIN before proceeding. If the PIN entered by the user is correct then the dialog box will disappear. If the PIN entered by the user is wrong then the dialog box should not disappear. Now, the problem is, when the user entered a wrong PIN, the dialog box still disappears. How can I prevent the alert box from closing if the condition was not satisfied or if the PIN is wrong?
Her is my code:
this.alertCtrl.create({
title: 'Verify it\'s you',
message: 'Please enter your PIN for verification purposes.',
inputs: [
{
name: 'pin',
type: 'number',
placeholder: 'PIN',
}
],
buttons: [
{
text: 'OK',
handler: (data) => {
if (data['pin'] != this.pin) {
this.toastSrvc.presentToast('Invalid PIN!');
// DON'T CLOSE THE ALERT
}
}
}
],
enableBackdropDismiss: false
}).present();
I hope someone can help me with this. Thank you 
↧