Develop Reference

Ionic 5 / Angular 8 toggle a div on clicking outside

I have a settings screen with 4 radio buttons. If I click on any of the radio button a success message should be displayed and if I click anywhere else the message should be hidden.
Here is the code:
settings.component.html:
<ion-content>
<div class="flex-container">
<ion-card>
<div class="message">
<div class="message-inner" *ngIf="isMessageDisplay">
<ion-icon name="checkmark"></ion-icon>
<p>Success message</p>
</div>
</div>
<div class="home-screen">
<ion-card-header>
<ion-card-title class="ion-text-center">Select the home page to display</ion-card-title>
</ion-card-header>
<ion-card-content class="home-screen-buttons">
<ion-list class="radio-buttons">
<ion-radio-group name="homeButtons"
>
<ion-row>
<ion-col size="6">
<ion-item lines="none">
<ion-label>home 1</ion-label>
<ion-radio [value]="home.home1"
(ionSelect)="home1()"
color="secondary"
></ion-radio>
</ion-item>
</ion-col>
<ion-col size="6">
<ion-item lines="none">
<ion-label color="lightgray">home 2</ion-label>
<ion-radio [value]="home.home2"
(ionSelect)="home2()"
color="secondary"
></ion-radio>
</ion-item>
</ion-col>
</ion-row>
</ion-radio-group>
</ion-list>
</ion-card-content>
</div>
<div class="products">
<ion-card-header>
<ion-card-title class="ion-text-center">Select the product to display</ion-card-title>
</ion-card-header>
<ion-card-content class="products-buttons">
<ion-list class="radio-buttons">
<ion-radio-group name="productButtons">
<ion-row>
<ion-col size="6">
<ion-item lines="none">
<ion-label>Product 1</ion-label>
<ion-radio [value]="product.product1"
(ionSelect)="product1()"
color="secondary"></ion-radio>
</ion-item>
</ion-col>
<ion-col size="6">
<ion-item lines="none">
<ion-label color="lightgray">Product 2</ion-label>
<ion-radio [value]="product.product2"
(ionSelect)="product2()"
color="secondary"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
</ion-radio-group>
</ion-list>
</ion-card-content>
</div>
</ion-card>
</div>
</ion-content>
settings.component.ts:
import { Component, ElementRef, HostListener, OnDestroy, OnInit } from '#angular/core';
import { Store } from '#ngrx/store';
import { Subscription } from 'rxjs';
#Component({
selector: 'app-settings-menu',
templateUrl: './settings-menu.page.html',
styleUrls: ['./settings-menu.page.scss'],
})
export class SettingsMenuPage implements OnInit, OnDestroy {
isMessageDisplay: boolean = false;
subscriptions$: Subscription[] = [];
constructor(
private store: Store<any>,
private elemRef: ElementRef
) {
}
ngOnInit() {
}
#HostListener('document:click', ['$event.target'])
onClickOutside(targetElement) {
const target = this.elemRef.nativeElement.querySelector('ion-radio');
if (targetElement.tagName != target.tagName)
this.isMessageDisplay= false;
}
home1() {
// some other logic
this.isMessageDisplay= true;
}
home2() {
// some other logic
this.isMessageDisplay= true;
}
product1() {
// some other logic
this.isMessageDisplay= true;
}
product2() {
// some other logic
this.isMessageDisplay = true;
}
ngOnDestroy() {
this.subscriptions$.forEach(subscription => subscription.unsubscribe());
}
}
The above code does the task well during development when I run ionic serve command. But once I build the code for browser using ionic cordova build browser --prod --release and deploy it in some server then success message does not toggle right away, it takes much time when I click anywhere else in the screen.
Please help!

The porblem was in the HostListener. Instead of using #HostListener('document:click', ['$event.target']) I used #HostListener('click', ['$event.target']) and removed document. This solved the problem I had during the production. I don't know the exact reason why this happened.

Getting Play button to play a stream link

