AngularJS directive to non interactive html components


Using utilities to get work done is always comfortable and good practice for sake of code re usability. Recently I came across a requirement where I had to make my several HTML component non clickable.

You can make input types elements non clickable very easily as disabled attribute works well with input types. But wait! what about other elements? Now a days we have lots of third party UI frameworks as angular-material or bootstrap which provides custom stitched input type like md-checkbox in angular material library.

So it means we can not disable it with our traditional disabled attribute. Here discussing concept can save our life.

Idea is very simple i.e apply a simple css on your element and make it non intractable.

pointer-events: none;

Now lets create a css class and apply it to anything and BOOM! you are good to go.

Lets talk more angular now.

Shouldn’t we create a custom attribute which can be short hand for us to apply to our victims? Oh! Obviously yes.

Lets do then.

first create a css class.

.disable {
  pointer-events: none;

Now lets create deamon now

(function() {
    .directive('sgDisable', function() {
      return {
        priority: 1,
        restrict: 'A',
        link: function(scope, element, attr, ngModel) {

Looks simple and straight forward.

Lets look at the implementation.

    <input type="text" value="editable" /></div>
    <input type="text" value="disabled" sg-disable/></div>
    <button sg-disable>Disabled</button></div>

Running plunker can be seen here

Keep me posted with such utilities.


Happy Learning


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s