I have a integrated a google maps in one of my ionic application pages and it is working fine on all browsers, and mobile platform. I used this one;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
zoomControl: false,
fullscreenControl: true
});
}
but it was not working on almost most of the platforms.
This is my .html
<ion-header *ngIf="FullScreen">
<ion-navbar class="navbar">
<ion-grid no-padding>
<ion-row align-items-center class="navbarSection">
<ion-col col-4 class="menuSection">
<button tappable ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
<div>
Menu
</div>
</button>
</ion-col>
<ion-col col-4 class="titleSection">
<ion-title>
<h5>Customers</h5>
</ion-title>
</ion-col>
<ion-col col-4 class="buttonsSection">
<ion-buttons>
<button ion-button icon-left (click)="CreateCustomer()">
<ion-icon name="contact"></ion-icon>
New Customer
</button>
</ion-buttons>
</ion-col>
</ion-row>
<ion-row align-items-center>
</ion-row>
</ion-grid>
</ion-navbar>
</ion-header>
<ion-content class="backcolor-pagegray">
<div [hidden]="!MapView" #map id="map"></div>
</ion-content>
I tried to do this one https://www.doogal.co.uk/FullScreen.php
but I had typescript errors.
What is the best way to achieve that?
Related
I have an issue with a function which loads posts with the ionic infinite scroll component.
The function works great on other components but in this one, the view doesn't update when I push new posts into the array.
This is the function that doesn't work:
// handles infinite scroll
// loads more posts when getting to the bottom of the page
async loadMorePosts(event): Promise<void> {
await this.postService.getUserPosts(this.userId, this.offset).toPromise().then((posts: Posts) => {
posts.rows.forEach((post: Post) => {
this.posts.push(post)
})
})
event.target.complete()
// increments offset for the next query
this.offset += this.offset
// if all data is loaded, disables infinite scroll
if (this.posts.length == this.totalPosts) {
event.target.disabled = true;
}
}
This is the one that works:
// handles infinite scroll
// loads more posts when getting to the bottom of the page
async loadMorePosts(event): Promise<void> {
await this.postService.getOwnPosts(this.offset).toPromise().then((posts: Posts) => {
return posts.rows.forEach((post: Post) => {
this.posts.rows.push(post)
})
})
event.target.complete()
// increments offset for the next query
this.offset += this.posts.offset
// if all data is loaded, disables infinite scroll
if (this.posts.rows.length == this.totalPosts) {
event.target.disabled = true;
}
}
Here is the html:
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-grid id="profile" class="ion-no-padding">
<ion-row class="ion-justify-content-center">
<ion-col class="profile" size="10">
<div>
<ion-avatar class="profile__avatar">
<ion-img src="/assets/img/profile_img.jpeg"></ion-img>
</ion-avatar>
</div>
<div class="profile__gym">
<div class="profile__gym-location">
<ion-icon name="location-sharp"></ion-icon>
<p>{{profile?.gym}}</p>
</div>
<div class="profile__gym-sport">
<ion-img src="/assets//img/male_flexin.png"></ion-img>
<p>{{profile?.discipline}}</p>
</div>
</div>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-center">
<ion-col size="9">
<div class="description">
<p>{{profile?.bio}}</p>
</div>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-evenly buttons">
<ion-col size="4">
<ion-button (click)="follow()" mode="ios" expand="block">
{{profile?.isFollowing ? "Abonné(e)" : "S'abonner" }}
</ion-button>
</ion-col>
<ion-col size="4">
<ion-button (click)="navigateToDirectMessages()" mode="ios" expand="block">
Écrire
</ion-button>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-center">
<ion-col size="10">
<div (click)="navigateToFollowers(profile?.user_id)" class="follow-count">
<div class="follow-count--flex-column txt-center">
<p>{{totalPosts}}</p>
<p class="follow-count__txt">Posts</p>
</div>
<div class="follow-count--flex-column txt-center">
<p>{{following?.count}}</p>
<p class="follow-count__txt">Abonnements</p>
</div>
<div class="follow-count--flex-column txt-center">
<p>{{followers?.count}}</p>
<p class="follow-count__txt">Abonnés</p>
</div>
</div>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-center ion-margin-bottom">
<ion-col size="10">
<div class="sections">
<div (click)="setSection(0)" class="sections__gallery">
<p>Gallerie</p>
<ion-icon *ngIf="indexSection == 0" name="ellipse"></ion-icon>
</div>
<div (click)="setSection(1)" class="sections__routine">
<p>Programmes</p>
<ion-icon *ngIf="indexSection == 1" name="ellipse"></ion-icon>
</div>
<div (click)="setSection(2)" class="sections__nutrition">
<p>Diète</p>
<ion-icon *ngIf="indexSection == 2" name="ellipse"></ion-icon>
</div>
</div>
</ion-col>
</ion-row>
<ion-row class="card-row">
<ion-col>
<ion-card class="card">
<ion-slides [options]="sliderOpts" #slides (ionSlideDidChange)="slideToSection()">
<ion-slide>
<div class="gallery">
<div class="gallery__img" *ngFor="let post of posts ; let i = index">
<ion-img (click)="openLightbox(i)" [src]="imgUrl+post?.img"></ion-img>
</div>
<div *ngIf="!posts" class="gallery__placeholder">
<ion-label>Cette section est vide</ion-label>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="program">
<ion-card *ngFor="let program of profile?.programs ; let i = index">
<ion-item (click)="navigateToProgram(program?.id)" detail lines="none">
<ion-label>
<h5>
{{setDay(program?.day)}}
</h5>
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" size="small" name="time-outline"></ion-icon>
<ion-label>
{{program?.duration}}</ion-label>
</ion-item>
</ion-card>
<div *ngIf="profile?.programs?.length == 0" class="program__placeholder">
<ion-label>Cette section est vide</ion-label>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="nutrition">
<ion-card (click)="navigateToMeal(meal?.id)" *ngFor="let meal of profile?.meals">
<ion-item class="nutrition__meal" detail lines="none">
<ion-label>
<h3>
{{meal?.name}}
</h3>
<p>{{meal?.time}}</p>
</ion-label>
<ion-label class="nutrition__meal-cal">
<h3>{{calculateTotalNutriments(meal?.meal_components,"kcal_100g") | number:'1.1-1'}}Kcal</h3>
</ion-label>
</ion-item>
<ion-item lines="none" class="nutrition__meal-macros">
<ion-icon class="proteins-ellipse" name="ellipse"></ion-icon>
<ion-label>
<h5>Protéines</h5>
<p>{{calculateTotalNutriments(meal?.meal_components,"proteins_100g") | number:'1.1-1'}}g</p>
</ion-label>
<ion-icon class="carbs-ellipse" name="ellipse"></ion-icon>
<ion-label>
<h5>Glucides</h5>
<p>{{calculateTotalNutriments(meal?.meal_components,"carbohydrates_100g") | number:'1.1-1'}}g</p>
</ion-label>
<ion-icon class="fat-ellipse" name="ellipse"></ion-icon>
<ion-label>
<h5>Lipides</h5>
<p>{{calculateTotalNutriments(meal?.meal_components,"fat_100g") | number:'1.1-1'}}g</p>
</ion-label>
</ion-item>
</ion-card>
<div *ngIf="profile?.meals?.length == 0" class="nutrition__placeholder">
<ion-label>Cette section est vide</ion-label>
</div>
</div>
</ion-slide>
</ion-slides>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
<app-lightbox id="lightbox" class="lightbox" [totalPosts]="totalPosts" [postIndex]="postIndex" [posts]="posts">
</app-lightbox>
<ion-infinite-scroll (ionInfinite)="loadMorePosts($event)">
<ion-infinite-scroll-content loadingSpinner="crescent">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
I'm new to this so if some informations are lacking or my request isn't properly formed, please feel free to say so.
Thanks for the help
You are missing the return keyword.
await this.postService.getUserPosts(this.userId, this.offset).toPromise().then((posts: Posts) => {
return posts.rows.forEach((post: Post) => {
this.posts.push(post)
})
})
My problem has been solved. There were conflicts with the card margin and overflow when the change detection was triggered, the new post was hidden underneath.
Am learning ionic however with the following code
#ViewChild(MultiImageUploadComponent) multiImageUpload: MultiImageUploadComponent;
however when i try to implement tabs using ion-segment and ng-switch i cant seen to access multiImageUpload from the second tab. like so . i keep getting the error co.multiImageUpload is undefined whenever switching to the second tab
<ion-segment [(ngModel)]="defaultTab">
<ion-segment-button value="managePhotos">
Manage Photos
</ion-segment-button>
<ion-segment-button value="addPhotos">
Add Photos
</ion-segment-button>
</ion-segment>
<div [(ngSwitch)]="defaultTab">
<ion-grid *ngSwitchCase="'managePhotos'">
<ion-row>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let photo of storyData.photos">
<div class="image-container" [style.background-image]="'url('')'" (click)='photo()'></div>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid *ngSwitchCase="'addPhotos'">
<ion-row>
<multi-image-upload></multi-image-upload>
<button ion-button block (click)="newStory()" *ngIf="!multiImageUpload.isUploading && !uploadFinished">
<ion-icon name="checkmark"></ion-icon>
Upload
</button>
<button ion-button block (click)="cancel()" color="danger" *ngIf="multiImageUpload.isUploading && !uploadFinished">
<ion-icon name="close"></ion-icon>
Cancel
</button>
</ion-row>
</ion-grid>
</div>
I am using ionic latest version. Using ion-slide, I have limited the width of every single slide to 80% which is working fine.
But if we scroll it to the end, there is white space area left and all the slides hide to the left.
Snapshot : https://firebasestorage.googleapis.com/v0/b/notpol-staging.appspot.com/o/share.PNG?alt=media&token=12d91447-5a34-499f-b7af-b587acdd6b1b
<ion-slides style="height: 34%" speed="2000">
<ion-slide style="width:80%">
<ion-card>
<img src="./assets/images/slider4.jpg" />
<ion-card-content>
<ion-card-title>
Hair Style
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide style="width:80%">
<ion-card>
<img src="./assets/images/slider4.jpg" />
<ion-card-content>
<ion-card-title>
Hair Style
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide style="width:80%">
<ion-card>
<img src="./assets/images/slider4.jpg" />
<ion-card-content>
<ion-card-title>
Hair Style
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide style="width:80%">
<ion-card>
<img src="./assets/images/slider4.jpg" />
<ion-card-content>
<ion-card-title>
Hair Style
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
my code: (i tried to change all navbars for toolbars, and also tried adding fixed attribute to the toolbars, and no luck). any page i scroll down in my iphone, the toolbar scrolls as well, and it doesn't happen in my android.
<ion-header>
<ion-navbar
color="danger"
hideBackButton>
<ion-title>
Home
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div *ngIf="checkVacio()" id="cartaInicial">
<img src="assets/images/lista.png" id="imagenInicial">
<p id="parrafo" >Para crear una lista solo debes <br> presionar el boton rojo</p>
</div>
<ion-list no-lines>
<ion-item id="items"
*ngFor="let lista of Listas"
[navPush]="listaTerminada"
[navParams]="lista"
>{{lista.listaNombre}}
<p>{{lista.nombre}}</p>
<button ion-button icon-only
item-end clear color="danger"
(click)="onDelete(lista.listaNombre)"
><ion-icon name="md-close"></ion-icon></button>
</ion-item>
</ion-list>
<ion-fab bottom right>
<button ion-fab mini
color="danger"
[navPush]="cadenasMercadosPage">
<ion-icon name="add"></ion-icon>
</button>
</ion-fab>
</ion-content>
You have to add this in your config.xml in order to avoid page from scrolling:
<preference name="DisallowOverscroll" value="true" />
I would like to achieve following effect in ionic framework. When i click on the arrow, the boxes will slide up as in the right. When i click the arrow or any other area except the text box, it will return to original position. It should be appearing under any view that have menu.html as abstract view. How could it be done? I try my first step as below but nothing is appear.
Plunkr here
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<!-- Nothing appear -->
<div style="position: fixed; bottom: 0; height: 200px;">Text here</div>