Skip navigation

Today, we are going to expose some inner working of angular 2.

You know what, the double curly braces aka interpolation always  seems awesome magic.

<h1>{{ text }} </h1>

Really, this is sugar syntax for:

<h1 [innerText]=”text”></h1>

Yeah… angular 2 property binding using DOM attribute directly. So, is it possible to add class to a div tag?? Well

<h1 [className]=”active”></h1>

This is equivalent to

h1 = document.querySelector(‘h1’);
h1 = ‘active’;  // className is property of DOM element div

Interesting, isn’t it?


I believe, at this point of time, frontend eco system kind of settled down or at least I would say, able to see the end of tunnel. I was waiting for the adolescence pain of growing to be significantly reduced.

Now it is time to jump back, learn what is relevant, share it with the world. Off late, I have been learning angular 5, observable, rxjs, etc.

The immediate feeling i got was, the world cannot look down frontend engineers no more. Web technology grown well enough.

Come back to read short blog post as usual.

Pass by value and pass by reference is age old concept. It is working similar way in JavaScript too. If you like to see some code so that you can understand better. Keep reading.

Brief theory before jump into code. JavaScript primitive types (string, number, boolean, null and undefined) are passed by value. Whereas non-primitive types (objects, arrays, functions, etc.) are passed by reference.

// Primitive types: Immutable by default
let x = 5
let y = x
y = 10
console.log(x) // output 5
console.log(y) // output 10

// Non-primitive types: Mutable
let animal = {
    name: 'Rat'
let anotherAnimal = animal = 'Horse'
console.log(animal) // {name: "Horse"}
console.log(anotherAnimal) // {name: "Horse"}
console.log(animal === anotherAnimal) // true

This knowledge might be useful while learning react.js, redux architecture.