The sole purpose of <!DOCTYPE html> is to ensure that When Browser is going to render the HTML document it must use Full Standard Mode and it prevents the browser from switching to “Quirks Mode” or “Standard Mode”.

Make sure you put the DOCTYPE at the top of the HTML Document otherwise can use “Quirks Mode” or “Standard Mode”.

Observables are lazy push collections of multiple values over time (Synchronously or Asynchronously) and can emit 0 to infinite values. They push values to observers and by default, observables are unicast meaning every observer has its own data producer and this is also known as Cold Observables.

Cold Observable will do nothing by itself. Observers will have to subscribe to start its execution. That’s why every observer will have a separate execution. By lazy it means it won't start emitting values until someone subscribes to that values.

We have two different protocols for how Data producers and Data consumers can…

Here we will see many things we can do with images for better performance and some hacks which can bring us better results:

So a common fix for this issue is to create a parent container element like div and give the height/width which we need and use (max-width:100%) on the image tag so that it ends up covering that whole div…

Dependency between HTML,CSS,JS,Images for Initial Render


First, we will consider only 2 files HTML and CSS and we know that both are Render Blocking. We need Html (DOM Tree) to show content so we need that but what about CSS? we can have different types of CSS some are only used when printing and some for different types of screens. So for the initial render, we don't need them and they should not be render-blocking. …

We know that we use property binding and event binding on Html Elements like listening to button clicks or input changes, and disabling the button using property binding.

Basically, when we are doing property binding we are passing the data into that HTML element, so if we want to pass some data into a custom component then how can we do that? This is where the input decorator kicks in.

By default, all properties of components are accessible from inside of the component only. If we want to get some data from the parent component we can use @Input.

Let’s see what these things are and how we can make use of them while developing an Angular application.

ng-template is a template element that Angular uses with structural directives (*ngIf, *ngFor, [ngSwitch], and custom directives). To know about directives you can read this :

These template elements only work with the structural directives. Angular wraps the host element (to which the directive is applied) inside <ng-template> and then consumes the <ng-template> in the finished DOM by replacing it with diagnostic comments. Let’s take an example for a better understanding.

Code Written
Converted Code by Angular
Finished DOM

We can…

The directive modifies the DOM to change the appearance, behavior, or layout of DOM elements.

Basically, Directives are instructions in DOM, and angular uses them heavily.

Components are also directives but they have their own template.

Types of directives:

Let’s first take a look at Attribute directives and types of it.

Attribute directives can change the behavior of the component or element but they do not affect the template. Types of Attribute directives:

ngStyle allows us to dynamically apply styles to components or elements. lets take a look at the code snippet.


Today we will look at Data binding in Angular and various types of it :

We will also see the difference between Property Binding and String Interpolation and Property Binding and which one to use when, so let’s get started.

We know that for every component we have a template file (component.html) and typescript file (component.ts). In the template file, we write our Html code and in typescript, we write our logic. Data Binding acts like a communication mechanism between template and typescript. …

Before jumping into details of Angular and how it starts the application, let’s talk a bit about what is Angular?

Angular is a Javascript framework that allows you to develop a Single Page Application. Angular uses Components to split the complex code into multiple components and this allows us to create reusable components.

So now how the Angular application starts and how it renders different components into the view.

First of all, we index.html file which is served in the browser.


If we see this index.html file we will see one unique tag <app-root>, this is not an html…

We know that in any programming language we have functions, modules, packages and so many other things which help us to write complex code in an easy and readable way. Same way Execution Context allows the JS Engine to manage the complexity of interpreting and running your code.

Execution Context has 2 phases:

The first Execution Context gets created when JS runs your code and is called Global Execution Context.

Global Execution Context Creation Phase.

In the creation phase of global EC:

Sanjay Garg

Frontend engineer who loves the Web, JavaScript and Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store