I tried lots and search numbers of time but I didnt get any solution to disable click on div element. Already question has been asked but they are saying not possible on divs and I want to know only, is there any ways to disable div in angular2
<div>(click)="isDisabled ? $event.stopPropagation() : myClickHandler($event); isDisabled ? false : null"
[class.isDisabled]="isDisabled"></div>
And the old answer not clearly about disabling divs and pointer-events:none is not supported in old version browser also it become editable from network tab
You can use css:
pointer-events:none
Or maybe could do something like:
<div (click)="false; $event.stopPropagation();"> </div>
There are several ways of preventing a click, depends on what you need
The straightforward answer here will be just not to render the function if the element should be disabled. Something like this:
<div (click)="shouldBeDisabled ? null : callYourFunctionHere()"></div>
But a better solution will be to put this condition into your function itself
HTML
<div (click)="callYourFunctionHere()"></div>
TS
const callYourFunctionHere = () => {
if (this.shouldBeDisabled) return
//if statement above is false your general logic will be rendered
}
Related
I need to disable some fields based on my angular form. I am trying to disable the DOM elements in component class because many html tags are customized and so disabled attribute cannot be used there. The way I am doing this is using #ViewChild/#ViewChildren in my component and disabling in ngAfterViewInit(). I am not able to disable the elements which are inside ngIf in html. Below is the code:
Html:
<div *ngIf="displayAdvOpt">
<div class="card-title">Rules</div>
<abc-select-field
#rule
width="100%"
label=" "
formControlName="_rules"
[options]="rules"
></abc-select-field>
<div>
Component class:
#ViewChildren('rule') ruleSelect;
When logging ruleSelect in component class, it shows that is a QueryList and not a FormControl, as is the case for the elements not inside ngIf. Due to this, I am not able to do ruleSelect.control.disable() to make it disabled in html. I am doing these in ngAfterViewInit().
Please let me know how can I disable a QueryLst or if there is any other way.
#Abhinash, you can not acces to any element if is not in the screen. As you has the element under a *ngIf you need condition becomes true and "after Angular repaint", enable/disable... so, in general
this.condition=true;
setTimeout(()=>{
this.ruleSelect.....
})
But your abc-select-field, has a FormControl in any way and the FormControl exist even the abc-select-field is not in screen, so if you makes that the elements are disabled depending if the control is disabled
In order to disable the select field, you don't need to know neither that 'distinction' (QueryList/Control) nor a 'local reference' (#rule) :
Simply, in the code you want to disable, you just need to do this:
this.form.get('_rules').disable();
// or this.form.constrols['_rules'].disable();
Similarly, when you want to re-enable it you can use:
this.form.get('_rules').enable();
Below is the workaround I tried.
<div *ngIf="displayAdvOpt">
<div class="card-title">Rules</div>
<abc-select-field
#rule
width="100%"
label=" "
formControlName="_rules"
[options]="rules"
on-mouseover="isDisabled()"
></abc-select-field>
<div>
In component class:
#ViewChild('rule') ruleSelect;
isDisabled() {
if (this.showChanges){
this.ruleSelect.control.disable();
}
I see that in ngAfterViewInit(), ruleSelect is a QueryList but in isDisabled() the method called after on-mousehover, it is coming as AbcSelectFieldComponent and so I can call .control.disable() on it. The only reason I can think of is this- https://stackoverflow.com/a/55610325/4464806
Anymore suggestions are welcome!!
Hi I am trying to access the DIV element using watir but I am unable to do that,I have tried in different ways but couldn't access it,may be I think it need to be access through some parent element can anyone help me out?
My system Configurations
IE-8
Windows 7
I tried with the below command
#ie.div(:text,'COMPOSE').click
the command gets execute with no errors but no action is performed on the UI
The best solution appears to be switching to Watir-Webdriver. With Watir-Webdriver, #ie.div(:text,'COMPOSE').click will work as expected.
Assuming that is not an option, there are a couple of reasons why that same command does not work with Watir(-Classic) v1.6.7:
The first problem is that #ie.div(:text,'COMPOSE').click will find the first div that contains this text. This would be one of the ancestors of the div you want. As a result, Watir will send the click event against the wrong element.
The second problem is that the div is not responding to the onclick event fired by Watir. I am not sure why this problem exists.
To solve the first problem, you will need to be more specific when locating the div. In this case, the "role" attribute can be used since none of the ancestor elements have this attribute. Watir-Classic does not support using the role attribute as a locator. As a result, you will need to create a custom locator using an element collection and the find method:
#ie.divs.find{ |div| div.attribute_value('role') == 'button' && div.text == 'COMPOSE' }
To solve the second problem, it turns out that double clicking does work. While newer versions of Watir-Classic have a double_click method implemented, it does not exist in 1.6.7. You can replicate the method by calling the fire_event method:
.fire_event('ondblclick')
Putting it all together, the following will click the compose button:
#ie.divs.find{ |div| div.attribute_value('role') == 'button' && div.text == 'COMPOSE' }.fire_event('ondblclick')
There may be more than one element on the page with the text 'COMPOSE', some may be hidden. Try:
#ie.divs(:text,'COMPOSE').size
That is divs with an s.
Then you can try something like the following and see if you get a change in the UI:
#ie.divs(:text,'COMPOSE').each { |b| b.fire_event('click') }
I remember that fire_event works better, but would recommend consulting the docs for the difference between .click and fire_event.
I created a button
<button type="button" ng-click="chooseOptions()" id="chooseOptionButton" ng-bind="whatToDisplay()"></button>
Which shows a <div ng-show=appearOnChoice>on click and toggles back when clicking again!
$scope.chooseOptions=function(){
$scope.appearOnChoice=!$scope.appearOnChoice;
}
However, I also want this element to hide again, when the user clicks anywhere outside this div
element. How can I do this? I need strictly stick with AngularJS and not use jQuery.
Hope you can help me with that.
EDIT: I tried to adapt some of the events of bootstrap datepicker, but I am not sure how to apply it properly
$scope.$on('datepicker.focus', focusElement);
scope.$watch('isOpen', function(value) {
if (value) {
scope.$broadcast('datepicker.focus');
scope.position = appendToBody ? $position.offset(element) : $position.position(element);
scope.position.top = scope.position.top + element.prop('offsetHeight');
$document.bind('click', documentClickBind);
} else {
$document.unbind('click', documentClickBind);
}
});
var focusElement = function() {
$timeout(function() {
self.element[0].focus();
}, 0 , false);
};
How can I adapt this to my case?!
I think that you dont have to write a function, you can use ng-init to create a model, ng-show to show/hide the div based on the value of the model, and with ng-click change the value of the model. See example below:
var myapp = angular.module('myapp',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-init="showDiv = true;" >
<div ng-show="showDiv"> SHOOOOOOOOW </div>
<button ng-click="showDiv = !showDiv;">Click me</button>
</div>
</div>
You can set the model value to be false when the user is clicking everywhere else, and set it again to true when it clicks the button. If you made a fiddle I can help you easier :)
If the DIV has focus, then you can use the ng-blur directive on the DIV to run set appearOnChoice to false. However, if the DIV does not already have focus (which it won't if you are depending on the button to make it visible), you will need to manipulate the DOM in your code (to provide focus) OR create a custom directive to set focus so that the ng-blur directive will work. Check out possibilities for that with this link.
alternatively, you can add an ng-click directive to every clickable object on your view that will hide the DIV when fired. But I don't really think that's the best way to go...
The easiest and cleanest way to handle the click away is to register and event on the document that will remove the element when anything other than it, or its children, are clicked.
For an example of a service that does this see GitHub EnzeyNet/Services
Sorry about the lack of documentation there but after injecting the service you would use it like this.
var divElem
nzService.registerClickAwayAction(function() {
divElem.remove();
}, divElem);
I simply solved it by using a ui bootstrap dropdown. This comes along with an is-open option and closes on click outside.
Imagine I have some webapp with a lot of different filters, which impact e.g. search results on a page.
The filters are optional and I use select element. The first option always means, that the filter is not used and says something like "not used" or "select xyz".
I'm looking now for a way to make it possible to see in a quick glance which filters are currently used and which are not, e.g. by changing the color or background-color.
I didn't find a way to do this via CSS yet, maybe its not possible without javascript?
Solutions needs only to work in latest Chrome.
If you want the color of the dropdown to change immediately as soon as the user changes the selection (without reloading the page), you'll have to use JavaScript. Something like:
<script type="text/Javascript">
function changeColor(element)
{
if (element.selectedIndex != 0)
element.style.backgroundColor = "green";
else
element.style.backgroundColor = "red";
}
</script>
<select onchange="changeColor(this)">
So that's how you would change the color as soon as the user changes the selection.
To change it on page reload, you would have to use some server-side scripting language (which I'm assuming you're using already). So when creating the <select> element, you would check to see if its value has been set. If you were using PHP, it might look something like this:
<select name="mySelect" style="background-color:<?php echo ($_POST["mySelect"] == "select xyz" ? "red" : "green"); ?>;">
I need to style disabled <select>elements to make them look like they're enabled. Can someone help?
PS. I am all-too-aware of the downsides of doing this sort of thing vis a vis HCI principles etc., but its a requirement so I've got to do it if it is possible ...
Thanks.
EDIT:
#AlexThomas' method works well when the elements are disabled in HTML code but unfortunately I'm doing the disabling/enabling with JQuery:
<select class='dayselector'>
<option>Monday</option>
<option>Tuesday</option>
<!-- .... etc. -->
</select>
$(".dayselector").attr("disabled",true);
$(".dayselector").attr("disabled",false);
So the selector:
$(".dayselector") //works and gets all the selects
and
$(".dayselector option") //works and gets all the selects' option items
but
$(".dayselector [disabled='true']") //doesn't return anything.
and
`$(".dayselector [disabled='false']") //doesn't return anything.
Is there something I'm missing?
You could either go with
select[disabled] { }
(not supported in <IE7)
or
select:disabled { }
(not supported in <IE9)
Maybe you should use readonly instead of disabled. This will make the input enabled, but without allowing the user to change its value.
Using jquery:
$('option[disabled="true"]').each(function () {
$(this).attr('style', 'color:red');
});
check it in action here http://jsfiddle.net/GfNve