Angular Component styling – Using shadow piercing descendant selector

In this post, I am going to share how the shadow piercing descendant selector helped me with style scoping problem.

Well, I tried to create Angular wrapper for one of a JQuery plugin. All worked as planned and later I noticed that I was not able to apply custom styles to the plugin in ViewEncapsulation.Emulated mode. I can set the custom style when the ViewEncapsulation is set to None.

So I started to search for a solution to apply the custom style in ViewEncapsulation.Emulated mode.

What does ViewEncapsulation emulated mode actually do?

In ViewEncapsulation.Emulated mode, angular will try to emulate the style scoping feature of Shadow DOM. This is achieved by adding attribute to the element and style.

@Component({
    selector: 'my-app',
    template: `
<div>
<h2>Hello {{name}}</h2>
</div>
`,
    styles: [`h2 {
       color: red
    }`]
})
export class App {
   name:string;
   constructor() {
     this.name = `Angular! v${VERSION.full}`
   }
}

Extra attribute will be added to the template elements as follows.

b1

b2

Why component style is not applied to the JQuery plugin?

Inside the plugin the element creation is done by JQuery instead of Angular. So the attributes used to emulate style scoping is not added to the elements.

To illustrate this, check the below code example in which the dynamic h2 element is appended in the ngAfterViewInit lifecycle.


@Component({
    selector: 'my-app',
    template: `
<div>
<h2>Hello {{name}}</h2>
</div>
`,
    styles: [`::ng-deep h2 {
      color: red
    }`]
})
export class App {
     name:string; ele;
     constructor(eleRef: ElementRef) {
       this.name = `Angular! v${VERSION.full}`
       this.ele = eleRef;
     }
     ngAfterViewInit() {
       let dynam = document.createElement('h2');
       dynam.innerHTML = 'Dynamic content ' + this.name;
       this.ele.nativeElement.appendChild(dynam);
     }
}

The result will be as follow, you can see that the style from the component is not applied to the dynamically inserted h2 element.

out
Dynamic element insertion – style is not applied

Shadow piercing descendant selector to the rescue

To resolve the above depicted problem, you can use the shadow piercing descendant selector. It is a technique introduced in shadow DOM concept which is deprecated in major browsers.

But you can use this in Angular using the ::ng-deep special selector. This selector will apply the parent component styles to the descendant child components.

The encapsulation mode should be Emulated to use this feature in Angular

Now the component style should be modified as follows


::ng-deep h2 {
   color: red
}

The result will be as follows

oute
Dynamic element insertion – with ::ng-deep selector

Samplehttps://plnkr.co/edit/qb9m0qglyDNzmizQkC9d?p=preview

Reference

  1. https://angular.io/guide/component-styles#deprecated-deep–and-ng-deep
  2. https://angular.io/guide/component-styles#view-encapsulation
Advertisements

Using Jquery Deferred

I am going to give a simple example which would explains the usage of Jquery deferred concept. The Jquery deferred plays a vital role in handling asynchronous actions. The $.Deferred is used internally by many Jquery API such as ajax and animations.

The $.Deferred usage flow will be as follows.

  1. Instantiate deferred object using $.Deferrred() when some action starts.
  2. When the action completed, resolve the deferred object using resolveWith/rejectWith and your parameter.
  3. Return the promise object from the function for chaining ability

Now I am going to explain using $.Deferred object with the simple animation operation.

For that we have a HTML element as follows.

 
<input type="button" value="Animate" />
<div id="target" style="border: solid 1px black; width: 500px; height: 70px;"></div>

And the function which will perform the animation is as follows. The below function will animate the width of the div element from 500px to 10px. I had not written the animate function in a generic way as I am going to concentrate on using deferred promise.

 
    function animate() {

            //Initialize Deferred object.
            var deffered = $.Deferred();   Step 1

            width = +$("#target").outerWidth();

            var inter = setInterval(function () {
                
                $("#target").width(width-- + "px");

                //Stops animation when width reaches 10.
                if (width == 10) {

                    clearInterval(inter);

                    //RESOLVE THE DEFERRED WITH arguments.
          Step 2 deffered.resolveWith($("#Grid"), [{ width: width }]);
                }

            }, 10);
            
            //Returns promise object to chain operation.
         Step 3   return deffered.promise();
        }

Now the animation function can be invoked as follows. And when the animation completed, the promise object will get resolved and call the corresponding callback registered using done. If fails, the callback registered with fail will be invoked.

 
       //Input element click handler.
        function change() {            

            animate().done(function (e) {
                console.log(e.width); //Returns 10
            });

        }

And I said in the Step 3 to return the promise object. But we should be careful in using this since it sometimes led to anti-pattern.