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.

How to make point "adder" button

I am currently working on a game/app which a criteria-based point game. I using the technologies, Ionic 3 with Angular which helps with the GUI and ease of testing and deployment.
The issue I am having is : I can't get my score variable to change (go up) when the add point button is clicked.
What I have tried : Declaring it as a variable in many different ways with no avail. I'm still new to HTML and JS so any help would be appreciated. It's still super work in progress!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core#4.7.4/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core#4.7.4/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core#4.7.4/css/ionic.bundle.css"/>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}
</style>
<script>
function openMenu() {
document.querySelector('ion-menu-controller');
.open();
}
function p1point(){
var p1pp = document.getElementById("p1p")
p1pp = p1pp + 1
}
</script>
</head>
<body>
<ion-app>
<ion-menu side="start">
<ion-header>
<ion-toolbar translucent>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>Home</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person" slot="start"></ion-icon>
<ion-label>Profile</ion-label>
</ion-item>
<ion-item>
<ion-icon name="chatbubbles" slot="start"></ion-icon>
<ion-label>Messages</ion-label>
</ion-item>
<ion-item>
<ion-icon name="settings" slot="start"></ion-icon>
<ion-label>Settings</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<div class="ion-page" main>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Point Game</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-grid>
<ion-row>
<ion-col>
<ion-card>
<!--Player 1 score-->
<ion-card-header>
<ion-card-subtitle class = "ion-text-center">Player 1</ion-card-subtitle>
<ion-card-title class = "ion-text-center" id = "p1p">0</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
<ion-col size = -1>
<!-- fake inner thing psuedo-col-->
</ion-col>
<ion-col>
<ion-card>
<!--Player 2 score-->
<ion-card-header>
<ion-card-subtitle class = "ion-text-center">Player 2</ion-card-subtitle>
<ion-card-title class = "ion-text-center" ><var>0</var></ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button id = "p1plus" onclick="p1point()"> + </ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</div>
</ion-app>
<ion-menu-controller></ion-menu-controller>
</body>
</html>

Your code has some Syntex errors:
function openMenu() {
document.querySelector('ion-menu-controller').open();
}
function p1point(){
var p1pp = document.getElementById("p1p").innerText; //getting text inside element
p1pp = parseInt(p1pp) + 1; //Increment
document.getElementById("p1p").innerHTML = p1pp; // Writing values
}

Disable button when checkbox is unchecked

when user does not check the checkbox, I want the submit button to be disabled.
<ion-row *ngFor="let item of classDescription; let i = index" >
{{ item.Location }}
{{ item.Instructor }}
<ion-checkbox style="text-align: center;"
(ionChange)="onChecked($event,item)"
[checked]="item.checked"
name="classCheck"
[(ngModel)]="item.register">
</ion-checkbox>
</ion-row>
<ion-button color="success"
expand="block"
(click)="btnSubmit()"
[disabled]="!classCheck">
Submit
</ion-button>
Since, there item variable from another tag, i cant use it to another tag. I tried to call by name. but its not working.

<ion-row *ngFor="let item of classDescription; let i = index" >
{{ item.Location }}
{{ item.Instructor }}
<ion-checkbox style="text-align: center;" (ionChange)="onChecked($event,item)" [checked]="item.checked" name="classCheck" [(ngModel)]="item.register" name="classCheck"></ion-checkbox>
</ion-row>
<ion-button color="success" expand="block" (click)="btnSubmit()" [disabled]="isNotAllCheckedYet()">Submit</ion-button>
and in your component
isNotAllCheckedYet():boolean{
if(!this.classDescription){
return false;
}
return this.classDescription.filter(a=>!a.register);
}
disable submit button if not all checked

IONIC - get multiple checkbox status as a function parameter

My checkbox code:
<ion-item>
<ion-label stacked>Beverage Size</ion-label>
</ion-item>
<ion-item>
<ion-label>Small</ion-label>
<ion-checkbox [(ngModel)]="drinkSmall" color="blue" checked="true"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Regular</ion-label>
<ion-checkbox [(ngModel)]="drinkRegular" color="blue" checked="true"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Large</ion-label>
<ion-checkbox [(ngModel)]="drinkLarge" color="blue" checked="true"></ion-checkbox>
</ion-item>
My submit button:
<button ion-button color="primary" block (click)="addBeverage(
drinkName,
drinkmenuDesc,
drinkPrice,
drinkCategory,
drinkSmall,
drinkRegular,
drinkLarge
)" [disabled]="!menuName">
Add Beverage
</button>
Edited:
I want to pass all the checkbox status as a parameter of a function. The drinkSmall, drinkRegular, drinkLarge should be the status of checkbox.

