Im currently developing a camera app using ionic2 for my school project. However, I am unable to find a way to preview the camera app. I have tried previewing it on android studio and web browser but not able to do so.
Please help!!
Here is my code
Home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic 2 Camera
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button color="dark" (click)="takePhoto()">Take Photo</button>
<img [src]="imageURL" *ngIf="imageURL" />
</ion-content>
Home.ts
import {Component} from '#angular/core';
import {NavController} from 'ionic-angular';
import {Camera} from "#ionic-native/camera";
#Component({
templateUrl: 'home.html',
selector:'page.home'
})
export class HomePage {
Camera: any;
imageURL
constructor() {}
takePhoto(){
this.Camera.getPicture().then((imageData) => {
this.imageURL = imageData
}, (err) => {
console.log(err);
});
}
}
Related
I am currently using browser to test the application. I've implemented the toast message like in the documentation. Although the element is generated on the html when I look in the Elements with z-index: 60002.
landing.page.ts file:
import { FCM } from '#capacitor-community/fcm';
import { Platform, ToastController } from '#ionic/angular';
#Component({
selector: 'app-landing',
templateUrl: './landing.page.html',
styleUrls: ['./landing.page.scss'],
})
export class LandingPage implements OnInit {
constructor(private platform: Platform, public toastController: ToastController) { }
async presentToast(){
const toast = await this.toastController.create({
message: 'Your settings have been saved.',
duration: 100000,
position: 'middle'
});
toast.present();
}
ngOnInit() {}
}
landing.page.html file
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>landing</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button (click)="presentToast()">Pair</ion-button>
</ion-content>
I also changed the position to top, bottom and middle nothing changed.
PS: I did't edited any css file.
I'm new in Ionic Framework, and I'm using version 3 to build a simple application that redirects the user to an .html page after logging in. I've edited the home.ts file to make the log in possible, and I've built a test .html called index.html, in the folder "pages/home" inside the ionic project, but I'm getting an error when I try to conned the "submit" button to this index.html page:
Code in home.html
<ion-header>
<ion-navbar>
<ion-title>
Login
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list no-lines>
<ion-item>
<ion-label floating>User</ion-label>
<ion-input type="text" [(ngModel)]="username"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Senha</ion-label>
<ion-input type="text" [(ngModel)]="password"></ion-input>
</ion-item>
<button block ion-button block (click)="signIn()">Sign in</button>
</ion-list>
</ion-content>
Code in home.ts
import { Component } from '#angular/core';
import { NavController, AlertController, IonicPage } from 'ionic-angular';
import { index } from 'c:/Ionic/task-1/src/pages/home/index.html';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public username : any = '';
public password : any = '';
constructor(public navCtrl: NavController, public alertCtrl: AlertController)
{
}
signIn() {
this.navCtrl.push('index.html');
}
}
The code in index.html
<ion-header>
<ion-navbar>
<ion-title>
Login
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>Testing HTML page redirect</p>
</ion-list>
</ion-content>
The error: https://i.stack.imgur.com/vRivh.png
What could I do?
In ionic 3 you can navigate through pages using NavController.You should create a component that you want to route.
For that you have to import the component(page)
HTML file
<button block ion-button block (click)="signIn()">Sign in</button>
TS file
import { NavController } from 'ionic-angular';
import { StartPage } from './start-page';
#Component(
selector: 'app-home',
templateUrl: 'home.html'
})
class HomePage {
constructor(public navCtrl: NavController){}
signIn() {
this.navCtrl.push(StartPage);
}
}
Refer NavController documentation in ionic
check here
In home.ts file :
import { Component } from '#angular/core';
import { NavController, AlertController, IonicPage } from 'ionic-angular';
import { IndexPage} from '../index/index';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public username : any = '';
public password : any = '';
constructor(public navCtrl: NavController, public alertCtrl: AlertController){}
signIn() {
this.navCtrl.push(IndexPage);
}
}
I have an ionic4 app that I retrieve some photo from firebase storage and show it on html page in my app, now I just could showed the photo in a console and I couldn't showed it on a page.
Can someone help me that how can I display a photo on html page please.
My code is below
home.page.ts
import { Component } from '#angular/core';
import { AngularFireStorage, AngularFireStorageReference } from 'angularfire2/storage';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
storageRef: AngularFireStorageReference;
constructor(private afStorage: AngularFireStorage) { }
display() {
this.storageRef = this.afStorage.ref('rasool/download2.jpg');
this.storageRef.getDownloadURL().subscribe(url => console.log(url));
}
}
home.page.html
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<p>its work sir</p>
<ion-button (click)="display()">click me</ion-button>
</ion-content>
// home.page.ts
import { Component } from '#angular/core';
import { AngularFireStorage, AngularFireStorageReference } from 'angularfire2/storage';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
storageRef: AngularFireStorageReference;
public imageUrl = '';
constructor(private afStorage: AngularFireStorage) { }
display() {
this.storageRef = this.afStorage.ref('rasool/download2.jpg');
this.storageRef.getDownloadURL().subscribe(url => this.imageUrl = url);
}
}
// home.page.html
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<p>its work sir</p>
<img src="{{imageUrl}}" />
<ion-button (click)="display()">click me</ion-button>
</ion-content>`enter code here`
I am developing an IONIC-3 application, whether I want a dynamic nav bar with a title and a common button. For this reason, I have created a .ts file named
commonBtn.ts. Here is the code.
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
#Component({
selector: 'common-button',
templateUrl: 'commonBtn.html'
})
export class CommonBtnPage {
constructor(public navCtrl: NavController) { }
logOut() {
this.navCtrl.setRoot(LoginPage);
}
}
And its html is :-
<ion-header>
<ion-navbar>
<ion-title> I want to create a dynamic name </ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="logOut()">
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Now, my question is that, How may I change the title name dynamically means when user come into "Home Page", title will be "Home" or user come into "About" page, title will be "About".
We can manage this in ionic v1 via $rootScope but here in Ionic v3, how can I resolve this ?
Also I am giving the html of Home page
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
<common-button></common-button>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click) = 'clickHere()'> Click </button>
</ion-content>
Please suggest me what to do.
Generally, you need to use Input decorator. Check Component Interactions.
In CommonBtnPage,
import { Component,Input } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
#Component({
selector: 'common-button',
templateUrl: 'commonBtn.html'
})
export class CommonBtnPage {
#Input()title:string;//here
constructor(public navCtrl: NavController) { }
logOut() {
this.navCtrl.setRoot(LoginPage);
}
}
In the html, set the title,
<ion-header>
<ion-navbar>
<ion-title>{{title}}</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="logOut()">
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
You can set the component and send the title as:
<common-button [title]="'home'"></common-button>
Having had some experience with Angular 1.x (but not Ionic 1.x), I am now trying to develop a small mobile app using Ionic 2, which is based on Angular 2.
I am familiar with URL-based routing principles such as those used in ui-router. The concept in Ionic 2 is different and is based on pushing/popping pages on top of a root page.
So far I have managed to create 2 pages (Search and Person) with a nav bar on top, and to navigate from one to the other, and back. The navbar has a button to return to the root (Search) page (because later it will be possible to navigate from a person to other pages, further away from the root page).
However I could not figure out how to extract the navbar and navbar controller in a separate file. So the markup and the button handler (goToSearch) are repeated in every page.
How can I extract the navbar template and logic so as not to repeat it ?
Bonus question (and strongly related) : Can someone explain the difference between the ion-nav in app.html and the ion-navbar in the pages ?
app.ts :
import 'es6-shim';
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {Search} from './pages/search/search'
#App({
templateUrl: 'build/pages/app.html',
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
rootPage: any = Search;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
}
app.html :
<ion-nav [root]="rootPage">
<ion-buttons end>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-nav>
search.ts :
import {Page} from 'ionic-angular';
import {Nav} from 'ionic-angular';
import {Person} from '../person/person'
#Page({
templateUrl: 'build/pages/search/search.html',
})
export class Search {
nav:Nav;
constructor(nav:Nav) {
this.nav = nav;
}
goToPerson() {
this.nav.push(Person);
}
}
search.html:
<ion-navbar *navbar>
<ion-title>Search</ion-title>
<ion-buttons end>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content padding class="page1">
<h2>Welcome to SEARCH</h2>
<button (click)="goToPerson()">Go to person</button>
</ion-content>
person.ts :
import {Page} from 'ionic-angular';
import {Nav} from 'ionic-angular';
import {Search} from '../search/search'
#Page({
templateUrl: 'build/pages/person/person.html',
})
export class Person {
nav:Nav;
constructor(nav:Nav) {
this.nav = nav;
}
goToSearch() {
this.nav.push(Search);
}
}
person.html :
<ion-navbar *navbar>
<ion-title>Person</ion-title>
<ion-buttons end>
<button (click)="goToSearch()">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content padding class="page1">
<h2>Welcome to PERSON</h2>
<button (click)="goToSearch()">Go to search</button>
</ion-content>
you could create a component to hold your header config, components are reusable and can be very dynamic, just dont forget to import it on your module
default-header.html
<ion-navbar *navbar>
<ion-title>{{pageTitle}}</ion-title>
<ion-buttons end>
<button (click)="goToSearch()">
<ion-icon name="{{icon}}"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
default-header.ts
import { Component, Input, Inject, ViewChild } from "#angular/core";
import { Content } from "ionic-angular";
import { NavController } from "ionic-angular/navigation/nav-controller";
import {Person} from '../person/person'
#Component({
selector: "default-header",
templateUrl: "default-header.html"
})
export class DefaultHeaderComponent {
#Input() pageTitle: any;
#Input() icon= true;
#ViewChild(Content) content: Content;
constructor(
public navCtrl: NavController,
) {
console.log("Hello DefaultHeaderComponent Component");
}
ionViewDidLoad() {
const self = this;
}
gotNotificationsPage() {
this.global.setRoot("NotificationsPage");
}
}
and call it in the place of your navbar like this in any page
<default-header [title]="'Person'" [icon]="'search'"></default-header>