Ionic 2 Can't handle menu in front a google maps element - javascript

I have made an Ionic V2 side menu application and integrated to it an GMaps element. But I can't handle the element which be in front of that map. The buttons of the side menu are disabled if they are in front of the map and it the same for the pop up of a ionic select element.
So my question is, where is my mistake ? Why I can't handle any element in front of the google map element ?
I can't handle the zone squared in red :
My map html code :
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Carte</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-row center>
<ion-col width-25 center>
<ion-label>Jours :</ion-label>
</ion-col>
<ion-col width-25 center>
<ion-select [(ngModel)]="gender">
<ion-option value="f" selected="true">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-col>
<ion-col width-25 center>
<ion-label>Horaires :</ion-label>
</ion-col>
<ion-col width-25 center>
<ion-select [(ngModel)]="gender">
<ion-option value="f" selected="true">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-col>
</ion-row>
<div #map id="map" style="height:90%;"></div>
</ion-content>
My map ts code :
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, CameraPosition, GoogleMapsMarkerOptions, GoogleMapsMarker } from 'ionic-native';
#Component({
selector: 'page-gmap',
templateUrl: 'gmap.html'
})
export class GMap {
constructor(public navCtrl: NavController) {}
ngAfterViewInit() {
this.loadMap();
}
loadMap() {
let element: HTMLElement = document.getElementById('map');
let map = new GoogleMap(element);
// listen to MAP_READY event
map.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!'));
// create LatLng object
let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);
// create CameraPosition
let position: CameraPosition = {
target: ionic,
zoom: 18,
tilt: 30
};
// move the map's camera to position
map.moveCamera(position);
// create new marker
let markerOptions: GoogleMapsMarkerOptions = {
position: ionic,
title: 'Ionic'
};
map.addMarker(markerOptions).then((marker: GoogleMapsMarker) => {
marker.showInfoWindow();
});
}
}

try this...
// handle side menu issue...
let leftMenu = this.menuController.get('left');
if (leftMenu) {
leftMenu.ionOpen.subscribe(() => {
if (this.map) {
this.map.setClickable(false);
}
});
leftMenu.ionClose.subscribe(() => {
if (this.map) {
this.map.setClickable(true);
}
});
}

All the elements over the map that you want to be able to click must be inside the div that the map was linked.
So your code should look like:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Carte</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div #map id="map" style="height:90%;">
<ion-row center>
<ion-col width-25 center>
<ion-label>Jours :</ion-label>
</ion-col>
<ion-col width-25 center>
<ion-select [(ngModel)]="gender">
<ion-option value="f" selected="true">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-col>
<ion-col width-25 center>
<ion-label>Horaires :</ion-label>
</ion-col>
<ion-col width-25 center>
<ion-select [(ngModel)]="gender">
<ion-option value="f" selected="true">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-col>
</ion-row>
</div>
</ion-content>

Related

setValidators doesn't work at all when set dynamically inside of a function

