ionic 3 – show confirm alert after click on ion-toggle

Issue I’m trying to use click event on ion-toggle and is not working. Html: <ion-item> <ion-label class=”labelToggle”>Ativo:</ion-label> <ion-toggle (click)=”mudarStatusProcesso()” [(ngModel)]=”ProcAtivo”></ion-toggle> </ion-item> The mudarStatusProcesso() creates an AlertController with ‘ok’ and ‘cancel’ options, this action needs happen before ion-toggle updating. I believe

Continue reading

typescript error: would overwrite input file

Issue I have updated latest Ionic version and removed src/declarations.d.ts file.Now my app shows below error when I try to run the app ionic serve. typescript: /sophy/src/assets/dev-load/load.ts, line: 1 Module ‘../../../node_modules/nprogress/nprogress.js’ was resolved to ‘/sophy/node_modules/nprogress/nprogress.js’, but ‘–allowJs’ is not set.

Continue reading

Stack elements under each other inside ion-item

Issue I am trying to stack items vertically under each other inside an ion-item: <ion-item> <ion-item-divider style=”width: 100%;” item-content> <h4>Questions</h4> </ion-item-divider> <ion-item item-content style=”width: 100%;” class=”no-border”> <label style=”width: 100%;” item-content>This is a label</label> </ion-item> <ion-toolbar style=”width: 100%;” item-content class=”transparent-toolbar” text-center>

Continue reading

How Do I render an ng-container or ng-template without *ngIf?

Issue I need to add the tappable directive to the ion-card component inside a custom component. I use an @Input() myInputBool, something like: <ng-container *ngIf="myInputBool"> <ion-card> <ng-container render="myContent"></ng-container> </ion-card> </ng-container> <ng-container *ngIf="!myInputBool"> <ion-card tappable> <ng-container render="myContent"></ng-container> </ion-card> </ng-container> <ng-container #myContent>

Continue reading

right alignment for a button in ion-col

Issue I have this grid in my Ionic 2 application. Is there any ionic-specific attribute to make the button shown on the right side of the column (row)? <ion-grid> <ion-row> <ion-col>col 1</ion-col> <ion-col>col 2</ion-col> </ion-row> <ion-row> <ion-col> <button ion-button>My button</button>

Continue reading

Directives not working in ionic 3

Issue Directive example in ionic 3, method used previously are not working. Already tried the way in which directives where implemented in ionic 2. import {Directive} from ‘angular2/core’; @Directive({ selector: ‘test’, template: ‘./test.html’ )} export class MyDirective { } import

Continue reading

Ionic 3 not showing camera FILE_URI path in image src

Issue here is my HTML code <img [src]=”profileImage”/> <button (click)=”openCamera()”> Upload </button> below is my component code import { ViewController, Platform, normalizeURL } from ‘ionic-angular’; openCamera() { let options = { quality: 100, destinationType: this.camera.DestinationType.FILE_URI, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE, saveToPhotoAlbum:

Continue reading

ionic 3 Change grid dynamically

Issue In following code Sometimes {{Data3}} or {{Data2}} will not have any value Scenario 1 : {{Data3}} will not have any value <ion-row> <ion-col col-4>{{Data1}}</ion-col> <ion-col col-4>{{Data2}}</ion-col> <ion-col col-4 >{{Data3}}</ion-col> </ion-row> Now I need change first two col into two

Continue reading

pass input array data to http from ngModel in ionic 3

Issue I am trying to develop a mobile app with below design.. When click on the continue button I need to send data to http api like data = { {‘product’:’Salt’,’quantity’,23,’price’,4567}, {‘product’:’Sugar’,’quantity’,12,’price’,21}, {‘product’:’Egg’,’quantity’,2,’price’,64}, {‘product’:’Milk’,’quantity’,8,’price’,243} }; I tried many answers in

Continue reading

How to set type of value send from a View selector in Angular 4?

Issue I have this code for a simple number selector in my view: <ion-select #pageSelector [(ngModel)]=”viewCurrentPageNumber” interface=”popover” (ionChange)=”newPageSelected($event)”> <ion-option *ngFor=”let number of renderTasks; let i = index” value=”{{i+1}}”>{{i+1}}</ion-option> </ion-select> It just shows a selector with 1,2,3,4…renderTasks.length and send the selected

Continue reading

How to ADD a class on ionic 3 ngFor generated buttons?

Issue I have this simple *ngFor <button ion-button *ngFor=”let markerColor of markerColors, let i = $index” (click)=”markText()” [disabled]=”status.pdf.pagesLoaded == 0″ class=”$markerColor.className”> <ion-icon name=”md-brush”>{{markerColor.className}}</ion-icon> </button> It renders correctly to <button class=”someClass disable-hover button button-ios button-default button-default-ios” ion-button=””><span class=”button-inner”> <ion-icon name=”md-brush” role=”img”

Continue reading

How to group by in ion list?

Issue How to display group by data in ion list? <ion-list *ngFor=”let obj of data; let i=index”> <ion-item-sliding> <ion-item> <div>UT_TXN_CODE: {{obj.UT_TXN_CODE}}</div> <br>Date {{obj.UT_LOG_DATE}} <br>Subject : {{obj.UT_SUBJECT}} <br>UT_LINK: {{obj.UT_LINK}} </ion-item> <ion-item-options side=”right”> <button ion-button color=”secondary”> <ion-icon name=”checkmark”></ion-icon> Approve </button> <button ion-button

Continue reading

Pages overlaps on navigation in Ionic4

Issue I have developed an application using ionic4. I am facing an issue during navigation the pages overlaps like below give picture. I am using NavController for navigation. public editUserProfile() { this.menuCtrl.close(‘side-menu’); this.navCtrl.navigateForward(‘/home/edit-profile’); } Any solution for this? Solution I

Continue reading

How to disable cors in chrome Mac

Issue I keep getting the below error when developing my ionic app. It’s an authorization header not allowed by the backend. Solutions tried: I use the chrome cors plugin here: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en as well as started chrome disabling web security as

Continue reading

How do I dynamically change the value of [checked] property in ion-checkbox?

Issue <ion-list lines=’full’> <ng-container *ngFor="let item of data"> <ion-item> <ion-label class="ion-text-wrap"> {{ item.Title}} </ion-label> <ion-checkbox slot="end" (ionChange)="onDataCheckBoxChange(item.Id, $event)" [checked]="item.selected" ></ion-checkbox> </ion-item> </ng-container> </ion-list> now on ngOnInit() I am returning a an array of item ids i.e. 1,23,4,5,6 etc Now I

Continue reading

Change Ionic Tabs to navigate to their root page and not to their last page

Issue I am using the Ionic Tab Navigation <ion-tabs #mainTabs> <ion-tab [root]=”tab1″ tabTitle=”Page1″ tabIcon=”icon-tasks”></ion-tab> <ion-tab [root]=”tab2″ tabTitle=”Page2″ tabIcon=”icon-calendar”></ion-tab> <ion-tab [root]=”tab3″ tabTitle=”Page3″ tabIcon=”icon-profile”></ion-tab> </ion-tabs> And everything works okay with the exception that when I click on a tab it goes to

Continue reading

Label and group radio buttons horizontally aligned

Issue I have a label and group radio button (two) and i want to make it to be horizontally aligned like in the picture. I tried this code: `<ion-row radio-group [(ngModel)]=”Sexe”> <ion-col> <ion-item> <ion-label color=”primary”>Sexe</ion-label> <ion-radio value=”Mr”></ion-radio> <ion-radio value=”Mme”></ion-radio> </ion-item>

Continue reading