I was able to successfully Add Select All functionality when checkbox is clicked. However I am unable to Uncheck All when all items are already selected
Here is the link to code - https://stackblitz.com/edit/angular-material-select-all-aota2app.component.html
Your function unselectAll() has never been called
<mat-checkbox (ngModelChange)="selected = !selected" [ngModel]="checked">Check/ Uncheck</mat-checkbox>
Related
Here is the link for an example of the issue I will attempt to describe. In the chips autocomplete example, click the text box to select a new fruit.
Now, before clicking anywhere else, click again on the text box as you did before.
This should result in no options showing up. The issue here is that the user must either begin keying in a new selection or first click another element in the window before matchip will show the options to choose from. I am wondering if there is a way to fix this issue. I would like a user to be able to choose a selection from the list and then immediately click the text box as they had before and make a new selection.
I'm using mat-chip-list inside an outer *ngFor iterating over a FormArray.
Here is what I'have done. It's pretty efficient :
<input
#validatorInput
#operationTrigger="matAutocompleteTrigger"
[formControl]="contactCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
(blur)="contactCtrl.setValue(''); validatorInput.value='';"
(click)="contactCtrl.setValue(''); validatorInput.value=''; operationTrigger.openPanel()">
The trick is
Always clear your html input and your (shared) formControl with an empty and not null value each time the blur and click events occur.
Do NOT do this 'clear' on the input focus event. (Because when you delete the last chip, the input is auto-focus and you will have the famous Expression has changed after it was checked.
Call operationTrigger.openPanel(); when the user click on the input
Setting contactCtrl.setValue(''); allows your autocomplete panel to be automatically opened when you call operationTrigger.openPanel()
Setting validatorInput.value=''; is just a way to properly sync your formControl with the html input to ensure a good UX/UI behavior.
Inside my formArray, the formControl is the same for all the inputs but it does not matter since the user can only manipulate one input at a given time
Since you didn't post your code and you mention the example on the material site I'm going to do it as a fork of the stackblitz example they have on their site.
But this will allow you to open the autocomplete panel again despite having had the cursor there and choosing an option previously.
// Using MatAutocompleteTrigger will give you access to the API that will allow you to
// to open the panel or keep it open
...
#ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger;
...
ngAfterViewInit() {
fromEvent(this.fruitInput.nativeElement, 'click')
.pipe(
tap(() => {
this.trigger.openPanel()
})
).subscribe()
}
Link to the full stackblitz:
https://stackblitz.com/edit/angular-sb38ig
I have a change even that filters a table. i want to make 3 of the checkbox auto check from input I'm getting from the client in a different page.
everything is working correctly but when i put checked="true" the checkbox is checked but the change event is not triggered only when i unchecked the checkbox i was getting a trigger.
This is my HTML check box :
<mat-checkbox class="CheckBoxClass" value="clientType" (change)="updateFilter('LQOCH_SHM_LOEZI_QTSR', clientType)" >{{clientType}}</mat-checkbox>
If anything else is needed to answer this question i will provide it.
I don't have a working stackblitz of this project.
Hi I am working on a Angular4 application and for UI I am using Primeng.
I have a multi-select element which behaves pretty much the same as it does over here https://www.primefaces.org/primeng/#/multiselect
The only thing I want different is on the drop-down, when "X" (close) button is clicked, I want it to clear all the selection instead of closing the drop-down itself.
Is there any way to achieve that in primeng ?
Help is appreciated !
You can manually trigger the checkbox in the left by jquery.
declare var jquery:any;
declare var $ :any;
$('.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default').trigger('click')
or you make the value of the p-multiselect equal to [].
Ex.
//html
<p-multiSelect #multiselect>
<button type="button" (click)="functionToClear(multiselect)"</button>
</p-multiselect>
//ts
functionToClear(multiselect): void {
multiselect.value = [];
}
It isn't possible, but you can clear all the selection by clicking the checkbox in the left corner twice.
While it isn't a supported functionality of the Multiselect PrimeNg component, if you really want it to do that, you would have to manually edit the component, multiselect.js, and modify the close(event) function to do what you want.
you can use formGroup and try to clear value following way:
html:
<ng-multiselect-dropdown [(ngModel)]="data"
[data]="fetchedData" [settings]="customeSettings"
formControlName="myControl">
</ng-multiselect-dropdown>
.ts:
this.form_name.controls.myControl.setValue("");
normally the multi-select input in primeng is binded to a property that holds the selected members, usually an array.
you can use a reset button for example that when clicked, it will empty that propery/array and this will clear all the selected check boxes of the multi-select.
Since PrimeNg version 13, you can use [showClear]="true" property to display an 'X' icon next to the control value.
Link to form
The form can be found at the link above.
Up until this morning the radio buttons and the form had been working as expected, however now users can't change their answer once they've picked from one of the two radio buttons even though they use the same input name. Using $("#volunteer-form input:radio[name='gender']:checked").val() I've found that the value is being correctly set and that the two buttons are still linked by a common name. Also, it appears possible to switch between the two using a bit of jQuery, like so:
$("#volunteer-form input[name=gender][value=male]").prop('checked', true);
Any ideas?
its because of your javascript block here:
$(document).ready(function() {
$('.inline').fancybox({
'maxWidth': 600
});
$('.form').click(function(event){
event.preventDefault();
});
});
when you are clicking on the radio button inside the form your preventDefault is stopping the change of radiobutton state ... or maybe you already knew that.
What is the intended purpose of including the preventDefault where you have it?
I have a couple of HTML elements on a page. Whenever the page context is invalidated and it re-renders the elements are re-rendered with no visual cue of the selected option.
If I check for the selection using $('.select1 option:selected') the selected option is returned. However, it is not rendered as selected. If it's a drop-down, then the first element shows up. If it's a multi-line select, the first (firefox) or last (chrome) element shows up with a greyed out select line on it.
If I then click the selected element a second time, it shows up as selected.
Anyone know how to fix this?
I implemented the solution here: Meteor form state not being saved
Store the selected value in a session variable on click:
Template.packageViewer.events({
'change .tagselect': function(){
Session.set('tag', $('.tagselect :selected').html());}
,
'change .groupselect': function(){
Session.set('group', $('.groupselect :selected').html());}
,
'change .packageselect': function(){
Session.set('package', $('.packageselect :selected').val());}
});
Then set the select selected value in the post-render function:
Template.packageViewer.rendered = function(){
$('.groupselect').val(Session.get('group'));
$('.tagselect').val(Session.get('tag'));
}
Hacky, but works.
Maybe you can use $('.select1').trigger("change"); function.