I am not sure why setValidators is not working in my below code. I am not sure what the issue is as it doesn't take any effect when I set the formControl as required. What I want to achieve is to dynamically set some FormControls required if a specific option is selected. If you have any idea that would be amazing. Thank you!
This is my HTML
<form [formGroup]="measurementsForm">
<ion-grid>
<ion-row>
<ion-col>
<ion-row class="quiz-choices">
<ion-col>
<ion-select
[interfaceOptions]="customInterfaceOptions"
formControlName="weightMeasurement"
interface="action-sheet"
placeholder="weight">
<ion-select-option value="kg">kg</ion-select-option>
<ion-select-option value="lbs">lbs</ion-select-option>
</ion-select>
</ion-col>
<ion-col>
<ion-input
inputmode="numeric"
formControlName="weightAmount"
placeholder="Weight"
value="amount">
</ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-select
[interfaceOptions]="customInterfaceOptions"
formControlName="heightMeasurement"
interface="action-sheet"
placeholder="height"
(ionChange)="onSelectFootMeasurement($event)">
<ion-select-option value="cm">cm</ion-select-option>
<ion-select-option value="ft">ft</ion-select-option>
</ion-select>
</ion-col>
<ion-col *ngIf="!showFtInput">
<ion-input
inputmode="numeric"
formControlName="heightAmountCm"
placeholder="amount">
</ion-input>
</ion-col>
<ion-col *ngIf="showFtInput">
<ion-input
formControlName="heightAmountFoot"
placeholder="foot"
inputmode="numeric">
</ion-input>
</ion-col>
<ion-col *ngIf="showFtInput">
<ion-input
formControlName="heightAmountInch"
placeholder="inch"
inputmode="numeric">
</ion-input>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-grid>
</form>
This is my TS
import { Component, OnInit } from "#angular/core";
import { FormGroup, FormControl, Validators } from "#angular/forms";
import { NavController } from "#ionic/angular";
#Component({
selector: "app-step-two",
templateUrl: "./step-two.page.html",
styleUrls: ["./step-two.page.scss"],
})
export class StepTwoPage implements OnInit {
customInterfaceOptions: any = {
cssClass: "alertCustomCss",
};
measurementsForm: FormGroup;
selectedHeightMeasurement = "";
showFtInput = false;
constructor(private navCtrl: NavController) {}
ngOnInit() {
this.measurementsForm = new FormGroup({
weightMeasurement: new FormControl(null, {
validators: [Validators.required],
}),
weightAmount: new FormControl(null, {
validators: [Validators.required],
}),
heightMeasurement: new FormControl(null, {
validators: [Validators.required],
}),
heightAmountCm: new FormControl(),
heightAmountFoot: new FormControl(),
heightAmountInch: new FormControl(),
});
}
onSelectFootMeasurement(event) {
this.selectedHeightMeasurement = event.detail.value;
if (this.selectedHeightMeasurement === "ft") {
this.showFtInput = true;
this.measurementsForm
.get("heightAmountFoot")
.setValidators([Validators.required]);
this.measurementsForm
.get("heightAmountInch")
.setValidators([Validators.required]);
} else if (this.selectedHeightMeasurement === "cm") {
this.measurementsForm
.get("heightAmountCm")
.setValidators([Validators.required]);
this.showFtInput = false;
}
}
}
You need to updateValueAndValidity
dynamicValidation(): void {
let control1 = null;
control1 = this.measurementsForm.get('controlName');
control1.setValidators([Validators.pattern(this.nameREGEX), Validators.minLength(this.minLength)]);
control1.updateValueAndValidity();
}

How to make of several forms one form?

I have set up several form that takes info for an upload logic: like one takes then picture, one the description, one other setting. Now I want that this is all stored in one single form, but while it still worked when using different form now I get this error:
ERROR TypeError: Cannot read property 'controls' of undefined
I have no idea why is that. I also cannot submit a new description which I want to make with <div (ngSubmit)="addTag()">
Here is my code:
html:
<form [formGroup]="categoryForm">
<ion-grid class="white">
<ion-row class="checkbox-tags rounded-checkbox-tags">
<ion-item mode="ios" lines="none" class="checkbox-tag rounded-tag">
<ion-icon name="images"></ion-icon>
<ion-checkbox formControlName="tag_1"></ion-checkbox>
</ion-item>
<ion-item mode="ios" lines="none" class="checkbox-tag rounded-tag">
<ion-icon name="camera"></ion-icon>
<ion-checkbox formControlName="tag_2"></ion-checkbox>
</ion-item>
</ion-row>
</ion-grid>
<ion-row class="range-item-row">
<ion-col size="12">
<div class="range-header">
<span class="range-value">{{ rangeForm.controls.dual.value.lower }}</span>
<span class="range-label">temperature</span>
<span class="range-value">{{ rangeForm.controls.dual.value.upper }}</span>
</div>
</ion-col>
<ion-col size="12">
<ion-range mode="md" class="range-control" formControlName="dual" color="danger" pin="true" dualKnobs="true" debounce="400"></ion-range>
</ion-col>
</ion-row>
<div (ngSubmit)="addTag()">
<ion-item>
<ion-input [disabled]="tagList?.length > 0" mode="md" formControlName="category" clearInput="true" placeholder="Tag" name="tagValue"></ion-input>
<ion-button [disabled]="!categoryForm.valid || tagList?.length > 0" type="submit" icon-only>
<ion-icon name="checkmark"></ion-icon>
</ion-button>
</ion-item>
</div>
</form>
<ion-chip class="chip" color="dark" *ngFor="let tag of tagList; let i = index">
<ion-icon name="pricetag"></ion-icon>
<ion-label class="set-label">{{ tag }}</ion-label>
<ion-icon name="close-circle" (click)="removeChip(i)"></ion-icon>
</ion-chip>
</ion-content>
<ion-footer>
<ion-button [disabled]="!tagList?.length > 0" (click)="confirm()" expand="block" type="submit">POST</ion-button>
</ion-footer>
typescript:
categoryForm: FormGroup;
...
addTag() { // properly access and reset reactive form values
const tagCtrl = this.categoryForm.get('category');
if (tagCtrl.value) {
this.tagList.push(tagCtrl.value);
this.tagInput = ''; // in order to have an empty input
}
}
ngOnInit() {
this.storage.get('image_data').then((imageFile) => {
this.imageForm.patchValue({
'image': this.storage.get('image_data')
});
});
this.categoryForm = new FormGroup({
'dual': new FormControl({lower: 100, upper: 150}),
'tag_1': new FormControl(true),
'tag_2': new FormControl(true),
'category' : new FormControl('', Validators.compose([
Validators.maxLength(25),
Validators.minLength(1),
Validators.required
])),
'image': new FormControl(null)
});
}

