Hii I am working on ionic app and I am trying to add video calling my app and I am using twiio please help me how I implement
↧
For video calling
↧
How to implement ion-back-button with custom handler?
There are several places in my app where I want to have a native looking back button like that provided by ion-back-button. However the click handler for ion-back-button does not do what I need in several of the cases.
Is there a way to give ion-back-button a custom click event handler?
Alternatively, is there a way I use the correct native back button icon with a regular ion-button?
↧
↧
How to conditionally set root page in Ionic 5
Where can I put some code to keep the splash until firebase charge user data?
↧
How to trust a self-signed certificate
Because mobile OS makers are proactively attempting to drag people like your customer into the 21st century by mandating proper security.
↧
Ionic 4 how to do a responsive app using media queries?
I am creating a hybrid app with Ionic 4.
I use css media queries to do specific layouts according to the screen size mobile is needed. Example:
This how it looks my app in a viewport of 360x640 screen size pixels in browser:
But, this how it looks in my cellphone which have the same screen size (360x640) in pixels:
All the blue part is cut off of the screen.
here is the css:
@media screen and (max-height: 640px) {
.ultraipunt{
font-size:19px;
}
.tittle{
font-size: 23px;
}
.tittle3{
font-size: 19px;
}
.buttonclass{
font-size:19px;
height:60px;
}
.buttonfacebook{
font-size:19px;
height:60px;
}
.buttongoogle{
font-size:19px;
height:60px;
}
.fond1{
min-height: 154px;
}
.fond2{
padding-top:0.5em;
padding-bottom:0.5em;
margin-top:0px;
}
.textwhite {
font-size:18px;
}
.textwhitebold {
font-size:18px;
}
form{
margin-bottom:0em;
margin-top:0em;
}
.imgen1{
width:65px;
}
}
Using the site: https://www.mydevice.io/, this are my cellphone specifications:
Now my questions are:
Why the css sizes are no translating well to my cellphone viewport? How can I do responsive design with ionic 4 for hybrid app?
↧
↧
place the icon to the leftmost of the toolbar
i am new to ionic. i want to place icon to the left most of the toolbar.
I have used slot="start" , class="float-right" and ion-float-right inside the tag but nothing works.
<ion-header>
<ion-toolbar>
<img class="logo float-left" src='../assets/dqlogo-edge.png'></img>
<ion-button class="grad-blue-button" size="large" slot="end">Login</ion-button>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
.logo{
width:100%;
height: 57px;
float: left !important;
}
↧
Ionic 4 & Angular 9
Try with the Ionic framework v5 RC.
↧
Ionic 4 not working in android 5
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags.ts';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
import './zone-flags.ts';
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
(window as any).global = window;
Have these lines only and tried to uncomment but didn’t worked
↧
Ionic 4 How to pass the data based on the item clicked to the next page?
Hi,
I have been stuck on this part for some time, hope you all will be able to help me 
I want to display the data of the item clicked to the Detail page.
I managed to get the ID of the item that I have clicked on the Main page. However, it could not display the data of the item to the Detail page.
This is the Detail page.
This is the .ts page where I get the ID of the item
This is the error I got when I click on the specified item
May I know what could be the problem?
Thank you for your help!
↧
↧
Any recommendation for in-app surveys and chat/support?
We want to integrate a live chat/support tool in our app (Zopim/Intercom/etc.) and another tool to display some pop-ups with in-app surveys (multiple choice questions). So, any recommendations?
↧
How to conditionally set root page in Ionic 5
the splash is the first page the user navigates to, so that is the placeholder for the code that does the waiting, then you navigate away as per earlier description.
So a separate page
↧
Ionic-Swpie-All swipeup and swipedown do not get fired
Hello guys… i have a big problem.
i am Using the Ionic-swipe-all library because i want to use (swipeup) and (swipedown) but they somehow do not get fired at all. (swiperight) and (swipeleft) do get fired all the time. i do not want to use hammerjs, because it doesnt work on the current android versions.
any1 has an idea on how to enable (swipeup) and (swipedown).
that my code:
> <div swipeALL (swiperight)=“swiperight()” (swipeleft)=“swipeleft()” (swipeup)=“swipeup()” (swipedown)=“swipedown()” >dddddd
swiperight(){
** console.log(‘right’);** //works
** }**
** swipeleft(){**
** console.log(‘left’);** // works
** }**
** swipeup(){**
** console.log(‘up’);** // doesnt work
** }**
** swipedown(){**
** console.log(‘down’);** //doesnt work
** }**
i feel like vertically swiping just doesnt work in Ionic Apps
↧
Ionic working on browser but not working on real device
This solution worked for me
↧
↧
Ion-list clickable and show details page
how to make my ion-list clickable and show details page to show more details about the clicked item
I will make another page like details to handle the details data
but how can I make the list clickable and show another page which have the details
my ads page .html which has the ion-list
<ion-header>
<ion-toolbar>
<ion-title>
My App
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item-divider>
<ion-label color="dark">
Latest Ads
</ion-label>
</ion-item-divider>
<ion-list *ngFor="let item of dataArray">
<ion-item>
<ion-thumbnail slot="start">
<img class="img-thumbnail" src="https://mysite.co/uploads/{{ item.document }}">
</ion-thumbnail>
<ion-label>
<h2 color="primary">{{ item.title }}</h2>
<h3>{{ item.city }}</h3>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
<ion-footer>
<ion-toolbar>
<!-- Tab bar -->
<ion-tabs>
<ion-tab-bar>
<ion-tab-button routerLink="/menu">
<ion-icon name="home"></ion-icon>
</ion-tab-button>
<ion-tab-button routerLink="/contactus">
<ion-icon name="call"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<!-- Tab bar -->
</ion-toolbar>
</ion-footer>
my ads page .ts file
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-adspage',
templateUrl: './adspage.page.html',
styleUrls: ['./adspage.page.scss'],
})
export class AdspagePage implements OnInit {
dataArray;
constructor(private http: HttpClient) {
this.http.get('https://mysite.co/reset-api.php').subscribe((response: any) => {
console.log(response);
this.dataArray = response;
});
}
ngOnInit() {
}
}
↧
Ionic 4 How to pass the data based on the item clicked to the next page?
Your page is trying to render before wishlistDetail has been filled from your service, hence the error about a null value. You have two options to fix it:
-
Wrap it in an ngIf
<ion-card *ngIf="wishlistDetail">
This way the card will only render once everything has been loaded. -
Mark it as optional
{{(wishlistDetail | async)?.name}}
If you use this approach, you’ll need to mark every possibly-null property as optional. Unless there are only one or two such properties, you’re better off wrapping in ngIf.
↧
Ionic 4 How to pass the data based on the item clicked to the next page?
↧
SQLITE Tutorial
I also need one example for that plugin
↧
↧
Ionic 4 How to pass the data based on the item clicked to the next page?
It’s not that it can’t get the value of name, but that wishlistDetail isn’t loading, so it’s calling the name property on a null object.
What is displaying in the console.log for wishlistID and wishlistDetail?
↧
Ionic 4 How to pass the data based on the item clicked to the next page?
↧
Ionic 4 & Angular 9
Maybe it’s better to wait Ionic V5
↧