Sharing Top Content from the Angular-sphere.

Angular — The ngStyle directive under the hood – NetanelBasal

  • If there any changes the return value will be an object that exposes three methods that we can use to react to these changes.
  • If there aren’t any changes, the return value will be null.
  • The KeyValueDiffers service is a differ that tracks changes made to an object over time and also expose an API to react to these changes.
  • Now every time we have a change we are calling the _setStyle() method that calls the setElementStyle() from our Renderer service to set the new element style.
  • The methods are self-explanatory, we can pass a callback to every change that we need to know.

The KeyValueDiffers service is a differ that tracks changes made to an object over time and also expose an API to react to these changes. ( we are going to see later how we can use this service ) We…

@JavaScriptKicks: Angular – The ngStyle directive under the hood by @NetanelBasal #javascript #angularjs via @JavaScriptKicks

directive from scratch.

Before we can start, we need to be familiar with two things:

service is a differ that tracks changes made to an object over time and also expose an API to react to these changes. ( we are going to see later how we can use this service )

reference changes ( using some immutability strategy ).

lifecycle hook to construct your change detection logic manually.

Ok, enough we the talks let’s start coding.

Input as a setter. If we don’t have a differ we are creating a new differ by calling:

method just searching for a differ to our value, and if Angular does not find a proper differ for our value Angular will throw an error.

If you are curious, this is how Angular checks if she has a proper differ for our value:

. For example:

this.style = {color: ‘red’};

method with the new value. If there aren’t any changes, the return value will be null. If there any changes the return value will be an object that exposes three methods that we can use to react to these changes.

from our Renderer service to set the new element style.

service here.

. I did not write this code and do not take any credit of this; I am just explaining the concepts and how it’s working under the hood.

You can see the full source code here.

You can join my Angular LinkedIn group here.

☞ Please tap or click “︎❤” to help to promote this piece to others.

Angular — The ngStyle directive under the hood – NetanelBasal

Comments are closed, but trackbacks and pingbacks are open.