Originally published at: A Visual Studio Code Extension for Ionic - Ionic Blog
Historically, when working with Ionic/Capacitor, the CLI is the main interface developers use to invoke various functions. Want to build your app? Want to add a platform? What about deploying to the simulator? All this is made possible by Ionic and Capacitor CLIs. Well, today we’re thrilled to announce a new extension for Visual Studio…
1 post - 1 participant
I need to do some stuff when the same option from the ion-select menu is selected. However, I can’t find a way to make it work.
There is no way to watch for value changes, since there are no changes to the value and if I add @click to the option it doesn’t do anything.
Is there any way to detect when an option is being selected even if it is the same option?
1 post - 1 participant
I have a few pages that use the Ion-segment-button components. We’ve been updating our ionic library to v5 and it seems making the ion-segment-buttons transparent has changed…
HTML:
<ion-header class="pageWorkSchedule">
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>
<ion-buttons slot="end">
<button ion-button icon-only style="background:transparent; border:none; color:black;" (click)="showLegend($event)">
<ion-icon md="ellipsis-horizontal" ios="ellipsis-vertical"></ion-icon>
</button>
</ion-buttons>
<ion-title>Work Schedule</ion-title>
</ion-toolbar>
<ion-toolbar mode="md">
<ion-segment class="ion-segment-button" [(ngModel)]="tabSelected" (ionChange)="segmentChanged($event)" mode="md">
<ion-segment-button class="ion-segment-button" value="current" checked>
<ion-label>Current</ion-label>
</ion-segment-button>
<ion-segment-button class="ion-segment-button" value="future">
<ion-label>Future</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content class="pageWorkSchedule" >
<div ion-fixed class="scroll-content">
<ion-slides class="swiper-no-swiping slideAsTab">
<ion-slide>
<div *ngIf="schedule">
<ion-card style="margin-right:25px; border-radius:0px" *ngFor="let currentSchedule of schedule.current">
<ion-card-content>
<work-schedule-card [schedule]="currentSchedule"></work-schedule-card>
</ion-card-content>
</ion-card>
</div>
</ion-slide>
<ion-slide>
<div *ngIf="schedule">
<ion-card style="margin-right:25px; border-radius:0px" *ngFor="let futureSchedule of schedule.future">
<ion-card-content>
<work-schedule-card [schedule]="futureSchedule"></work-schedule-card>
</ion-card-content>
</ion-card>
</div>
</ion-slide>
</ion-slides>
</div>
</ion-content>
CSS:
@import "../../../theme/variables";
.pageWorkSchedule {
--background: url('../../../assets/imgs/MainBackground.png') no-repeat center center fixed;
.scroll-content{
border-top: none !important;
--indicator-color : transparent!important;
}
.segment-button-checked{
background: transparent !important;
color: var(--ion-color-primary) !important;
border-bottom: 3px solid var(--ion-color-primary) !important;
--indicator-color : transparent!important;
}
.ion-segment-button{
color: $emaGray;
--indicator-color: transparent;
border-bottom: 3px solid $emaGray !important;
background:transparent !important;
background-color:transparent !important;
--background-checked: transparent !important;
--color-checked: transparent !important;
--indicator-color : transparent!important;
font-size: 16px;
color: var(--ion-color-medium);
border: 0px;
border-radius: 0px;
--indicator-color : transparent!important;
}
}
.segment-button-checked{
color: $emaSmoke !important;
border-bottom: 3px solid $emaSmoke !important;
--indicator-color : transparent!important;
}
1 post - 1 participant
Hi,
I’d like to create an app with both tabs and sidemenu.
With the starters you can create an app with tabs or with sidemenu.
So, according to you, which is the simplest way to have both?
Should I start with an app with app and try to add after the sidemenu or the contrary?
I’m using Ionic6.
Thank you
claudio
1 post - 1 participant
Using latest Ionic 6 and Capacitor 3.4 and following the instructions here: Native Audio | Cordova Native Audio Plugin for Audio Playback
Note: I am using a fresh install just to insure the plugins I need from my old Ionic4/Cordova project will still work with Capacitor. I have this same plugin installed on my older Ionic4/Cordova app which has been running for several years now.
The plugin installs and works without error however there is no sound from the device. No errors are produced either. I can preloadComplex() the audio file and no error response, all OK. I then play or loop and the response is “OK” but no sound from the device. Volume is 100% and the old app still works on same device.
JS Audio also works OK.
const audio = new Audio('assets/sounds/notification_triple_ding_loud.mp3');
audio.play();
Please advise and thank you for any assistance. I am really enjoying Capacitor over Cordova.
Ionic:
Ionic CLI : 6.19.0
Ionic Framework : @ionic/angular 6.0.0
@angular-devkit/build-angular : 13.2.3
@angular-devkit/schematics : not installed
@angular/cli : 13.2.3
@ionic/angular-toolkit : 6.0.0
Capacitor:
Capacitor CLI : 3.4.3
@capacitor/core : 3.4.3
System:
NodeJS : v12.20.2
npm : 6.14.11
OS : Windows 10 Pro 19044.1586
1 post - 1 participant
Ionic version: 6.18.2
Framework: Ionic React
I’m struggling to make an AJAX call work. How can I add content that is coming from an AJAX call with Ionic React?
Here is my AJAX call to get content from another website:
$.ajax({
method: "GET",
url: "https://www.my-website.ch/api/data"
})
.done(function( content ) {
console.log(content)
});
Since this is an AJAX call, the content is not immediately available. What I usually do is to append the incoming content to a class, like this:
<div className="target">
</div>
{get_items()}
function get_items(){
$.ajax({
method: "GET",
url: "https://www.my-website.ch/api/data"
})
.done(function( content ) {
console.log(content)
$(".target").append(
`
<IonCard>
<IonCardHeader>
<IonCardSubtitle></IonCardSubtitle>
<IonCardTitle className="ion-text-center">${content[0].name}</IonCardTitle>
</IonCardHeader>
<IonCardContent>
<div className="center">
${content[0].company}
</div>
</IonCardContent>
</IonCard>
`
);
});
}
But if I do it this way, the components are not rendered correctly. Only the text itself is appended, but not the IonCard with its styling. Also, the text gets appended twice, not once.
I believe that the text gets appended twice, because there is a shadow-root where there is another div with the class “target”. I think that my usual approach does not work for Ionic Apps.
What is the correct way to do this? How do I add content in Ionic React that is coming from an AJAX call? Or in my case: How do I add another IonCard when the content arrives?
1 post - 1 participant
background geolocation plugin doesn’t works in ionic 6 angular. does anyone know how to fix please help us too
1 post - 1 participant
Hi,
I had to make some changes on a module and I need my application to take my changes. The project is in NPM (confetti-js - npm) and I just made a MR on the git repo of the creator but I don’t know if it will merge.
How can I do ???
Thanks
1 post - 1 participant
TSX syntax highlighting (```tsx) doesn’t seem to work:
<IonTitle>Test</IonTitle>
But TSX is extensively used in React+TypeScript projects, often with the Ionic Framework.
1 post - 1 participant
I am using a Bluetooth LE plugin to connect android and iOS devices via bluetooth. Similar platform OS’s(iOS to iOS and Android to Android) can establish connection successfully. However, when trying to connect iOS to Android or Android to iOS, the state of the device remains disconnected and I want to establish the connection between iOS and Android.
Please refer to my sample source code GitHub - sblsatwikha/TestBluetooth
I have also added the log file in the same repository TestBluetooth/LogFile at e72e13b8bb6d787cfb4253e27c74b19994e10248 · sblsatwikha/TestBluetooth · GitHub
and this is the plugin I integrated following the ReadMe file in GitHub - capacitor-community/bluetooth-le: Capacitor plugin for Bluetooth Low Energy
And I also tried with all the below plugins.
1 post - 1 participant
Hi,
In order to completely disable native back swipe in IOS I’m having to use replace instead of push and its working fine except for one issue … disorienting page transiations.
I expect router.navigate(/book/${book.id}, "forward", "replace"); to show a forward animation but it just shows back animation always, is there a way to customize it or import and use the existing forward animation?
Thanks
1 post - 1 participant
Hey everyone!
I’m a long time reader, first time poster! (So take it easy on me).
My goal is to build and publish an app for Apple Store, however I don’t have a Mac. Is it possible to do this using a Windows/Linux OS? If so what is the best method/ without too much hustle?
I found old announcements and discussions dating 5+ years and was wondering if it is still valid?
I believe this is the most relevant announcement:
I’m using Ionic 5.4.16
Angular 13.2.6
I would also like to point out that is for a company I work for, so my best guess is that Hackintosh is not something that I should use.
Thanks,
Ivan
1 post - 1 participant
I’ve an ionic-react native mobile app. Started showing weird behaviour.
Any help on this is highly appreciated.
1 post - 1 participant
My Application contains 2 different pages which I need to open when user uses deeplinks. Deeplinks works fine but when I install application and open page(Using deeplink) it just shows up and got removed from the view stack. And when I do this multiple times then links open smoothly. I didn’t understand why this is happening in very first time when user install the app. Maybe there is some sort of caching page routes mechanism which is causing the problem.
if (`${match.$args['type']}` == 'shop') {
internalPath = '/tabs/market-place/wholesaler-store/category-detail-new'
var navigationExtras: NavigationExtras = {
state: {
shop_id: `${match.$args['id']}`
}
};
}
// Run the navigation in the Angular zone
this.zone.run(() => {
this.router.navigateByUrl(internalPath, navigationExtras);
});
1 post - 1 participant
Does anyone here have experience integrating LinkedIn Sign In with an Ionic app? We use Laravel PHP for our backend. We need to hire someone to do this for us and grab a few other data elements from endpoints we have permission to access in our LinkedIn app’s API. Please let me know if you are interested in helping us with this simple, quick function. Thanks!
Feel free to contact me at Lunardi@gmail.com and put in the subject line - Ionic dev or something Ionic related. You can find me on LinkedIn also - https://www.linkedin.com/in/lunardi/
1 post - 1 participant
Originally published at: How to use Storybook with Stencil - Ionic Blog
Storybook is an incredible tool that allows you to build, test, and document the components of your design system in isolation. Storybook provides a streamlined workflow and tons of addons to improve the developer experience. It is because of this that Storybook is used by indie developers and enterprise teams alike. In this tutorial, we…
1 post - 1 participant
I have read through the documentation and it says that out of the box Ionic supports the android hardware back button. That it will pop off the stack etc.
My application is angualr 12.2.4 with ionic/angular 5.8.1 and capacitor/core 3.2.3 Originally the back button on android would just close the application. After reading some I saw that the back button was handled with capacitor/app so I have installed 1.1.1. This now prevents the back button from closing the application, however, nothing happens now.
Reading the Ionic docs about the hardware back button i tried to use the Basic Usage by adding the following to my app.component.ts
constructor(private platform: Platform) {
this.platform.backButton.subscribeWithPriority(10, () => {
console.log('Handler was called!');
});
}
however, the console log was never called. I saw a recommendation to use the following
App.addListener('backButton', () => {
console.log('back button pressed');
console.log(this.location.path());
this.location.back();
});
and this console log is being called. Next issue i have is that nothing is happening. Modules are not popping. Its there something i need to do in order to activate this functionality?
1 post - 1 participant
Hello,
i’m realizing a submit form to send an email.
The form’s fields are:
The recipient of the mail is not variable.
I read about the email-composer, but it open the default app of the devices where the app is running.
Is possible to realize this in app or i need a php script on server?
Actually I’m also using onesignal to send in-app push-notification, is maybe easier to use it?
An example code would be top!
Thanks
Marco
1 post - 1 participant
I want to integrate my WordPress website with Ionic.
Is it possible?
Can I integrate Ionic with my WordPress website?
I have a website (https://www.rugknots.com/) running on WordPress.
Ionic and WordPress Integration using WordPress REST API are possible?
Moreover, Is it possible to use Iconic Navigation in WordPress Menus?
Need guidance, please
1 post - 1 participant
I have a page from which a modal component can be opened.
This the modal component html:
<div *ngIf="editItem == false">
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button style="color: white" (click)="closeModel()">Back</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button color="primary" (click)="editItem()">Edit</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Type: {{itemDetail.typeOfField}}</ion-label>
</ion-item>
<ion-item>
<ion-label>Name: {{itemDetail.nameOfField}}</ion-label>
</ion-item>
</ion-content>
</div>
<div *ngIf="editItem == true">
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button style="color: white" (click)="closeEdit()">Cancel Edit</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button color="primary">Save</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
</div>
This is the componenets ts:
import {Component, Input, OnInit} from '@angular/core';
import {ModalController} from '@ionic/angular';
@Component({
selector: 'app-licences-detailed',
templateUrl: './licences-detailed.component.html',
styleUrls: ['./licences-detailed.component.scss'],
})
export class LicencesDetailedComponent implements OnInit {
@Input()
public itemDetail: any = [];
protected returnValue: any;
public editItem = false;
constructor(
protected modalController: ModalController,
) {
}
ngOnInit() {
}
editItem() {
this.editItem = true;
}
closeEdit() {
this.editItem = false;
}
async closeModel() {
await this.modalController.dismiss(this.returnValue);
}
}
The problem I am having is when this modal first opens editItem is false, and 2 's are in the content however only 1 shows (The first one itemDetail.typeOfField) any thing else after this does not show.
Note everthing before the first like the header stuff does show
Wondering if anyone can tell me why this may be
Thanks
1 post - 1 participant