Just started using Ionic 4 and Angular so a very new beginner :)
I bought a UI Template from code canyon but never realised I had to code the music playing part of it. Anyway I have been searching to get a stream playing but failed. I found a post which said to just use a HTML5 code to stream music.
When I click Play the music never plays. Where am I going wrong ? My player.page.ts looks like this :
import { Component, OnInit, Input } from '#angular/core';
import { ModalController } from '#ionic/angular';
#Component({
selector: 'app-player',
templateUrl: './player.page.html',
styleUrls: ['./player.page.scss'],
})
export class PlayerPage implements OnInit {
#Input() data: any;
stream: any = null;
valueVolume = 50;
constructor( public modalController: ModalController) { }
audio: any;
ngOnInit() {
this.audio = new Audio();
this.audio.src = 'http://tbvr.noip.me:8000/';
this.audio.load();
}
clickButtonMusic() {
}
closeModal() {
this.modalController.dismiss();
}
playAudio() {
this.audio.play();
this.audio.loop = false;
}
stopAudio() {
this.audio.pause();
}
volumen(event) {
this.valueVolume = event.detail.value;
this.stream.volume = this.valueVolume / 100;
}
}
and my player.page.html looks like this :
<ion-header no-border>
<ion-toolbar>
<ion-buttons slot="start" class="chevron">
<ion-button
class=" circle-button ion-no-padding"
fill="clear"
shape="round"
color="default"
(click)="closeModal()"
>
<i class="icon-chevron-down"></i>
</ion-button>
</ion-buttons>
<ion-title> Live Now</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-text-center">
<div class="h-100 vertical-align">
<div
class="image-container"
[ngStyle]="{'background-image': 'url('+ data?.photo +')'}"
></div>
<div class="py">
<h4>{{ data?.title }}</h4>
<p>{{ data?.text }}</p>
</div>
<ion-buttons>
<ion-button
class="media-button circle-button ion-no-padding"
fill="clear"
size="large"
shape="round"
color="default"
>
<i class="icon-share-2"></i>
</ion-button>
<ion-button class="play-button" (click)="playAudio()"></ion-button>
<ion-button class="stop-button" (click)="stopAudio()"></ion-button>
<ion-button
class="media-button circle-button ion-no-padding"
fill="clear"
size="large"
shape="round"
color="default"
>
<i class="icon-star"></i>
</ion-button>
</ion-buttons>
<ion-range
min="0"
max="100"
color="secondary"
[value]="valueVolume"
(ionChange)="volumen($event)"
>
<ion-label slot="start">
<i class="icon-volume-1"></i>
</ion-label>
<ion-label slot="end">
<i class="icon-volume-2"></i>
</ion-label>
</ion-range>
</div>
</ion-content>
Thanks for any help anyone can give me.
Kevin

You can use Ionic Cordova native plugins. These plugins are available in Ionic framework website.Install the plugin and follow the simple instructions provide in the doc for activating the plugin. Some plugins want special permission to work in Ios(eg:Geocoder). So kindly read the doc carefully.
https://ionicframework.com/docs/native/native-audio
Here I am attaching the link of Ionic Native audio player plugin link. Don't forget to import the plugin in app.module.ts file after successfull installation , otherwise it will start to show error like staticInjectError

Managed to get it to play fine.
audio: any; needed moving to onInit
Just that when I hit stop the music stops but seems to still be downloading from the server.

(click) event not working on majority of elements on page - Ionic 4

