Look at it from the POV of the framework. Every time the *ngIf flips to true, the <ion-tabs> component has to be constructed from scratch, and it has no way of knowing any of the properties of its previous incarnation, who died leaving no traces long ago.
Another option, I suppose, would be for your to actively bind [(selectedTab)] off of the <ion-tab-bar> to a property in your page’s controller. That should survive an *ngIf on/off cycle.
Hi new to ionic and unsure where to start with getting user input and storing it in a database. The purpose of this database will be for authentication Signup/Login.
i dont see a solution in this? it’s a player right? i’m trying to capture a 20 second video clip from the camera.
The plugin you are using is not for video so you need to add another plugin.
You asked for video capture capability, and I posted a solution for you. They even have a demo of it for react.
Is there any way to elegantly pass props to components using the new overlay hooks in Ionic 5.6 ?
This is my code currently that is working but using state.
const PopoverList: React.FC<{
onHide: () => void;
type: string;
}> = ({ onHide, type }) => (
<IonList>
<IonListHeader>Ionic</IonListHeader>
<IonItem button>Learn Ionic</IonItem>
<IonItem button>Documentation</IonItem>
<IonItem button>Showcase</IonItem>
<IonItem button>{type}</IonItem>
<IonItem lines="none" detail={false} button onClick={onHide}>
Close
</IonItem>
</IonList>
);
const Foo: React.FC<ContainerProps> = () => {
const [type, setType] = useState<string>("");
const [present, dismiss] = useIonPopover(PopoverList, {
onHide: () => dismiss(),
type: type,
});
return (
<IonButton
expand="block"
onClick={(e) => {
setType("hello");
present({
event: e.nativeEvent,
});
}}
>
Show Popover
</IonButton>
);
As you can see I create a string state called “type” that is referenced to useIonPopover. Then before present() function is called, update the state. However, is there any way to pass the “type” in the present of the popover directly?
Welcome to the forums. I’m not saying your question is inappropriate, but it’s super-important to note that it cannot be an Ionic question. In order to do secure user authentication, the information needed to confirm somebody’s identity needs to be stored in a safe place, such as servers under your control. It can’t be stored locally on the device, because you can’t control the security of the device.
So, while you wait for somebody to give a better answer here, you can safely broaden your search horizons a bit if you wish, because strategies for doing user authentication for web apps are independent of the frontend technology being used. Concentrate on solutions involving the tech stack that you want to use on the server side, such as your choice of database engine or middleware language.
Why don’t you use [(ngModel)]
<ion-select class="ion-text-end" multiple="true" name="idLine" formControlName="idLine" [(ngModel)]="array_variable">
<ion-select-option *ngFor="let item of linesList" value="{{item.id}}">
{{ item.name }}
</ion-select-option>
</ion-select>
and in your ts file add
this.array_variable=this.linesList.map((lines)=>{
return lines['id'];
});
Ok thanks, I will try to make something with this code
@madbyte
Don’t forget to add await to your alert controller create function.
async borrarDB()
{
this.BTSerial.isConnected().then(() => {
let alert = await this.alertCtrl.create({
message: 'Error',
subHeader: 'Bluetooth conectado ',
buttons: ['OK']
});
alert.present();
}, () => {
let alert = this.alertCtrl.create({
message: "Confirmar",
subHeader: 'Esta seguro?',
buttons: [
{
text: 'No',
handler: () => {
console.log('No clicked');
}
},
{
text: 'Si',
handler: () => {
console.log('Si clicked');
this.Save.set ("EqList", "");
this.Save.clear();
this.Save.set ("EqAlias", "");
this.Save.clear();
console.log ("Base de datos borrada");
}
}
]
});
alert.present();
});
As I recall, there is some sort of syntax issue in this code like some sort of async issue but I don’t have code right now to share with you(my apologies).
var terminal = this.StripeTerminal.create({
onFetchConnectionToken: await this.fetchConnectionToken(), // this line has issue
onUnexpectedReaderDisconnect: this.unexpectedDisconnect()
});
OR
var terminal = this.StripeTerminal.create(async () => {
onFetchConnectionToken: await this.fetchConnectionToken(), // this line has issue
onUnexpectedReaderDisconnect: this.unexpectedDisconnect()
});
const config: BackgroundGeolocationConfig = {
locationProvider: 1,
desiredAccuracy: 0,
stationaryRadius: 0,
distanceFilter: 0,
notificationTitle: 'Tracking position in the background',
notificationText: 'enabled',
debug: false,
interval: 5000,
fastestInterval: 1000,
activitiesInterval: 1000,
stopOnTerminate: false,
startOnBoot: true,
startForeground: true,
pauseLocationUpdates: false,
stopOnStillActivity: false,
saveBatteryOnBackground: false,
url: 'http://srmtcvizag.com:4444/nodeapp/updateaddresslatlon',
// customize post properties
postTemplate: {
lat: '@latitude',
lang: '@longitude'
}
// enable this to clear background location settings when the app terminates
};
This method was not posting any data
<ion-header>
...
</ion-header>
<ion-content #content class="chat-room">
<div id="groupChatDiv" *ngIf="!groupChatByWorkflowShowChat">
<div class="md-cards">
<div class="md-card-cont">
<ng-container *ngFor="let workflow of workflows;">
<ng-container *ngIf="workflow.c.length > 0">
<span class="messages-block-date">{{workflow.name}}</span>
<ion-slides> [...]
</ion-content>
<ion-footer class="messages-block-date" [ngClass]="bigFooter ? 'fullScreenFooter' : 'normalFooter'">
<ion-slides *ngIf="!bigFooter"
[options]="slideOpts" (ionSlideDidChange)="slideDidChange()" #slider >
<ion-slide>
<ion-toolbar class="ion-footer-toolbar">
[...]
</ion-footer>
just some in my opinion normal code - nothing special.
here the two different footer classes:
.fullScreenFooter {
height: 100vh;
--background: transparent;
background: var(--background-color) url(/assets/imgs/background.jpg) no-repeat top center;
background-size: auto 100vh;
}
.normalFooter{
height: 80px;
}
also nothing too fancy.
hope this will/can help
(topic deleted by author)
Hi, I am about to build an app using Ionic. I wonder how to make sure that URLs when clicked gets opened within the app ?
Also, is there any method to use the back button so that after opening the URL, I can go back to the app. Thanks.
Found the problem… was my fault… on deeper digging i found out what i need to init my childview (slider) which is only done on the “small” footer.
can be closed. sorry
Thank you for take your time for such detailed answer. I really appreciate it.
need help…
i am using import { FCM } from ‘cordova-plugin-fcm-with-dependecy-updated/ionic/ngx’;
in ios device show below errors:
[Error] Error: Angular JIT compilation failed: ‘@angular/compiler’ not loaded!
Thank you
you can use an input with type file with capture attribute
Hi, I’ve build an app with Ionic, React and capacitor 3 and build the app with android studio signed but after install app appears only in settings manage apps and I can only uninstall it.
No errors while build, no errors while installing.
I need help
package.json
{
"private": true,
"version": "0.0.1",
"name": "recheck-ionic",
"description": "An Ionic project",
"scripts": {
"dev": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx --quiet",
"lint-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
"format": "prettier --write \"./src/**/*.{js,ts,jsx,tsx}\""
},
"dependencies": {
"@capacitor/android": "3.1.2",
"@capacitor/app": "1.0.2",
"@capacitor/core": "3.1.2",
"@capacitor/haptics": "1.0.2",
"@capacitor/ios": "^3.1.2",
"@capacitor/keyboard": "1.0.2",
"@capacitor/push-notifications": "^1.0.3",
"@capacitor/status-bar": "1.0.2",
"@ionic-native/fingerprint-aio": "^5.35.0",
"@ionic-native/native-storage": "^5.35.0",
"@ionic-native/qr-scanner": "^5.35.0",
"@ionic/react": "^5.5.0",
"@ionic/react-router": "^5.5.0",
"@ionic/storage": "^3.0.6",
"aes256": "^1.1.0",
"cordova-plugin-fingerprint-aio": "^4.0.2",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-qrscanner": "^3.0.1",
"i18next": "^20.4.0",
"i18next-resources-to-backend": "^1.0.0",
"ionicons": "^5.4.0",
"jetifier": "^2.0.0",
"node-sass": "^6.0.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hook-form": "^7.12.2",
"react-i18next": "^11.11.4",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"recheck-clientjs-library": "^1.0.23-beta.1",
"typescript": "^4.1.3"
},
"devDependencies": {
"@capacitor/cli": "3.1.2",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.6.3",
"@types/jest": "^26.0.20",
"@types/node": "^12.19.15",
"@types/react": "^16.14.3",
"@types/react-dom": "^16.9.10",
"@types/react-router": "^5.1.11",
"@types/react-router-dom": "^5.1.7",
"@typescript-eslint/eslint-plugin": "^4.29.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jest": "^24.4.0",
"eslint-plugin-json": "^3.0.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.2",
"prettier-eslint": "^13.0.0"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Ionic:
Ionic CLI : 6.16.3 (/Users/byurhanbeyzat/.nvm/versions/node/v16.3.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 5.6.13
Capacitor:
Capacitor CLI : 3.1.2
@capacitor/android : 3.1.2
@capacitor/core : 3.1.2
@capacitor/ios : 3.1.2
Utility:
cordova-res : not installed globally
native-run : 1.4.0
System:
NodeJS : v16.3.0 (/Users/byurhanbeyzat/.nvm/versions/node/v16.3.0/bin/node)
npm : 7.15.1
OS : macOS Big Sur
Hey guys,
I am trying to implement my Stencil project into an Ionic Vue app and am completely pulling my hair out. The problem is as follows:
Out of the box, Vue treats all custom components as Vue components. Thus, I get the Vue warning that it can’t resolve my web-components.
To resolve this problem, we have to tell the Vue instance that components with a certain prefix are NOT Vue components. To achieve this, the Stencil docs on framework integration with Vue told me I have to change a config setting on my Vue instance with: Vue.config.ignoredElements = [/gc-\w*/];. This is great if you use Vue 2, but Ionic Vue apps use Vue 3.
According to the Vue 3 docs, you can do something similar in version 3, only you have to use the compilerOptions of the Vue instance to do it: app.config.compilerOptions.isCustomElement = tag => /gc-\w*/.test(tag)
When I try this solution however, Vue starts complaining that you can only set the compilerOptions this way when using the full build of Vue. When you use the runtime-only build (which Ionic apparently uses?) you have to change any settings at runtime.
After a lot of frustration and Googling I finally figured out how to change the compilerOptions at runtime. I created a vue.config.js and it contains the following:
module.exports = {
configureWebpack: {
resolve: { symlinks: false }
},
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions = {
...(options.compilerOptions || {}),
isCustomElement: tag => /gc-\w*/.test(tag)
};
return options;
});
},
}
This gave me the following error when I try to run yarn serve: Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined.
I FINALLY managed to resolve the issue by installing vue-loader@next. When I could now yarn serve and work on my Ionic app.
However, when I want to use the Vue 3 Composition API I run into problems. I keep getting errors like: Module '"../../node_modules/vue/dist/vue"' has no exported member 'toRefs'..
This seems to have something to do with the Vue version that vue-loader@next wants as a peer dependency. Because when I remove it, it goes back to the Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined error.
What am I doing wrong here? Is this not the correct way to implement Stencil components in an Ionic Vue project? I feel like I am running in circles here. Any help would be greatly appreciated!