I've got a typeahead element in my Angular 5 application. What I can't figure out is how to determine the selection. I have this for my resultTemplate:
<ng-template #listSelectionFormatter let-r="result">
<span (click)="onWorkerSelected(r)">{{r.wwid}} - {{r.fullName}}</span>
</ng-template>
So if I click on one of the selected items my callback happens and I can store the result. But if they hit the tab key instead, I don't know how to grab the selection.
I basically need to be able to call propagateChange as this is used in a ControlValueAccessor.
Related
I'm using the ngx-bootstrap date range picker (https://valor-software.com/ngx-bootstrap/#/components/datepicker?tab=overview). I noticed that this picker (which displays two side-by-side calendars) seems to share the template with the single-calendar date picker: https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/themes/bs/bs-datepicker-view.html.
However, despite the presence of Clear, Apply, and Cancel buttons in the template, there seems to be no way to add them to the date range picker via the usual bsConfig method (when I tried, the options are ignored). This may have been a choice on the part of the developers, but whatever the reason, I want to add those buttons.
Is there any way to extend the date range picker in my Angular component to hook into those template elements?
Example...here is the section of the template that contains the apply and clear buttons:
<div class="bs-datepicker-buttons" *ngIf="false">
<button class="btn btn-success" type="button">Apply</button>
<button class="btn btn-default" type="button">Cancel</button>
</div>
There is an ngIf condition, but it's hardcoded to false. How might I override that to make these buttons appear? And, once they appear, how do I add click handlers, since they are omitted in the template?
Thanks for pointing me in the right direction. I've only been coding with Angular (v. 15) for two months, so things like this are still difficult for me to conceptualize.
In Apex 5.0.2. I have created a copy-to-clipboard function in my interactive report. The user can copy the value of a hidden column by clicking on this button that is set in a column and is repeating in every row (see image below).
The copy column is edited with an HTML Expression which does the following:
<button class="copytoclipboard
t-Button
t-Button--noLabel
t-Button--icon
t-Button--stretch" customid="#COPY#" type="button">
<span class="t-Icon fa fa-copy" aria-hidden="true">
</span>
</button>
My Dynamic Action with the event 'click', jQuery selector .copytoclipboard has 2 true actions. 1 sets the value of a page item (text_field) by getting the customid from that row with:
this.triggeringElement.getAttribute("customid")
The second one then copies this value to the clipboard.
This works fine and when I inspect the button element, I see the correct HTML output, with the correct value. However, as soon as I use the built-in search filter in the Interactive Report, my button breaks and clicking this button does not trigger my dynamic actions anymore, however, inspecting the element still returns the expected HTML output.
Can somebody please clarify why this is happening, and how this could be avoided?
Thank you in advance.
I found the solution. I had to put the Event Scope of the Dynamic Action to Dynamic, which is set to Static by default. Using the built-in page filter does a PPR of the report, thus when static, the event handler is longer bound to the triggering element.
Static (default) - Binds the event handler to the triggering elements
for the lifetime of the current page, but will no longer be bound if
the triggering elements are updated via Partial Page Refresh (PPR).
Dynamic - Binds the event handler to the triggering elements for the
lifetime of the current page, including any triggering elements that
are recreated via Partial Page Refresh (PPR).
Once - Binds the event
handler to the triggering elements for a once only event.
I have a dropdown that is populated with an *ngFor that iterates over a list of users. I want to exclude the current user from the list. Creating a whole pipe seems overkill. Is there a simple way to do this since Angular2 won't let me have both an *ngFor and an *ngIf on the same element?
Use *ngFor for the parent div and then for the child div use *ngIf to check whether it is a current user.
`<div *ngFor=“ let user of users”><div *ngIF= “user != currentUser”>user</div></div>`
In web page,there are few tabs like CustomerAccountContact.
These tabs are inside SPAN html tag.
I have added the web element for Account in OR. When I try to highlight it works fine but when I try to click using Click method its not going to the Account tab.
If I take the abs_x and abs_y of the web element and try to click using mercury.devicereply object it works fine.
PFB, the html source code for accounts tab:
<a class="x-tab-right" onclick="return false;" href="#">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text ">
Account
</span>
</span>
</em>
</a>
Since the link has an onclick="return false;" this means that click events don't do anything and the application reacts to different events. Apparently these events aren't those that UFT fires when it simulates a Click event.
You have two options as I see it.
Find out what event the application is reacting to and fire that event in the test (instead of performing a click)
Use device replay, this can be done more simply than using the Mercury.DeviceReplay object as you're doing by changing the replay-type to device (as explained in this answer).
It is occurring because application is firing different event. Even fire event may not work in this case. Since it is already working with Mercury device replay it would be better for you to create and register it (RegisterUserFunc).
RegisterUserFunc "WebLink", "fLnkClick", "fLnkClick"
Use:
Before click method
Setting.WebPackage("ReplayType") = 2
After click method
Setting.WebPackage("ReplayType") = 1
If you set Replay Type = 2 then you are giving control to Mouse, which do the actions similar the way you do manually. So clicks, mouseover and other mouse related actions will work if normal QTP click fails.
Also we can use "Mercury.DeviceReplay" object for the implementing similar logic.
<div class="add" data-icon="'" ng-show="!editMode" ng-click="btnAdd()"> Add an Honor or Award </div>
Above is the html code for the button i am trying to click (Add an Honor or Award), but this button doesn't have an unique ID, and keeps on changing the xpath as the user adds multiple data.
Use css
[class='add'][ng-click='btnAdd()']
xpath is also another option
//div[contains(.,'Add an Honor or Award')]
Or,
//div[#class='add']