BACKGROUND:
For some time all the click events were working for my Ionic app, then out of no where they have stopped. I have two floating action buttons that once had working click events; one would trigger a JS alert popup, and the other would open a modal.
These click events no longer work, the only elements that have working click events now are my ion-tab-buttons.
WHAT I HAVE TRIED/TESTED:
I have tried unwrapping these elements out of ion-items and ion-lists, still no change.
A simple ion-button as a replacement, still no change.
Moving the ion-button outside of the card element just below the opening ion-content tag, still no change.
Moving the ion-button outside of the ion-content; just above the tabs, still no change.
Any help is greatly appreciated.
contact.page.html
<ion-header class="navbar">
<div class="icons">
<ion-buttons slot="start">
<ion-menu-button color="tertiary"></ion-menu-button>
</ion-buttons>
<img src="assets/logo.png" />
</div>
</ion-header>
<ion-content text-center>
<ion-card>
<ion-card-header>
<ion-card-title>Contact Us</ion-card-title>
<ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>
</ion-card-header>
<br>
<ion-card-content>
<ion-label><b>Head Office: Wembley</b>
<br>
Boutique Immigration Solicitors, 10th Floor Tower, 1 Olympic Way, Wembley, Middlesex HA9 0NP
DX: 51165 Wembley Park
We are located just 5 minutes from Wembley Park Station. There is a car park behind our office.
</ion-label>
<br>
<br>
<ion-list text-left>
<ion-item>
<ion-label>Call us on 0800 3881 0211</ion-label>
<ion-fab-button color="secondary" slot="end" size="small" (click)="callAlert()">
<ion-icon name="call"></ion-icon>
</ion-fab-button>
</ion-item>
<ion-item>
<ion-label>Email at admin#boutiquesolicitors.co.uk</ion-label>
<ion-fab-button color="secondary" slot="end" size="small" (click)="modalEmail()">
<ion-icon name="mail"></ion-icon>
</ion-fab-button>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button (click)="about()">
<ion-icon name="information-circle-outline"></ion-icon>
<ion-label>About Us</ion-label>
</ion-tab-button>
<ion-tab-button (click)="dashboard()">
<ion-icon color="blue" name="home"></ion-icon>
<ion-label>Dashboard</ion-label>
</ion-tab-button>
<ion-tab-button class="activeTab">
<ion-icon name="contacts"></ion-icon>
<ion-label>Contact Us</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
contact.page.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router'
import { CallNumber } from '#ionic-native/call-number/ngx';
import { ModalController, AlertController } from '#ionic/angular';
import { EmailPage } from '../email/email.page';
#Component({
selector: 'app-contact',
templateUrl: './contact.page.html',
styleUrls: ['./contact.page.scss'],
})
export class ContactPage implements OnInit {
constructor(private router: Router, private callNumber: CallNumber, private alertController: AlertController, private modalController: ModalController) { }
ngOnInit() {
}
about() {
console.log('clicked about')
this.router.navigate(['members/menu/about'])
}
dashboard() {
console.log('clicked dashboard')
this.router.navigate(['members/menu/dashboard'])
}
async callAlert() {
console.log('method executed')
const callAlert = await this.alertController.create({
message: "Are you sure you want to call Boutique Solicitors?",
buttons: [{
text: "Cancel",
role: "cancel"
},
{
text: "Call",
handler: () => {this.callBS()}
}
]
});
callAlert.present()
}
async callBS() {
this.callNumber.callNumber("07847948252", false)
.then(res => console.log('Launched dialer!', res))
.catch(err => console.log('Error launching dialer', err))
}
async modalEmail() {
const modal = await this.modalController.create ({
component: EmailPage
});
modal.present();
}
}

Well, I ended up figuring it out myself. The issue is that when ion-tabs are placed outside of the 'ion-content' at the bottom, if you inspect element on Chrome Dev Tools you can see that for some reason their "click-zone" takes up the whole page, and is indexed in front of all other elements. Trying to use "z-index" css property will not resolve the issue.
The fix is to wrap the ion-tabs inside an ion-toolbar, below the closing 'ion-content' tag. This will fix the click-zone to the restricted ion-toolbar height, which resolves the issue. All other page elements (click) events will now fire. This also fixes the issue of when tabs can prevent a page from scrolling.
Tested on both Android and iOS.
Ciao ciao.

The answer provided here is not correct. There is a misunderstanding on how tabs work from OP. Tabs are meant to be full page UI components, and are not meant to be embed in other pages/components. Meaning that they should be the only content in a page.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="triangle"></ion-icon>
<ion-label>Tab 1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="ellipse"></ion-icon>
<ion-label>Tab 2</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="square"></ion-icon>
<ion-label>Tab 3</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
This way the tabs are responsible for render the nested content, and events work as expected.

The answer from #mhartington above, is the correct answer. For Angular, tabs should be the page that loads other pages as child modules inside tabs-routing.module.ts.

