I have a problem, on my application have to show an animation that they give to me in GIF format when the user clicks a button and change the view after the animation ends.
TS fle:
export class AreYouReadyPage {
private src = 'assets/gif/waiting.gif';
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
}
noOption() {
this.navCtrl.pop();
}
yesOption() {
this.src = 'assets/gif/zucchini-omelet.gif';
// wait 1 second
this.navCtrl.push(StepPage, {steps: this.navParams.get('steps')})
}
}
HTML file:
<ion-row>
<span (click)="yesOption()" class="option-button yes-option">
<img src="assets/icon/check.png">
</span>
<span (click)="noOption()" class="option-button no-option">
<img src="assets/icon/wrong.png">
</span>
</ion-row>
<img src="{{src}}" class="celia">
<back-button></back-button>
Related
I'm developing an ionic 3 application in which I need to show the camera interface inside the app screen and camera-preview seems to be the right and only solution to go with at this moment. However, when I trigger the startCamera function, I always get the error ' Object(...) is not a function at CameraPreview.startCamera'. Any help would be much appreciated.
Here are the steps I used for the installation:
From CLI:
ionic cordova plugin add https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git
npm install #ionic-native/camera-preview
2.Add to the provider list in module.ts file
import { CameraPreview } from '#ionic-native/camera-preview/ngx';
.....
providers: [
CameraPreview, ...
]
Below is the page where I would use the plugin:
import { Component, NgZone } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '#ionic-native/camera-preview/ngx';
#Component({
selector: 'page-submitdata2',
templateUrl: 'submitdata2.html',
})
export class Submitdata2Page {
public getWidth: number;
public getHeight: number;
public calcWidth: number;
cameraPreviewOpts: CameraPreviewOptions =
{
x: 40,
y: 100,
width: 220,
height: 220,
toBack: false,
previewDrag: true,
tapPhoto: true,
camera: this.cameraPreview.CAMERA_DIRECTION.BACK
}
constructor(
public cameraPreview: CameraPreview, private zone: NgZone,
public navCtrl: NavController, public navParams: NavParams) {
this.zone.run(() => {
this.getWidth = window.innerWidth;
this.getHeight = window.innerHeight;
});
console.log('width', this.getWidth);
this.calcWidth = this.getWidth - 80;
console.log('calc width', this.calcWidth);
}
ionViewDidLoad() {
console.log('ionViewDidLoad Submitdata2Page');
}
startCamera() {
debugger
this.cameraPreview.startCamera(this.cameraPreviewOpts).then(
(res) => {
console.log(res)
},
(err) => {
console.log(err)
});
}
stopCamera() {
this.cameraPreview.stopCamera();
}
takePicture() {
this.cameraPreview.takePicture()
.then((imgData) => {
(<HTMLInputElement>document.getElementById('previewPicture')).src = 'data:image/jpeg;base64,' + imgData;
});
}
SwitchCamera() {
this.cameraPreview.switchCamera();
}
showCamera() {
this.cameraPreview.show();
}
hideCamera() {
this.cameraPreview.hide();
}
}
The HTML:
<ion-header>
<ion-navbar>
<ion-title>Preview Page</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h5>This is camera Preview Application..</h5>
<div class="displaybottom">
<button ion-button (click)="startCamera()"> Start Camera</button>
<button ion-button (click)="stopCamera()"> Stop Camera</button>
<button ion-button (click)="takePicture()"> Take Picture Camera</button>
<button ion-button (click)="SwitchCamera()"> Switch Camera</button>
<button ion-button (click)="showCamera()"> Show Camera</button>
<button ion-button (click)="hideCamera()"> Hide Camera</button>
</div>
<div class="pictures">
<p><img id="previewPicture" width="200" /></p>
<!--<p><img id="originalPicture" width="200"/></p>-->
</div>
</ion-content>
My Development Enviroment:
This is my first application using ionic4 and there is something weird happening. When I tap on any link, there is delay and the entire background blinks before it loads the page. Here is a video showing this weird behave: https://youtu.be/NqoOMQYyr4k
For reference, here is the code for the pages:
On the global.scss i have this property to setup the background
ion-content {
--background: #000 url('./assets/images/main-bg.png') no-repeat center center / cover;
}
news.page.ts
import { News } from './news.model';
import { Component, OnInit } from '#angular/core';
import { NewsService } from '../services/news.service';
import { Router } from '#angular/router';
import { NavController } from '#ionic/angular';
#Component({
selector: 'app-news',
templateUrl: './news.page.html',
styleUrls: ['./news.page.scss'],
})
export class NewsPage implements OnInit {
news: any;
constructor(private newsService: NewsService, private router: Router, private navController: NavController) { }
ngOnInit() {
this.news = this.newsService.getAllEvents();
}
go(id: string) {
this.navController.navigateForward('news/' + id);
}
}
news.page.html
<ion-header>
<ion-toolbar color="grey">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title style="color: #524A4A!important">News</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid padding class="margin-logo-header">
<ion-row>
<div>
<h2>Noticias HD Friends</h2>
</div>
</ion-row>
</ion-grid>
<ion-card color="grey" *ngFor="let news of news | async">
<ion-nav-pop (click)="go(news.id)" >
<ion-img src="{{news.picture}}"></ion-img>
<ion-card-header>
<ion-card-title>{{ news.title }}</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>{{ news.subtitle }}</p>
</ion-card-content>
</ion-nav-pop>
</ion-card>
</ion-content>
news.service.ts
import { Injectable } from '#angular/core';
import { AngularFireDatabase, AngularFireList } from '#angular/fire/database';
import { News } from '../news/news.model';
#Injectable({
providedIn: 'root'
})
export class NewsService {
NODE = 'news/';
news: AngularFireList<News[]>;
constructor(private db: AngularFireDatabase) { }
getAllEvents() {
const localNews = this.db.list(this.NODE);
return localNews.valueChanges();
}
getNews(id: string) {
return this.db.object(this.NODE + id);
}
}
Is this a bug because it's a beta or is this something I messed up?
Thanks guys
UPDATE 1
This seems to be a bug on ionic framework. As soon as I get something I'll post here for future reference.
I have a Page with a List. From that page I open a MODAL.
That modal contains a Text box and a Add Item Button.
When I enter an Item in the Box and Hit Add Item, I need to
1) Dismiss the Modal
2) Add the entered Item in the List in the Previous List
I need to do this via On Dismiss().
HOME.HTML
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let grocery of itemsArray">{{grocery}}</ion-item>
</ion-list>
<button ion-button round (click)="addItem()">Add Item</button>
</ion-content>
HOME.TS
export class HomePage {
public itemsArray = [];
newItem: String;
constructor(public navCtrl: NavController, public modalCtrl: ModalController, public navParams: NavParams) {
}
ionViewDidLoad() {
this.newItem = this.navParams.get('data');
this.itemsArray = [
'Bread',
'Milk',
'Cheese',
'Snacks',
'Apples',
'Bananas',
'Peanut Butter',
'Chocolate',
'Avocada',
'Vegemite',
'Muffins',
'Paper towels'
];
this.itemsArray.push(this.newItem)
}
public addItem() {
let modalPage = this.modalCtrl.create(ModalPage);
modalPage.onDidDismiss(data => {
this.newItem = data;
});
modalPage.present();
}
}
MODAL.HTML
<ion-header>
<ion-navbar>
<ion-title>Add Item</ion-title>
<ion-buttons end>
<button ion-button (click)="closeModal()">Close</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label>Item</ion-label>
<ion-input type="text" [(ngModel)]="newItem"></ion-input>
</ion-item>
<button ion-button color="secondary" (click)="add()">Add Item</button>
</ion-list>
</ion-content>
MODAL.TS
export class ModalPage {
name:any;
constructor(public navCtrl: NavController, public viewCtrl: ViewController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ModalPage');
}
public closeModal() {
this.viewCtrl.dismiss();
}
add() {
let data = {"name": this.name};
this.viewCtrl.dismiss(data)
}
}
Your code seems to be fine overall.
Change this part.
public addItem() {
let modalPage = this.modalCtrl.create(ModalPage);
modalPage.onDidDismiss(data => {
this.itemsArray.push(data);
});
modalPage.present();
}
Change the name of your variable on the html or the TS file.
name to newItem or vice-versa
You are using [(ngModel)]="newItem" but in your TS file your using this.name
You're adding the item on ionViewDidLoad() but the new item arrives at modalPage.onDidDismiss()
Give it a try. I'll help you further if it still does not work.
First you need to pass object/string of item/data from you mode while you are closing the same
this.viewCtrl.dismiss(data);
And you have to subscribe model closing event at the page from where you have opened it for ex.
let modal = this.modalCtrl.create(ModelPage);
modal.onDidDismiss(data => {
this.badge = data;
});
modal.present();
After you can simply push you new item in to items array :)
i am making image upload using ionic 3 app and FileReader , after the image is uploaded i get this as image url
data:image/jpeg;base64,/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z
something like this , then i store it as is into my database
i noticed that if i open the app at another device the image will still be loaded and show in the view . so i wounder where does this image go after i upload it? where is it saved in my app ? i tried to look into my app folders couldn't find the img
thanks,
Here is the code i am using
<ion-header>
<ion-navbar>
<ion-title>{{ 'ITEM_CREATE_TITLE' | translate }}</ion-title>
<ion-buttons start>
<button ion-button (click)="cancel()">
<span color="primary" showWhen="ios">
{{ 'CANCEL_BUTTON' | translate }}
</span>
<ion-icon name="md-close" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button (click)="done()" [disabled]="!isReadyToSave" strong>
<span color="primary" showWhen="ios">
{{ 'DONE_BUTTON' | translate }}
</span>
<ion-icon name="md-checkmark" showWhen="core,android,windows"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Ts file:
export class ItemCreatePage {
#ViewChild('fileInput') fileInput;
isReadyToSave: boolean;
item: any;
form: FormGroup;
constructor(public navCtrl: NavController, public viewCtrl: ViewController, formBuilder: FormBuilder) {
this.form = formBuilder.group({
profilePic: [''],
name: ['', Validators.required],
about: ['']
});
// Watch the form for changes, and
this.form.valueChanges.subscribe((v) => {
this.isReadyToSave = this.form.valid;
});
}
ionViewDidLoad() {
}
getPicture() {
this.fileInput.nativeElement.click();
}
processWebImage(event) {
let reader = new FileReader();
reader.onload = (readerEvent) => {
let imageData = (readerEvent.target as any).result;
this.form.patchValue({ 'profilePic': imageData });
};
reader.readAsDataURL(event.target.files[0]);
}
getProfileImageStyle() {
return 'url(' + this.form.controls['profilePic'].value + ')'
}
/**
* The user cancelled, so we dismiss without sending data back.
*/
cancel() {
this.viewCtrl.dismiss();
}
/**
* The user is done and wants to create the item, so return it
* back to the presenter.
*/
done() {
if (!this.form.valid) { return; }
this.viewCtrl.dismiss(this.form.value);
}
}
Hi there can anyone help out. I am new to Ionic and Angular. I am trying to create a weather app in Ionic 2.
I have created a Home page with a Click event calling an AddWeather() function.
The function opens up a modal with a form attached. I am trying to pass data from the form on the modal back to the home page an output on the screen. I have tried ngModel but can't seem to get it working correctly.
Here is my Code: (home.ts)
import { Component } from '#angular/core';
import { NavController, ModalController, NavParams } from 'ionic-angular';
import { AddPage } from '../add/add';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public weatherList = [];
constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
}
addWeather() {
let addWeatherModal = this.modalCtrl.create(AddPage);
addWeatherModal.present();
}
}
(add.html)
<ion-header>
<ion-navbar color="weatherbru">
<ion-title>Modal</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="CloseModal()"><ion-icon name="close"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<form>
<ion-item>
<ion-label stacked>City</ion-label>
<ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Country</ion-label>
<ion-select >
<ion-option value="us">United States</ion-option>
<ion-option value="uk">United Kingdom</ion-option>
</ion-select>
</ion-item>
<button ion-button block (click)="CloseModal()">Add Weather</button>
</form>
<div padding>
</div>
</ion-content>
(add.ts)
import { Component } from '#angular/core';
import { ModalController } from 'ionic-angular';
import { NavController, NavParams, ViewController } from 'ionic-angular';
#Component({
selector: 'page-add',
templateUrl: 'add.html'
})
export class AddPage {
constructor(public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {}
CloseModal() {
this.viewCtrl.dismiss();
}
}
In your html :
<form>
<ion-item>
<ion-label stacked>City</ion-label>
<ion-input [(ngModel)]="form.city" type="text" ></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Country</ion-label>
<ion-select [(ngModel)]="form.country">
<ion-option value="us">United States</ion-option>
<ion-option value="uk">United Kingdom</ion-option>
</ion-select>
</ion-item>
<button ion-button block (click)="CloseModal()">Add Weather</button>
</form>
In your add.ts file :
export class AddPage {
form : any; //Declare the form object to be bound to your html
constructor(public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {}
CloseModal() {
this.viewCtrl.dismiss(this.form); //Send back the form object when closeModal is called
}
}
In your home.ts :
addWeather() {
let addWeatherModal = this.modalCtrl.create(AddPage);
addWeatherModal.present();
addWeatherModal.onDidDismiss(data=>{ //This is a listener which wil get the data passed from modal when the modal's view controller is dismissed
console.log("Data =>", data) //This will log the form entered by user in add modal.
})
}