You should create a object that holds the checkbox values. Then you can pass that object to your submit function. See below for a example using a model called "checkboxes"
TS:
// A achecboxes object in your controller:
checkboxes: any = {
drinkSmall: true,
drinkRegular: true,
drinkLarge: true
}
HTML:
<ion-item>
<ion-label stacked>Beverage Size</ion-label>
</ion-item>
<ion-item>
<ion-label>Small</ion-label>
<ion-checkbox [(ngModel)]="checkboxes.drinkSmall" color="blue"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Regular</ion-label>
<ion-checkbox [(ngModel)]="checkboxes.drinkRegular" color="blue"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Large</ion-label>
<ion-checkbox [(ngModel)]="checkboxes.drinkLarge" color="blue"></ion-checkbox>
</ion-item>
<button ion-button color="primary" block (click)="addBeverage(checkboxes)" [disabled]="!menuName">
Add Beverage
</button>

In .ts you need to create an object.
checkboxes: any = {
drinkSmall: true,
drinkRegular: true,
drinkLarge: true
};
data: any = {
checkboxes:this.checkboxes,
para1:'',
para2:'',
para3:''
};
In .html you need to change like
<ion-item>
<ion-label stacked>Beverage Size</ion-label>
</ion-item>
<ion-item>
<ion-label>Small</ion-label>
<ion-checkbox [(ngModel)]="data.checkboxes.drinkSmall" color="blue"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Regular</ion-label>
<ion-checkbox [(ngModel)]="data.checkboxes.drinkRegular" color="blue"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Large</ion-label>
<ion-checkbox [(ngModel)]="data.checkboxes.drinkLarge" color="blue"></ion-checkbox>
</ion-item>
<button ion-button color="primary" block (click)="addBeverage(data)" [disabled]="!menuName">
Add Beverage
</button>
Here one object data holds multiple checkbox as well as para1,para2,para3
Output of console.log

Ionic2-array not updating on html side

I am new in Ionic2 and Angular2 trying to update my array at front side but its not updating.Moreover its updating perfectly at backend (ts),checked using console. need your help
My Component:
import { Component } from '#angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';
#Component({
selector: 'page-modal-filter',
templateUrl: 'modal-filter.html'
})
export class ModalFilterPage {
public fil=[];
public BRANDNAME: any;
public srts:any;
constructor(public nav: NavController, public viewCtrl: ViewController, public navParams: NavParams) {
this.fil = [];
this.srts="ABCD";
if (navParams.get('tabName') == 'filter') {
let data = navParams.get('data');
data.map(d => {
for (let op in d.OPTIONGROUP) {
for (let x in d.OPTIONGROUP[op]) {
if (x != "UPC") {
if (!this.fil[x]) {
this.fil[x] = [];
}
if (this.fil[x].indexOf(d.OPTIONGROUP[op][x]) == -1) {
this.fil[x].push(d.OPTIONGROUP[op][x]);
}
}
}
}
})
console.log(this.fil);
}
}
closeModal() {
// this.nav.pop();
this.viewCtrl.dismiss(true);
}
}
"fil" array not showing on frontside of html but console show its perfectly.
My html code:
fil array not showing
<ion-header>
<ion-navbar color="primary">
<ion-buttons start>
<button ion-button (click)="closeModal()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>Search Result(105)</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="tab-filter">
<!--filter list-->
<pre>{{fil}}</pre>
<pre>{{srts}}</pre>
<ion-list class="list-no-border">
<ion-item>
<ion-label> PLACE</ion-label>
<ion-select>
<ion-option value="">All Regions</ion-option>
<ion-option value="vn">Vietnam</ion-option>
</ion-select>
</ion-item>
<ion-item class="price-ranger">
<ion-label>Price</ion-label>
<ion-input type="text" placeholder="Min"></ion-input>
-
<ion-input type="text" placeholder="Max"></ion-input>
</ion-item>
<ion-item>
<ion-label>Free shipping</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Once pice only</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Sale items</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
</ion-list>
</ion-content>
<!--Footer buttons-->
<ion-footer class="category">
<ion-toolbar position="bottom">
<ion-buttons end>
<button ion-button (click)="closeModal()">
CANCEL
</button>
<button ion-button (click)="closeModal()">
<span ion-text color="gray">APPLY</span>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>

Your {{fil}} is an array yet you are declaring it on the view as a simple property. Angular does not automatically interpret an array with string interpolation.
For arrays you need to use *ngFor
So if you want like you have stated is being displayed in your console.log you could write something like
<div *ngFor="let item of fil">
<ion-item *ngFor="let color of item.COLOR">
{{color.propertyName}}
<ion-item>
<ion-item *ngFor="let size of item.SIZE">
{{color.propertyName}}
<ion-item>
</div>

I resolved my issue by using
this.fil = [];
to
this.fil={}