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
Related
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.
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
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
How do I get Photos object? I have tried {{ item.image.Photos[0].image }} it doesn't work
TypeScript
listHotelPhotos( hotel_id ){
let loader = this.loadingCtrl.create({ content: 'Loading...' });
loader.present();
this.api.hotelPhotos( hotel_id ).subscribe( response => {
this.hotelImages = response.HotelImages;
this.Rooms = response.Rooms;
console.log( response.Rooms );
loader.dismiss();
});
}
HTML
<ion-grid class="select-room-types">
<ion-row *ngFor="let item of Rooms">
<ion-col width-100><img src="{{ item.image }}" /></ion-col>
<div class="caption">
<ion-grid class="select-room-card">
<ion-row>
<ion-col width-75>{{ item.name }}</ion-col>
<ion-col width-25>FJ ${{ item.rate }}</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-row>
</ion-grid>
assuming Rooms is the array you posted an image of, it's just item.Photos[0].image
I have this angular2 template:
<template *ngIf="alerts.length > 0">
<alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
{{ alert?.msg }}
</alert>
</template>
I get these errors:
zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * (" </div>
<div *ngSwitchCase="false" class="container p-t-10">
<alert *ngIf="alerts.length > 0" [ERROR ->]*ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert"): b#5:37
what's the problem I put *ngIf and *ngFor in defferent html elements. It should work. no?
and:
Can't bind to 'type' since it isn't a known property of 'alert'. (""container p-t-10">
<alert *ngIf="alerts.length > 0" *ngFor="let alert of alerts;let i = index" [ERROR ->][type]="alert.type" dismissible="true" (close)="closeAlert(i)">
{{ alert?.msg }}
</alert>
"): b#5:80
I added the
*ngIf="alerts.length > 0 to avoid cases of alert = []. How can i fix it otherwise?
The * in *ngFor makes Angular to add a <template> tag. On a <template> tag this doesn't make sense and therefore here structural directives have a different syntax.
<template ngFor [ngForOf]="alerts" let-alert let-i="index">
Because different syntax for almost the same on different places caused quite some confusion, the Angular team recently introduced
<ng-container>
that behaves similar to the <template> tag (is not added to the DOM) but allows the more common syntax
<ng-container *ngIf="alerts.length > 0">
<alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
{{ alert?.msg }}
</alert>
</ng-container>
You should use <ng-container> for this case. As a example:
<ng-container *ngIf="totalItems > 0">
<tr *ngFor="let item of outputs| paginate: { id:'ab', itemsPerPage: pageSize, currentPage: currentPage, totalItems: totalItems }; let $index = index">
<td>{{item.x}}</td>
<td>{{item.y | date: 'MMMM d, y, h:mm:ss a' }}</td>
<td>{{item.z}}</td>
<td>{{item.r}}</td>
</tr>
</ng-container>
<ng-container *ngIf="totalItems > 10">
<tr *ngFor="let item of outputs| paginate: { id:'aabbbbbbbbb', itemsPerPage: pageSize, currentPage: currentPage, totalItems: totalItems }; let $index = index">
<td>{{item.x}}</td>
<td>{{item.y | date: 'MMMM d, y, h:mm:ss a' }}</td>
<td>{{item.z}}</td>
<td>{{item.r}}</td>
</tr>
</ng-container>