We Keep Coding

ionic firebase data appears in the template after a few seconds

When ı run app and click notifications data appears in the template after a 10-15 seconds.
I checked the data with the console log when I was pulling datas, datas are coming normally(fast), the problem is that it shows late in HTML.
When I enter the notifications page : https://prnt.sc/11dtqkj
After waiting for 10-15 seconds :
https://prnt.sc/11dttn4
How can ı fix this problem ?
notifications.page.ts :
ionViewWillEnter(){
this.auth.currentUser.then(user=>{
this.userUid = user.uid
this.db.database.ref("/users/"+user.uid+"/notifications/").once("value",snap=>{this.notifications=[],snap.forEach(a=>{
this.db.database.ref("/users/"+a.child("who").val()+"/name").once("value",a2=>{let temp_a=a;
this.db.database.ref("/users/"+temp_a.child("who").val()+"/pp").once("value",a3=>{let temp_a2=temp_a; let a2_name = a2.val();
let type = temp_a2.child("type").val();
let not_key = temp_a2.key;
let name = a2_name;
let pp = a3.val();
let who = temp_a2.child("who").val();
let formId = temp_a2.child("formId").val();
let result = temp_a2.child("result").val();
if(type=="request"){
this.notifications.push({notKey:not_key,type:type,name: name,pp:pp,who:who,formId:formId});
}
else if(type=="response"){
this.notifications.push({type:type,name:name,pp:pp,who:who,result:result});
}
})
});
})
})
})
}
notifications.page.html
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Bildirimler</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list >
<div *ngFor="let item of notifications;let i index ">
<ion-item *ngIf="item.type=='request'">
<ion-avatar slot="start">
<img src={{item.pp}}>
</ion-avatar>
<ion-label style="white-space: pre-wrap;"><strong>{{item.name}}:</strong>adlı kullanıcı beraber kamp yapmak istiyor.</ion-label>
<ion-label><ion-button (click)="accept(item.who,item.formId,item.notKey,i)" style="width: 50%;" color="secondary"><ion-icon name="checkmark-outline"></ion-icon></ion-button>
<ion-button (click)="reject(item.who,item.notKey,item.formId,i)" color="light"><ion-icon name="close-outline"></ion-icon></ion-button></ion-label>
</ion-item>
<ion-item *ngIf="item.type=='response'">
<ion-avatar slot="start">
<img src={{item.pp}}>
</ion-avatar>
<ion-label style="white-space: pre-wrap;"><strong>{{item.name}}:</strong>adlı kullanıcı tarafından katılma isteğiniz {{item.result}}</ion-label>
</ion-item>
</div>
</ion-list>
</ion-content>

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)
});
}

angular4- show element only when texbox is focused

I'm trying to show an element on my page when a textbox is focused.
HTML
<ion-header>
<ion-navbar color="primary">
</ion-navbar>
<ion-toolbar>
<ion-row >
<ion-col>
<ion-searchbar placeholder="Search Account Number" [(ngModel)]="searchInput"> </ion-searchbar>
</ion-col>
<ion-col col-2>
<ion-icon (click)="searchCustomer()" ion-item name="arrow-forward"></ion-icon>
</ion-col>
</ion-row>
<p align="right" *ngIf="searchInput.length > 0">
<span style="color:gray;padding:5px">Switch to Advance Search</span>
</p>
</ion-toolbar>
</ion-header>
JavaScript
export class AppHomePage {
searchInput: any;
searchResults: any;
constructor(public navCtrl: NavController,
public loadingCtrl: LoadingController,
public toastCtrl: ToastController,
public http: Http,
public alertCtrl: AlertController) {
this.searchResults = [];
}
}
With my script when the page loads i get this error:
Cannot read property 'length' of undefined

Option 1:
If you haven't initialised seachInput = '' then do it first.
Option 2: User (input) event and get length when user enter any data into text box.
<ion-searchbar placeholder="Search Account Number" (input)="getSeachData($event)" [(ngModel)]="searchInput"> </ion-searchbar>
In your .ts file.
// First set variable above constructor.
searchFlag : boolen = false;
getSeachData(event){
this.searchFlag = true ? event.target.value.length > 0 : false;
}
In your HTML file.
<p align="right" *ngIf="searchFlag">
<span style="color:gray;padding:5px">Switch to Advance Search</span>
</p>
In this way you can do what you want. But Still I suggest to go with the first option. If it's not work well then go with second option.
Hope for the best.

You could use ionFocus event to achieve what you want.
HTML
<ion-header>
<ion-navbar color="primary">
</ion-navbar>
<ion-toolbar>
<ion-row >
<ion-col>
<ion-searchbar placeholder="Search Account Number" [(ngModel)]="searchInput"> </ion-searchbar>
</ion-col>
<ion-col col-2>
<ion-icon (click)="searchCustomer()" (ionFocus)="showSwitchAdvanceSearch()" ion-item name="arrow-forward"></ion-icon>
</ion-col>
</ion-row>
<p align="right" *ngIf="showSwitchAdvanceSearch">
<span style="color:gray;padding:5px">Switch to Advance Search</span>
</p>
</ion-toolbar>
</ion-header>
Typescript
export class AppHomePage {
searchInput: any;
searchResults: any;
showSwitchAdvanceSearch = false;
constructor(public navCtrl: NavController,
public loadingCtrl: LoadingController,
public toastCtrl: ToastController,
public http: Http,
public alertCtrl: AlertController) {
this.searchResults = [];
}
showSwitchAdvanceSearch() {
this.displaySwitchAdvanceSearch = true;
}
}

Ionic 2 reference a value in html file from ts file?

I am querying a set of data from firebase and successfully pulled a list of data to my html page. Is there any way to reference the corresponding item.uid value from the html page in my onViewProfile function so that I can push it to another page? Thanks.emphasized text
HTML file
<ion-content padding>
<ion-label>Type</ion-label>
<ion-select [(ngModel)]="type" (ionChange)="searchPitchesByType(type)">
<ion-option value="test1">test1</ion-option>
<ion-option value="test">test</ion-option>
</ion-select>
<ion-list>
<ion-item *ngFor="let item of pitches | async">
Name: {{ item.name }}
<p>
Description:{{ item.description }}
</p>
<p>
uid:{{ item.uid }}
</p>
<button right ion-button icon-only (click)="onViewProfile()">
<ion-icon name="add"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-content>
TS file
export class DiscoverPage {
public pitches: FirebaseListObservable<any>;
constructor(
private navCtrl: NavController,
private loadingCtrl: LoadingController,
private popoverCtrl: PopoverController,
public afDatabase: AngularFireDatabase
) {this.pitches = afDatabase.list('/Pitches/');}
searchPitchesByType(type: string){
this.pitches = this.afDatabase.list('Pitches', {
query: {
orderByChild: 'type',
equalTo: type
}
})
}
onViewProfile() {
let data = {
uid: **(uid that corresponds to the uid in html)**
}
console.log(this.navCtrl.push(ViewProfilePage, data));
}
}

Well it is so simple that I feel I'm not getting it right.
You have to pass it as a parameter like this
<ion-item *ngFor="let item of pitches | async">
Name: {{ item.name }}
<p>
Description:{{ item.description }}
</p>
<p>
uid:{{ item.uid }}
</p>
<button right ion-button icon-only (click)="onViewProfile(item)">
<ion-icon name="add"></ion-icon>
</button>
</ion-item>
Then your ts will turn into
onViewProfile(item) {
let data = {
uid: item.uid
}
console.log(this.navCtrl.push(ViewProfilePage, data));
}

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

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>