I'm looking for a solution for my problem. I'm using a PrimeNG tree for an aside menu. When I click a button in screen to navigate, tree is rebuilded with new options. However, in the first menu, if I search an option with the filter of a p-tree, filter works fine, but, if I navigate, filter keeps input text, and options in the second menu are not showed till I clean the input filter.
¿Is there a possibility to clean the filter automatically?
I attach images for more details.
Expected behaviour:
Current behaviour
The HTML code is:
<p-tree [value]="files3" [filter]="true" filterMode="strict" selectionMode="single" scrollHeight="200px"></p-tree>
Thanks
I answer my onw question
It's necesary to give id to html element and execute function Tree resetFilter()
HTML code:
<p-tree #tree [value]="files3" [filter]="true" filterMode="strict" selectionMode="single" scrollHeight="200px"></p-tree>
Then, in TS:
#ViewChild('tree') tree;
this.tree.resetFilter();
Related
Can someone help me out here on how to add passengers count dropdown form like on the image below. i have been searching all over but cannot seem to find any demo or help.
thanks for your help
This is a solution using pure HTML, CSS, and jQuery. For a Bootstrap-specific answer, How use input field as toggle for bootstrap 4 dropdown may help.
Moving on.
You should create a normal number type form and add a disabled attribute in the input tag so that no cursor appears when you click the form (<input type="number" disabled>). Then, just create a dropdown menu (probably a <div> with an absolute position right under the input) with a classname of your choice (assuming in this answer that you choose .passengerInput as the classname).
You can hide the dropdown by default using the $(".passengerInputDropdown").hide() method in the body of your JS.
Then, when you click the form, using the $(".passengerInput").toggle() method, do something to the effect of:
$(".passengerInput").on("click", () => {
$(".passengerInputDropdown").toggle();
})
Let me know if this helps!
I'm trying to hide the context menu when there is a condition applied. I've come across this post and followed through with it but still, the context menu is showing. I'm trying to add context menu to p-table and I have a condition where if there are no options available then I want to hide context menu but when I'm calling hide() method on context menu it's not working. below are the code snippets of what I did so far.
In .html file
<p-table #table (onContextMenuSelect)="onContextMenuSelect($event, tableContextMenu)" [contextMenu]="tableContextMenu"> </p-table>
<p-contextMenu #tableContextMenu appendTo="body" [model]="contextMenus"></p-contextMenu>
In .ts file
public onContextMenuSelect(event, contextMenu){
if(this.loadContextMenu){
contextMenu.hide();
}
}
Changing (onContextMenuSelect) to contextmenu will trigger contextMenu.hide(); if condition is matched.
<p-table #table (contextmenu)="onContextMenuSelect($event, tableContextMenu)" [contextMenu]="tableContextMenu"> </p-table>
I have an angular project I am developing using angular material for a slide toggle and text fields, and cdk drag and drop for drag and drop functionality. I am pretty new to angular libraries and angular in general.
I have run into an issue where the slide toggle is only toggling the first element inside an *ngFor loop. I have tried adding a let i = index to the ngFor and it is always passed as 0 no matter which toggle you select, however if I place {{ i }}, it will show up as the correct index. I am at a loss.
https://stackblitz.com/edit/angular-yezv9a
If you go to the project at that link, and toggle the test 2 or 3 toggle, it will shift the first 1 and I can not seem to figure out why
Any help is appreciated
If I understand you correctly, There is one issue in your code is mat-slide-toggle element has an id which is repeating in ngFor
<mat-slide-toggle id="toggle" color="primary" (change)="onToggle(button)" [checked]="button.enabled"></mat-slide-toggle>
I removed the id attribute and found working correctly, based on my understanding you can find a fork of working example in below url
https://angular-yezv9a-bac1jz.stackblitz.io/
Make the id attribute as empty
Will work as expected
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
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.