i am new to ionic and recently i tried to create a shared component so that i can sort of remove duplicate coding of same content on different page. It consist of a notification bar and a panel that have a login/signup button. I am able to display the notification bar and the login panel on pages that i want but i am unable to call the function of the login/signup button.
Whenever i click the login/signup button, it will said presentLoginModal() is not a function. Below are my code.
Hope someone can advice me on this. Thanks.
shared.module.ts
import {NgModule} from '#angular/core';
import {IonicPageModule} from 'ionic-angular';
import {NotificationComponent} from '../notification/notification';
import {NonLoginComponent} from '../nonlogin/nonlogin';
#NgModule({
imports: [IonicPageModule.forChild(NotificationComponent),IonicPageModule.forChild(NonLoginComponent)],
declarations: [NotificationComponent, NonLoginComponent],
exports: [NotificationComponent, NonLoginComponent]
}) export class SharedModule {}
nonlogin.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import {Login} from '../login/login';
import {Register} from '../register/register'
#IonicPage()
#Component({
selector: 'app-nonlogin',
templateUrl: './nonlogin.html'
})
export class NonLoginComponent {
constructor(public navCtrl: NavController) {}
presentLoginModal() {
let loginModal = this.modalCtrl.create(Login, {showBackdrop: true, enableBackdropDismiss: true},{cssClass: 'logon'});
loginModal.present();
}
presentRegisterModal(){
let registerModal = this.modalCtrl.create(Register, {showBackdrop: true, enableBackdropDismiss: true},{cssClass: 'register'});
registerModal.present();
}
}
notification.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'app-notification',
templateUrl: './notification.html'
})
export class NotificationComponent {
constructor(public navCtrl: NavController) {}
}
nonlogin.html
<div class="toppanel"><div class="leftside"><img class="companylogo"
src="../../assets/imgs/logo.jpg"></div><div class="rightside">
<button tappable class="login" ion-button
(click)="presentLoginModal()">LOG IN</button><button tappable
class="signup" ion-button (click)="presentRegisterModal()">SIGN
UP</button></div></div>
home.html
<ion-content>
<app-notification></app-notification>
<app-nonlogin></app-nonlogin>
</ion-content>
Related
I'm trying to embed a YouTube video through their iframe API in Ionic 3 app on a lazy-loaded page.
sample.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular';
#IonicPage({
name: 'samplePage',
segment: 'sample'
})
#Component({
selector: 'page-sample',
templateUrl: 'sample.html'
})
export class SamplePage {
constructor(public navCtrl: NavController) {
}
}
sample.module.ts
import {NgModule} from '#angular/core';
import {IonicPageModule} from 'ionic-angular';
import { SamplePage } from './sample';
#NgModule({
declarations: [
SamplePage
],
imports: [
IonicPageModule.forChild(SamplePage)
],
exports: [
SamplePage
]
})
export class SamplePageModule {
}
sample.html
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoID" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I was expecting that this YouTube video will work in all the browsers but this is random.
The video is not working on Chrome browser but when I open the developer mode or change the screen size it works.
This is only happening when I'm adding it to a lazy loaded page using #IonicPage() annotation but when I remove this annotation and use the page normally, that works fine everywhere.
I am using Ionic and Firebase. I have created firebase project, clicked on icon to "add fire to your android app" and followed the steps.
Foll. is code on my html page:
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
Firebase Analytics
<p>
Click the button to log a custom event
</p>
<button ion-button full (click)="logClick()">Log event</button>
</ion-content>
Below code is on the ts of this page:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { EventLoggerProvider } from '../../providers/event-logger/event-logger';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController,
public logger: EventLoggerProvider) {
}
logClick() {
this.logger.logButton('homeButton',{ pram: "paramValue" })
}
}
Foll. code is in the provider:
import { HttpClient } from '#angular/common/http';
import { Injectable } from '#angular/core';
import { FirebaseAnalytics } from '#ionic-native/firebase-analytics';
#Injectable()
export class EventLoggerProvider {
constructor(public fba: FirebaseAnalytics) {
console.log('Hello EventLoggerProvider Provider');
}
logButton(name:string,value:any){
this.fba.logEvent(name, { pram:value })
.then((res: any) => {console.log(res);})
.catch((error: any) => console.error(error));
}
}
I ran "ionic cordova run android" and launched the app on mobile device and everything seems to be OK. However, when I do "ionic serve", the page loads OK in the browser, but when I click the button, what could have caused it to give the foll. error?
Ionic - Runtime Error this.fba.logEvent(...).then is not a function
Now its more clear after seing the code.
import { FirebaseAnalytics } from '#ionic-native/firebase-analytics';
#ionic-native functions only work on the real device or simulator. Otherwise, it will give an error.
How do I create 5 star rating in ionic 3, I visited https://github.com/andrucz/ionic2-rating but it is not working. Also read some tutorial but not found anything clean and clear for ionic 3.
Just for clear, I want to get rating value and display rating.
Any help would be appreciated.
Thankyou
Demo: https://stackblitz.com/edit/ionic3-star-rating
Use github.com/melwinVincent/ionic3-star-rating npm package.
Step 1. Add the ionic3-star-rating component in your page (parent component) as follows
<ionic3-star-rating
activeIcon = "ios-star"
defaultIcon = "ios-star-outline"
activeColor = "#488aff"
defaultColor = "#f4f4f4"
readonly="false"
[rating]="3">
</ionic3-star-rating>
Step 2.
You have to import the StarRatingModule in the module.ts of your parent component as follows
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ParentPage } from './parent';
import { StarRatingModule } from 'ionic3-star-rating';
#NgModule({
declarations: [
ParentPage,
],
imports: [
StarRatingModule,
IonicPageModule.forChild(ParentPage),
],
})
export class ParentPageModule {}
Step 3.
To get the changed rating in the parent component,
You need to use events from ionic package.
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Events } from 'ionic-angular';
#Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
constructor(public navCtrl: NavController,
public events: Events) {
events.subscribe('star-rating:changed', (starRating) => {console.log(starRating)});
}
}
l’m developing app which uses a json file it works perfectly in local server, but isn't display weather data from an API Json .
Here is the code :
RedditData.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import 'rxjs/add/operator/map';
#Injectable()
export class RedditData {
private url : string = "http://api.wunderground.com/api/d8585d80376/lang:AR/conditions/geolookup/q/ormm.json";
constructor(public http: HttpClient) {
console.log('Hello RedditData Provider');
}
getRemoteData(){
return this.http.get(this.url)
}
}
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { RedditData } from '../../providers/reddit-data/reddit-data';
import { HttpClient } from '#angular/common/http';
import 'rxjs/add/operator/map';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
weather: any={};
constructor(public navCtrl: NavController, public redditService: RedditData) {
}
ionViewDidLoad(){
this.redditService.getRemoteData()
.subscribe(weather => {
console.log(weather)
this.weather.current_observation;
});
}
}
the code working fine in console with out any error , but no information in html
<ion-header >
<ion-navbar color="primary">
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding *ngIf="weather">
<p > {{weather.observation_time}}</p>
</ion-content>
You're not assigning the data to the component property:
ionViewDidLoad(){
this.redditService
.getRemoteData()
.subscribe((weather: any) => {
console.log(weather)
this.weather = weather.current_observation; // <-- here!
});
}
In my ionic2 application, I have a textbox , now i am submitting the form without add any value in that textbox , at that time i have give an alert that 'the textbox can not be empty'.
now when alert get close focus should be in same texbox.
import {Component, Input, ViewChild} from '#angular/core';
import {NavController} from 'ionic-angular';
#Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
#ViewChild('input') myInput ;
constructor(private navCtrl: NavController) { }
ionViewLoaded() {
setTimeout(() => {
this.myInput.setFocus();
},150);
}
}
1) import "Input", "ViewChild" and "NavController"
import {Component, Input, ViewChild} from '#angular/core';
import {NavController} from 'ionic-angular';
2) Create a reference to your input in your template :
<ion-input #input>
#ViewChild('input') myInput ;
3) Trigger the focus
ionViewLoaded() {
setTimeout(() => {
this.myInput.setFocus();
},150);
}
4) Show the keyboard
add this line to your config.xml :
<preference name="KeyboardDisplayRequiresUserAction" value="false" />