Well, I ended up figuring it out myself. The issue is that when ion-tabs are placed outside of the 'ion-content' at the bottom, if you inspect element on Chrome Dev Tools you can see that for some reason their "click-zone" takes up the whole page, and is indexed in front of all other elements. Trying to use "z-index" css property will not resolve the issue.
The fix is to wrap the ion-tabs inside an ion-toolbar, below the closing 'ion-content' tag. This will fix the click-zone to the restricted ion-toolbar height, which resolves the issue. All other page elements (click) events will now fire. This also fixes the issue of when tabs can prevent a page from scrolling.
Tested on both Android and iOS.
Ciao ciao.
that's exactly what i am searching thanks

How to submit a form in Angular and send data back?

I'm building a form component to get some data from user and send them back to another component, which has to be updated according to these values.
In my code I have two components:
1) Balance page
2) Balance-add component
I'd like Balance page to be updated every time the user fills the form in Balance-menu component, and I need to create a new card in the Balance page for each form submitted.
Balance.page.ts:
constructor(
private router: Router,
) { }
ngOnInit() {
}
addToList() {
this.router.navigateByUrl('balance-add')
}
balance.page.html:
<ion-content>
<ion-card>
<ion-card-header>
<ion-card-title>Balance:</ion-card-title>
</ion-card-header>
<ion-card-content>
<div>
{{this.balance}}
</div>
</ion-card-content>
</ion-card>
//Here <ion-card> for each form submitted
//<ion-card *ngFor="let form of list_of_forms"></ion-card>
</ion-content>
<ion-footer>
<div>
<ion-icon name="add-circle" (click)="addToList()"></ion-icon>
</div>
</ion-footer>
The second component is balance-add.component.ts
(I don't know how to implement sendData method)
constructor() { }
ngOnInit() {}
sendData() {
// ???
}
and here's the html:
<div>
<ion-item>
<ion-label>How much did you spend?</ion-label>
<ion-select [(ngModel)]="buy.cost" okText="Okay" cancelText="Dismiss">
<ion-select-option value="ten">10</ion-select-option>
<ion-select-option value="twelve">20</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>What is the item?</ion-label>
<ion-input [(ngModel)]="buy.item" placeholder="E.g. Eggs></ion-input>
</ion-item>
<ion-button (click)="sendData()"> ADD TO BALANCE </ion-button>
</div>
Thanks

Ionic collection repeat not working

I have an array of objects that I want to loop through in my template and output as cards. I have it working currently using *ngfor and now I want to change it to use collection repeat instead.
Here is my code:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { TowersModel } from '../../app/models/towers-model';
#Component({
selector: 'page-towers',
templateUrl: 'towers.html'
})
export class TowersPage {
towers: any;
constructor(public navCtrl: NavController){
this.towers = [
{
"name" : "Tower 1",
"image" : "http://placehold.it/350x150"
},
{
"name" : "Tower 2",
"image" : "http://placehold.it/350x150"
},
{
"name" : "Tower 3",
"image" : "http://placehold.it/350x150"
}
];
}
}
Template:
<ion-header>
<ion-navbar>
<ion-title>
Towers
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-content>
<ion-card *ngFor="let tower of towers">
<img src="{{ tower.image }}" alt="{{tower.name}}">
<ion-item>
<h2>{{tower.name}}</h2>
<p>11 N. Way St, Madison, WI 53703</p>
</ion-item>
<ion-item>
<span item-left>18 min</span>
<span item-left>(2.6 mi)</span>
<button ion-button icon-left clear item-right>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
</ion-card>
</ion-content>
</ion-content>
So as mentioned this approach works fine. If I try and change it though to use a collection repeat instead like so:
<ion-header>
<ion-navbar>
<ion-title>
Towers
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-content>
<ion-item collection-repeat="let tower of towers">
<h1>Tower {{tower.name}}</h1>
</ion-item>
</ion-content>
</ion-content>
Then I get the following error:
Runtime Error
Error in ./TowersPage class TowersPage - caused by: Cannot read property 'name' of undefined

I think you are using ionic 2 and you need to use vitualScroll instead of collection-repeat.
<ion-list [virtualScroll]="towers">
<ion-item *virtualItem="let tower">
{{ tower.name }}
</ion-item>
</ion-list>