What are the different types of binding available in Angular ?

Property Binding - binding is set in one direction from component's property to template. Property binding example.

<img [src]="ImageUrl">

Event Binding - It's used to bind any event. Event binding example.

<button (click)="onUpdate($event)">Save</button>

Two way binding - It's used for two-way binding. Two-way data binding example.

<input [(ngModel)]="name">

Attribute binding - It's used to set the value of attribute directly. Attribute binding example.

<button [attr.aria-label]="help">help</button>

Class binding - It's used to add or remove class names from class attribute. Class binding example.

 <span [class.specialClass]="isSpecialClass">Special class</span>

Style binding - It's used to add or remove the style from style attribute. Style binding example.

<button [style.color]="isSpecialClass ? 'blue' : 'black'">Click Me</button>

What is Angular DSL?

A domain-specific language (DSL) is a computer language specialized to a particular application domain. Angular has its own Domain Specific Language (DSL) which allows us to write Angular specific html-like syntax on top of normal html. It has its own compiler that compiles this syntax to html that the browser can understand. This DSL is defined in NgModules such as animations, forms, and routing and navigation.

Basically you will see 3 main syntax in Angular DSL.

(): Used for Output and DOM events.

[]: Used for Input and specific DOM element attributes.

*: Structural directives(*ngFor or *ngIf) will affect/change the DOM structure.

 

 

Apply vs. Call vs. Bind javascript example

Apply vs Call vs Bind Examples

Call

var person1 = {firstName: 'pranay', lastName: 'soni'};

var person2 = {firstName: 'test_f', lastName: 'test_l'};

function say(greeting) {

console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);

}

say.call(person1, 'Hello'); // Hello pranay soni

say.call(person2, 'Hello'); // Hello test_f test_l

Apply

var person1 = {firstName: 'pranay', lastName: 'soni'};

var person2 = {firstName: 'test_f', lastName: 'test_l'};

function say(greeting) {

console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);

}

say.apply(person1, ['Hello']); // Hello pranay soni

say.apply(person2, ['Hello']); // Hello test_f test_l

Bind

var person1 = {firstName: 'pranay', lastName: 'soni'};

var person2 = {firstName: 'test_f', lastName: 'test_l'};

function say() {

console.log('Hello ' + this.firstName + ' ' + this.lastName);

}

var sayHelloPranay = say.bind(person1);

var sayHelloTest = say.bind(person2);

sayHelloPranay(); // Hello pranay soni

sayHelloTest(); // Hello test_f test_l

When To Use Each

Call and apply are pretty interchangeable.

Just decide whether it’s easier to send in an array or a

comma separated list of arguments.

I always remember which one is which by remembering that Call is for

comma (separated list) and Apply is for Array.

Bind is a bit different. It returns a new function.

Call and Apply execute the current function immediately.

for await of vs promise.all in javascript

let i = 1;

function somethingAsync(time) {

console.log("fired");

return delay(time).then(() => Promise.resolve(i++));

}

const items = [1000, 2000, 3000, 4000];

function delay(time) {

return new Promise((resolve) => {

setTimeout(resolve, time);

});

}

(async () => {

console.time("first way");

const promises = await Promise.all(items.map((e) => somethingAsync(e)));

for (const res of promises) {

console.log(res);

}

console.timeEnd("first way");

i = 1; //reset counter

console.time("second way");

for await (const res of items.map((e) => somethingAsync(e))) {

// do some calculations

console.log(res);

}

console.timeEnd("second way");

})();