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`
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);
}
}
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.
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);
});
}
}
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>