How to implement swipeable segments in ionic 3?

I have to implement swipeable segments in ionic 3 application.
I am using https://github.com/siddhartha-gupta/ionic-3-swipe-able-segments/tree/develop/src/pages directives but i am getting following error:
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [tabsList]="categories"
[ERROR ->][(currentTab)]="category"
(tabChanged)="onTabChanged($event)" class="swipe-area">
<ion-list *ngSw"):
ng:///InvitefriendPageModule/InvitefriendPage.html#60:66
Error: Template parse errors:
Can't bind to 'tabsList' since it isn't a known property of 'div'. ("
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [ERROR ->] .
[tabsList]="categories" [(currentTab)]="category"
(tabChanged)="onTabChanged($event)" class="swipe-ar"):
ng:///InvitefriendPageModule/InvitefriendPage.html#60:42
Can't bind to 'currentTab' since it isn't a known property of 'div'.
("
My code is:
In app.module.ts:
import { SwipeSegmentDirective } from '../directives/swipe- segment.directive';
#NgModule({
declarations: [
MyApp,
SwipeSegmentDirective
// ProgressBarComponent
],
In invitefriend.ts:
export class InvitefriendPage {
public category: string = 'everyone';
public categories: Array<string> = ['everyone', 'group', 'contact',
'directory']
// tab1Root: any = "EveryonePage";
// tab2Root: any = "GroupPage";
// tab3Root: any = "ContactPage";
// tab4Root: any = "DirectoryPage";
// public categories: Array<string> = ['everyone', 'group', 'contact',
'directory']
constructor(public navCtrl: NavController, public navParams:
NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad InvitefriendPage');
}
onTabChanged(tabName) {
this.category = tabName;
}
In invitefriend.html:
<ion-header>
<ion-navbar color="danger">
<ion-toolbar class="toolbar-color myToolbar">
<ion-segment [(ngModel)]="category" class="tabsSeg">
<ion-segment-button value="everyone" class="segBtn tabname
active activated">
Everyone
</ion-segment-button>
<ion-segment-button value="group" class="segBtn tabname">
Group
</ion-segment-button>
<ion-segment-button value="contact" class="segBtn tabname">
Contact
</ion-segment-button>
<ion-segment-button value="directory" class="segBtn tabname">
Directory
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-navbar>
</ion-header>
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [tabsList]="categories"
[(currentTab)]="category" (tabChanged)="onTabChanged($event)"
class="swipe-area">
<ion-list *ngSwitchCase="'everyone'">
<ion-item>
Batman Begins
</ion-item>
<ion-item>
Transporter
</ion-item>
<ion-item>
Million Dollar Baby
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'group'">
<ion-item>
Game of Thrones
</ion-item>
<ion-item>
Daredevil
</ion-item>
<ion-item>
Arrow
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'contact'">
<ion-item>
Ice Age
</ion-item>
<ion-item>
Lion King
</ion-item>
<ion-item>
Up
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'directory'">
<ion-item>
Ice Age1
</ion-item>
<ion-item>
Lion King1
</ion-item>
<ion-item>
Up1
</ion-item>
</ion-list>
</div>
</ion-content>
I need any solution to solve above error, please give here solution as soon as possible, it would be really appreciated.

Angular 2 inject HTML into inline template

I'm trying to inject html into an inline template. Mostly because I'm lazy and don't feel like making a component.
I have a an inline template implemented the following way:
<ion-slide *ngFor="let entity of serviceRequests">
<ion-item>
<ion-col>
<ion-note>[Skill Name]{{skillTypeOptions.resolveName(entity.skillId)}}</ion-note>
</ion-col>
</ion-item>
<template [ngTemplateOutlet]="offerTemplate" [ngOutletContext]="{entity: entity.Offer, title: 'Offer'}">
</template>
<template [ngTemplateOutlet]="offerTemplate" [ngOutletContext]="{entity: entity.Counter, title: 'Counter'}">
</template>
</ion-slide>
</ion-slides>
<template #offerTemplate let-entity="entity" let-title="title">
<ion-card>
<ion-item>
<ion-row>
<ion-col>
<ion-note>{{title}}</ion-note>
</ion-col>
<ion-col>
<ion-note>For {{entity.price}} $</ion-note>
</ion-col>
</ion-row>
</ion-item>
<ion-card-content>
{{ entity.messageText }}
</ion-card-content>
</ion-card>
</template>
is there a way I can pass another template into the template to nest templates?
I figured out how to do it. You just have to pass in the template as a parameter.
First add a parameter to the parent template, let-footerTemplate="footerTemplate":
<template #offerTemplate let-entity="entity" let-title="title" let-footerTemplate="footerTemplate">
<ion-card>
<ion-item>
<ion-row>
<ion-col>
<ion-note>{{title}}</ion-note>
</ion-col>
<ion-col>
<ion-note>For {{entity.price}} $</ion-note>
</ion-col>
</ion-row>
</ion-item>
<ion-card-content>
{{ entity.messageText }}
</ion-card-content>
<ion-item>
<template [ngTemplateOutlet]="footerTemplate" [ngOutletContext]="{entity: entity}">
</template>
</ion-item>
</ion-card>
</template>
Then you can display the template variable in the ngTemplate directive again.
and the usage would look like so:
<template [ngTemplateOutlet]="offerTemplate" [ngOutletContext]="{entity: entity, title: 'Counter', footerTemplate:footerTemplate}">
</template>

Scroll not working when from Popover

I am using Ionic 2.
I have a page, that scrolls perfectly when I navigate to the page from another page. However, when I navigate to the page from a Popover, the page displays, but I am unable to scroll.
Any ideas please?
Navigate to page from Popover and other page is the same:
this.nav.push(CategoryPage, {
employeeModel: this.employeeModel,
fromSearch: true
});
page:
<ion-header>
<ion-navbar>
<ion-title>{{categoryModel.name}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<center>
<ion-spinner icon="android" *ngIf="loading"></ion-spinner>
<div class="category-text animate-show">
<div class="select-text" *ngIf="getSelected().length === 0">Select the Roles</div>
<p class="item-selected-row" *ngFor="let subcategory of getSelected()">
<img class="item-stable" id="icon-image-{{subcategory.id}}" src="{{subcategory.icon}}" (click)="toggleItem(subcategory)"/>
</p>
</div>
</center>
<ion-row *ngFor="let trio of getTriples()">
<ion-col *ngFor="let item of trio">
<center>
<div class="row responsive-md">
{{ formatSubCategories(item) }}
<img class="item-stable-large" id="icon-image-{{item.id}}" src="{{item.icon}}" (click)="toggleItem(item)"
[class.item-selected]="isSubCategoryModelItemInArray(item) > -1" />
<p>{{item.name}}</p>
</div>
</center>
</ion-col>
</ion-row>
<ion-buttons>
<button (click)="next()" block round class="form-button-text">Next</button>
</ion-buttons>
</ion-content>
popover
import {Component, ViewChild, ElementRef} from '#angular/core';
import {App, PopoverController, NavController, Content, NavParams} from 'ionic-angular';
import {NgForm} from '#angular/forms'
import { MapPage } from '../map/map';
import { CategoryPage } from '../category/category';
import { EmployeeModel } from '../model/employeeModel';
#Component({
template: `
<ion-content padding id="search-popover">
<ion-list>
<ion-row>
<ion-col>
<center>
<div id="pinButton"><button class="search-popover-button" (click)="presentFilterMap()" danger><ion-icon class="search-popover-icon" name="pin"></ion-icon></button></div>
<p>Location</p>
</center>
</ion-col>
<ion-col>
<center>
<div id="pinButton"><button class="search-popover-button" (click)="presentFilterCategories()" primary><ion-icon class="search-popover-icon" name="happy"></ion-icon></button></div>
<p>Sectors</p>
</center>
</ion-col>
</ion-row>
</ion-list>
</ion-content>
`
})
export class SearchPopOverPage {
private nav: NavController = null;
private employeeModel: EmployeeModel = null;
constructor(private navParams: NavParams, nav: NavController) {
this.nav = nav;
this.employeeModel = navParams.get('employeeModel');
}
ngOnInit() {
}
presentFilterMap(event: Event) {
this.nav.push(MapPage, {
employeeModel: this.employeeModel,
fromSearch: true
});
}
presentFilterCategories(event: Event) {
this.nav.push(CategoryPage, {
employeeModel: this.employeeModel,
fromSearch: true
});
}
}
Here is the solution.
presentFilterCategories(event: Event) {
this.viewCtrl.dismiss().then(() => {
this.nav.push(CategoryPage, {
ev: event,
employeeModel: this.employeeModel,
fromSearch: true
})
});
}

Categories