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>
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.
I am creating a page with Angular, using Angular-Material where I must place two sidenav, one on the left where some user data is shown and another on the right with a menu of options, an image of what I have so far:
The part of the white box is where the user data would go and to the right is where I want the options menu to be seen, which is the red box, although I already add the two sidenav the problem is that I cannot see the one on the right and that when pressing the button it expands to the left as in this example:
https://stackblitz.com/edit/angular-bqgztk?file=src%2Fapp%2Fminivariant.component.html
Although in this example the options menu handles it from the left, here is the code I'm working on:
home.component.html
<mat-sidenav-container fullscreen>
<mat-sidenav mode="side" #sidenav opened position="start">
<mat-toolbar color="primary" class="mat-elevation-z4">
</mat-toolbar>
</mat-sidenav>
<mat-sidenav-content style="z-index: unset;overflow: hidden;">
<mat-toolbar>
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span class="toolbar-spacer"></span>
<label class="label">2719872</label>
<mat-icon class="menu" (click)="isExpanded = !isExpanded">menu</mat-icon>
</mat-toolbar>
<mat-sidenav-container class="example-sidenav-container" autosize>
<mat-sidenav #sidenav2 position="end" class="example-sidenav" mode="side" opened="true">
<mat-nav-list class="dashboard">
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>description</mat-icon>
<p matLine *ngIf="isExpanded">Documentación</p>
</a>
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>video_label</mat-icon>
<p matLine *ngIf="isExpanded">Tutoriales</p>
</a>
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>contact_support</mat-icon>
<p matLine *ngIf="isExpanded">Contáctenos</p>
</a>
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>logout</mat-icon>
<p matLine *ngIf="isExpanded">Salir</p>
</a>
</mat-nav-list>
</mat-sidenav>
</mat-sidenav-container>
<div class="main-content">
<p>
Hi
</p>
</div>
<router-outlet></router-outlet>
</mat-sidenav-content>
The structure in not right. You should have one container and then use position attribute to align them.
<mat-sidenav-container class="example-container">
<mat-sidenav opened mode="side" opened="true">Start content</mat-sidenav>
<mat-sidenav opened mode="side" position="end" opened="true">End content</mat-sidenav>
Main content
</mat-sidenav-container>
Demo
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 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?