I´m trying to use the attribute appendTo in the component ContextMenu, but I want attach the behavior to one element, like a div.
on the element u want to append to add a hashtag #myHashTag
and on the prime element u want to append add:
[appendTo]="myHashTag" <- without the # sign
example:
<div class="recording-control-button" #stopbutton></div>
<p-confirmDialog [appendTo]="stopbutton"></p-confirmDialog>
I'm presuming you're using Angular 2?
Based on the information on the api for primeng context menu here:
PrimeNg context menu
You need to use a Angular 2 template variable, see here:
Angular 2 HTML variables
I try this and it works - [appendTo]="'body or template or any Id'"
For example:
<div #largeModal></div> - define anywhere in html, but in your project
Define this menu primeng in your html
<ng-template let-item="rowData" <p-menu #menu popup="popup" [model]="items"></p-menu> <button type="button" pButton icon="fa fa-list" label="Show" [appendTo]="'largeModal'" (click)="menu.toggle($event)"></button> </ng-template>
Related
I have a apply button in a filter bar with several filters , sometimes this apply button will display in the next row instead of showing it in the same row with the other filters.How i can identify the position of this apply button in order to identify where it's displaying in the html page.
<div class="filter-container">
<button (click)="apply() "
[ngClass]="{'a-btn--disabled': isDisable}" id ="apply"
mat-raised-button >Apply
</button>
</div>
Apply button and other filters are inside this <div class="filter-container">.This is my component code.
const fpH = $('.apply').positionY;
console.log(fpH);
But console.log(fpH); prints as undefined. I tried with paddingRight but it's also shows like undefined
what can i do for this
$('.apply') searches for an element with class apply, looks like you are trying to find an element with id of class, if you want to use, the selector for that is '#apply', so in your case, replace $('.apply') with $('#apply')
However, you should utilize Angular's ViewChild in order to do what you are looking for.
so your html will look like:
<div class="filter-container">
<button #applyBtn (click)="apply() "
[ngClass]="{'a-btn--disabled': isDisable}" id ="apply"
mat-raised-button >Apply
</button>
</div>
in in your component:
#ViewChild('applyBtn') applyBtn: ElementRef;
When you want to access the element (in the component):
this.applyBtn.nativeElement.getBoundingClientRect()
which will give you the location and dimensions of your element
Here is a stackblitz
I am working to a little framework based on Angular/Material 9. I want to create custom directives that apply standard Material directives to their host element. For some UI elements, I prefer to use directives instead of creating custom wrapper components (using ng-content). For example, for buttons, I want use a "custom-button" directive like this:
<button type="button" custom-button>Hello world!</button>
The directive should apply the standard Material directives (and some other attribute, too) for buttons to the host element. The rendered HTML button should be:
<button type="button" custom-button mat-button mat-raised-button color="accent">Hello world!</button>
I know how to set properties/attributes, but obviously the button does not act like a "real" mat-button (it hasn't custom inner elements added by Material, nor the for the ripple effect).
I am pretty new with Angular, so I searched a lot for an answer. But I only found very complicated or outdated solutions (AngularJS). Any help?
When I run my angularJS (ver 1.4.9) app without the uib-.. directives, the select works but displays the items already open and the button does nothing.
It won't integrate with the dropdown menu component. All the examples I've seen use the unordered list and list item structure and the bootstrap UI dropdown appears based around the ui and li elements leading to the obvious question - why those elements and not select, option elements.
I would like to keep this: ng-options="e for e in vm.plannedEmployees track by e"
as I know it works and took a week of hacking to find it (though I don't understand it's complexity)
<div class="btn-group" uib-dropdown>
<button class="btn btn-primary" uib-dropdown-toggle>
<span class="caret"></span>
</button>
<select ng-options="e for e in vm.plannedEmployees track by e"
multiple="multiple" ng-model="selectedEmployee"
ng-change="vm.employeeSelectClick(selectedEmployee)">
</select>
</div>
All the examples I've seen use the unordered list and list item structure and the bootstrap UI dropdown appears based around the ui and li elements leading to the obvious question - why those elements and not select, option elements.
The uib-bootstrap project is aimed to port the bootstrap plugins into Angular directives, the bootstrap style defines the Dropdown by using a <ul> and <li> elements and uses CSS that select/target these elements, the uib directives just replace the jQuery code you would use in a non Angular page.
Also, in a UI sense, a select is not the same as a dropdown, in Angular sense, a select is an input that would normally expose an ngModel, uib-dropdown doesn't expose an ngModel (and subsequently, won't allow you to use directives that require it, such an ngChange or ngModelOptions).
That being said, you may want to look at ui-select as an alternative.
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.
I am working on converting a html to angular js and one of the issue i have is, a button on the page uses ID and based of that id there is a div class that runs set of texts to be displayed accordingly.
Code that we have is something like this.
Continue
From the HTML page when the user clicks on the button continue... below code will be executed.
<div class="ContinueClicked">
text.......
</div>
I am trying to figure out a way to see how i can make it work with angular js. So when the user is clicking on the continue button, the page should display the content in div continueClicked. Should i be using any directive here? please help.
You have to adhere to AngularJS principles and conventions. Angular uses Directives for most of the DOM transformations, and Bindings for constant DOM and Model updates (two-way data bindings.)
In your case scenario you might want to have the following DOM elements (inside a Controller inside an ng-app Module, see AngularJS docs):
<!-- The button with the event handler as ng-click directive -->
<button ng-click="isContinue = true">Show continue content</button>
<!-- The content wrap with ng-show directive -->
<div class="ContinueClicked" ng-init="isContinue = false" ng-show="isContinue">
My content to be shown
</div>
You can also read and practice basic concepts following the Angular Tutorial.