I'm develop mobile with IONIC Cordova, and I'm very beginner in this.
I want to question how to display navbar in Page Webview, my page webview use InAppBrowser.
this is my page.html
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>WV</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
this my page.ts
#IonicPage()
#Component({
selector: 'page-wv',
templateUrl: 'wv.html',
})
export class WvPage {
my_url: any;
constructor(public navCtrl: NavController, public navParams: NavParams, private IAB: InAppBrowser) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad WvPage');
}
ngOnInit(){
const browser = this.IAB.create('http://myUrl.com/', '_self', {location: 'no'});
}
}
Related
In My ionic 3 app the tab bar is getting disappear when navigating from side bar. All other pages are working fine. Only when routing from side bar, tab is getting disappear.
Here is my app.html
<ion-menu [content]="content" type="overlay">
<ion-content class="menubar">
<ion-list class="mainmenu">
<div class="profile">
<ion-row>
<ion-col col-4><img src="./assets/imgs/wgs-logo.png" alt=""></ion-col>
<ion-col col-8 class="j-c-center" (click)="openLandingPage()">
<ion-icon slot="start" class="landing-page-icon" name="custom-landing-page"></ion-icon>
</ion-col>
</ion-row>
</div>
<ion-item no-lines class="menuitem" *ngFor="let cate of categoryFullData; let i = index;">
<button ion-button clear menuToggle (click)="opencategory(cate.id, cate.categry)">
<img src="{{baseUrlImage}}{{cate.cateimg}}">
<p>{{cate.categry}}</p>
</button>
<ion-icon slot="end" name="ios-arrow-down" class="icon-down-arrow" (click)="menuItemHandler(i)"></ion-icon>
<ion-item-group submenu [class.visible]="showSubmenu[i]">
<ion-item no-lines class="menuitem" *ngFor="let subcate of cate.subcategories; let i = index;">
<button ion-button clear (click)="opencategory(subcate.id, subcate.categry)" menuToggle>
<img src="{{baseUrlImage}}{{subcate.cateimg}}">
<p>{{subcate.categry}}</p>
</button>
</ion-item>
</ion-item-group>
</ion-item>
<ion-item no-lines class="menuitem">
<button ion-button clear menuToggle (click)="openLandingPage()">
Sell
</button>
</ion-item>
<ion-item no-lines class="menuitem">
<button ion-button clear menuToggle (click)="openAboutUs()">
<p>About Us</p>
</button>
</ion-item>
<ion-item no-lines class="menuitem">
<button ion-button clear menuToggle (click)="openTermsAndConditions()">
<p>Terms & Conditions</p>
</button>
</ion-item>
<ion-item no-lines class="menuitem">
<button ion-button clear menuToggle (click)="openPrivacyPolicy()">
<p>Privacy Policy</p>
</button>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
Here is my app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Nav, Platform, App, LoadingController, AlertController, ToastController } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { NotificationsPage } from '../pages/notifications/notifications';
import { OrderHistoryPage } from '../pages/order-history/order-history';
import { ContactPage } from '../pages/contact/contact';
import { FeedbackPage } from '../pages/feedback/feedback';
import { HomePage } from '../pages/home/home';
import { OffersPage } from '../pages/offers/offers';
import { TermsPage } from '../pages/terms/terms';
import { HkApiproviderProvider } from '../providers/hk-apiprovider/hk-apiprovider';
import { CategoryPage } from '../pages/category/category';
import { LanguageServiceProvider } from '../providers/language-service/language-service';
import { TranslateService } from '#ngx-translate/core';
import { TabsPage } from '../pages/tabs/tabs';
import { ProductsPage } from '../pages/products/products';
import { LandingPage } from '../pages/landing-page/landing-page';
import { PrivacyPage } from '../pages/privacy/privacy';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
validEmail:any;
rootPage: any = TabsPage;
showSubmenu = [];
resposeData: any;
categoryFullData:any;
pages: Array<{title: string, component: any}>;
apptoken = {"token":""};
postData={
"user_id":"",
"token":"",
}
baseUrlImage: any;
itemsuperqty: number;
userDetails: any;
constructor(public platform: Platform, public auth:HkApiproviderProvider,public app:App, public toastCtrl: ToastController, public loadingCtrl:LoadingController, public alertCtrl:AlertController, public statusBar: StatusBar, public splashScreen: SplashScreen,public langserv : LanguageServiceProvider, translate: TranslateService) {
this.initializeApp();
this.apptoken.token = HkApiproviderProvider.gettoken();
localStorage.setItem('appconfig', JSON.stringify(this.apptoken));
langserv.getdefaultlang();
translate.setDefaultLang(langserv.defaultlang);
this.langserv.changelang('en');
this.itemsuperqty = 1;
this.baseUrlImage = auth.getimage();
if(localStorage.getItem('userData')){
const data = JSON.parse(localStorage.getItem('userData'));
this.userDetails = data.userData;
}
this.postData.token = HkApiproviderProvider.gettoken();
this.getcategorydata();
}
/* menuItemHandler(): void {
this.showSubmenu = !this.showSubmenu;
} */
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.backgroundColorByHexString('#307722');
this.splashScreen.hide();
});
}
onclickHome(){
this.nav.setRoot(HomePage , { tabIndex: 0 });
}
onclickcategory(){
this.nav.push(CategoryPage , { tabIndex: 0 });
}
onclickMyOrder(){
this.nav.push(OrderHistoryPage , { tabIndex: 1 });
}
openContact(){
this.nav.push(ContactPage , { tabIndex: 0 });
}
onclickNoti(){
this.nav.push(NotificationsPage , { tabIndex: 0 });
}
openfeedback(){
this.nav.push(FeedbackPage , { tabIndex: 0 });
}
openoffers(){
this.nav.push(OffersPage , { tabIndex: 0 });
}
openterms(){
this.nav.push(TermsPage , { tabIndex: 0 });
}
openprivacy(){
this.nav.push(TermsPage , { tabIndex: 0 });
}
openLandingPage(){
this.nav.push(LandingPage);
}
checkLogin(){
if(localStorage.getItem('userData')){
return true;
}else{
return false;
}
}
menuItemHandler(index): void {
if(this.showSubmenu[index] && this.showSubmenu[index] == false) {
this.showSubmenu[index] = true;
} else if (this.showSubmenu[index] && this.showSubmenu[index] == true) {
this.showSubmenu[index] = false;
} else {
this.showSubmenu[index] = true;
}
}
public getcategorydata()
{
let zest = this.loadingCtrl.create({
content: "Getting Data..",
duration:20000,
spinner:'crescent'
});
zest.present();
this.auth.postData(this.postData, "getcategory").then((result) => {
this.resposeData = result;
this.categoryFullData = this.resposeData.Data;
//console.log(result);
zest.dismiss();
}, (err) => {
zest.dismiss();
});
}
opencategory(category, cname){
this.nav.push(ProductsPage,{
category : category,
cname : cname,
tabIndex: 1
});
}
openAboutUs() {
this.nav.push(ContactPage);
}
openTermsAndConditions() {
this.nav.push(TermsPage);
}
openPrivacyPolicy() {
this.nav.push(PrivacyPage);
}
}
This is my tabs.html page
<ion-tabs>
<ion-tab [root]="tab6Root" class="tab-bar" tabIcon="custom-landing-page">
</ion-tab>
<ion-tab [root]="tab1Root" class="tab-bar" tabIcon="ios-home-outline">
</ion-tab>
<ion-tab [root]="tab2Root" class="tab-bar" tabIcon="ios-person-outline">
</ion-tab>
<ion-tab [root]="tab3Root" class="tab-bar" tabIcon="icon-cart-white" [tabBadge]="cartCounterManager()">
</ion-tab>
<ion-tab [root]="tab4Root" class="tab-bar" tabIcon="ios-heart-outline" [tabBadge]="wishListCounterManager()">
</ion-tab>
<ion-tab [root]="tab5Root" class="tab-bar" tabIcon="ios-search-outline">
</ion-tab>
</ion-tabs>
tabs.component.ts
import { Component } from '#angular/core';
import { ProductSearchPage } from '../product-search/product-search';
import { ProfilePage } from '../profile/profile';
import { HomePage } from '../home/home';
import { CartPage } from '../cart/cart';
import { WishListPage } from '../wishlist/wishlist';
import { NavController, NavParams } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { ProductsPage } from '../products/products';
import { LandingPage } from '../landing-page/landing-page';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = ProfilePage;
tab3Root = CartPage;
tab4Root = WishListPage;
tab5Root = ProductSearchPage;
tab6Root = LandingPage;
selectedIndex: Number;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
){
}
ionViewDidLoad() {
this.selectedIndex = this.navParams.get('tabIndex') || 0;
console.log(this.selectedIndex)
}
cartCounterManager(){
return HomePage.cartData.length
}
wishListCounterManager(){
return HomePage.wishListData.length
}
}
I tried every method available but none works. Please help. Every small comments will be appreciated.
I am using a template I bought recently to build my ionic + angular app. My problem is that I am new to angular and I am trying to redirect the user when the click a button. I've been researching and I got the point where it detects the click but doesn't redirect. I tried importing "router" and other troubleshooting steps but it's not working for me. Here is my html, and ts file.
html
<!--Theme Google Card - Full Image Cards-->
<ion-content padding-top>
<ion-grid no-padding>
<ion-row *ngIf="data != null">
<ion-col col-12 col-md-6 col-lg-6 *ngFor="let item of data.items;let i = index">
<ion-card text-left box-shadow margin-bottom>
<!--Card Image-->
<div card-image>
<img [src]="item.image" />
<div watch-now text-center (click)="onEvent('onItemClick', item, $event)">
<button ion-button button-icon icon-start>
<ion-icon icon-small [name]="item.icon"></ion-icon>
{{item.iconText}}
</button >
</div>
</div>
<!--Card descriptiom-->
<ion-card-content>
<ion-card-title text-center>
<!--Card Subtitle-->
<h1 card-title>{{item.title}}</h1>
<!-- Icon Rating Star -->
<ion-icon *ngFor="let star of item.ratingStar.iconsStars; let i = index" (click)="onStarClass(item.ratingStar.iconsStars, i, $event)">
<i icon-small *ngIf="star.isActive" class="icon {{star.iconActive}}"></i>
<i icon-small *ngIf="!star.isActive" class="icon {{star.iconInactive}}"></i>
</ion-icon>
<!-- Reviews Star -->
<span span-medium>{{item.reviews}}</span>
<!--Card Body Text-->
<p margin-top card-body-text>{{item.description}}</p>
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
TS
import { Component, Input, ViewChild } from '#angular/core';
import { IonicPage, Content } from 'ionic-angular';
#IonicPage()
#Component({
selector: 'google-card-layout-1',
templateUrl: 'google-card.html'
})
export class GoogleCardLayout1 {
#Input() data: any;
#Input() events: any;
#ViewChild(Content)
content: Content;
slider = {};
constructor() { }
slideHasChanged(slider, index): void {
this.slider[index] = slider;
if (2 == slider._activeIndex) {
if (this.data.items) {
this.data.items.splice(index, 1);
} else {
this.data.splice(index, 1);
}
}
}
onStarClass(items: any, index: number, e: any) {
if (e) {
e.stopPropagation();
}
for (var i = 0; i < items.length; i++) {
items[i].isActive = i <= index;
}
this.onEvent("onRates", index, e);
};
onClickEvent(index): void {
if (this.slider[index]) {
this.slider[index].slidePrev(300);
}
}
onEvent(event: string, item: any, e: any) {
if (e) {
e.stopPropagation();
}
if (this.events[event]) {
this.events[event](item);
}
}
}
Firstly you have to declare your route in your routing file in my case i have one newly created component so i update my route as follow
{
path: 'admin',
canActivate: [AuthGuard],
loadChildren: './pages/admin/admin.module#AdminModule'
},
After that there are two method to navigate,
1) <button [routerLink]="['/admin']" ion-button button-icon icon-start>
2) <button (click)="navigate()" ion-button button-icon icon-start>
and in your ts file add code
navigate() {
this.router.navgateURL(['/admin']);
}
Try:
<button [routerLink]="['/path']" ion-button button-icon icon-start>
I'm building ionic app for wallpaper/gallery.I want app to show wallpaper in full screen when user clicks on a particular image.
Thanks.
HTML code:
<ion-header>
<ion-navbar color="dark">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Walldo</ion-title>
</ion-navbar>
</ion-header>
<ion-slides zoom="true">
<ion-slide>
<div class="swiper-zoom-container">
<img id="fullwall" src="some link">
</div>
<ion-label>Elephant</ion-label>
<button ion-button round (click)="download('wall.jpg')">Download</button>
</ion-slide>
</ion-slides>
TYPESCRIPT code:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
#IonicPage()
#Component({
selector: 'page-popular',
templateUrl: 'popular.html',
})
export class PopularPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad PopularPage');
}
}
It's a simple property binding:
<img [src]="theWallImageUrl" />
and in the code of the component:
this.theWallImageUrl = ...
I have some issue with my code. Can't navigate from home page to for example about page. The application is in ionic framework. Totally new in this technology. In console no warnings and errors.
home.ts
import { Component } from '#angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { Auth } from '#ionic/cloud-angular';
import { User } from '#ionic/cloud-angular';
import { LoginPage } from '../login/login';
import { About } from '../about/about';
import { ChatPage } from '../chat/chat';
#IonicPage()
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public auth: Auth, public user: User) {
console.log(user);
}
logout() {
this.auth.logout();
this.navCtrl.setRoot(LoginPage);
}
about(){
this.navCtrl.setRoot(About);
}
chat(){
this.navCtrl.setRoot(ChatPage);
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>
Home
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="logout()">
<ion-icon name="exit"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome back, {{ user.details.name }}</h2>
<p>
<button ion-button color="secondary" block>Something</button>
</p>
<p>
<button ion-button color="secondary" block [navPush]="ChatPage">Chat</button>
</p>
<p>
<button ion-button color="secondary" block [navPush]="About">About</button>
</p>
</ion-content>
about.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
#IonicPage()
#Component({
selector: 'page-about',
templateUrl: 'about.html',
})
export class About {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad About');
}
}
about.html
<ion-header>
<ion-navbar>
<ion-title>about</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="about">
This is my super awesome about page.
</ion-content>
One possible and easy solution is call method on click of button. As you are defining about() method in home.ts now call this method on click of button. just update code in home.html
<ion-header>
<ion-navbar>
<ion-title>
Home
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="logout()">
<ion-icon name="exit"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome back, {{ user.details.name }}</h2>
<p>
<button ion-button color="secondary" block>Something</button>
</p>
<p>
<button ion-button color="secondary" block (click)="chat()">Chat</button>
</p>
<p>
<button ion-button color="secondary" block (click)="about()">About</button>
</p>
</ion-content>
I'm using Bluetooth serial in my Ionic2 app and I want to connect to the device.
Got this now in the .ts file but doesn't works. I can enable bluetooth but cant connect.
import { Component } from '#angular/core';
import { BluetoothSerial } from 'ionic-native';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public stat_on:any;
public stat_con:any;
public macAddress:"98:D3:31:90:77:36";
constructor(public navCtrl: NavController) {
}
turnON(){
BluetoothSerial.enable().then((status)=> {
this.stat_on=status;
});
}
Connect(){
BluetoothSerial.isEnabled().then((data)=> {
BluetoothSerial.connect("98:D3:31:90:77:36").then((stat_con)=>{
this.stat_con=stat_con;
});
});
}
}
Here is my HTML file
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-fab right bottom>
<button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
</ion-fab>
<ion-card-content>
<button ion-button (click)="turnON()">Turn ON Bluetooth</button>
<button ion-button (click)="Connect()">Connect</button>
<p>BT: {{ stat_on }}</p>
<p>Status: {{ stat_connect }}</p>
</ion-card-content>
</ion-content>
Thanks before :)