Angular v2+

What is Angular?

Angular JS is a JavaScript based web application framework which is based on MVW (Model View Whatever) based design pattern. Angular JS framework was developed by Google. It was initially released in the year 2010. It was licensed under MIT License. It was completely written in JavaScript.

What are the the building blocks of Angular?

The Angular application is made using the following:
  • Modules
  • Component
  • Template
  • Directives
  • Data Binding
  • Services
  • Dependency Injection
  • Routing

What is Transpiling in Angular?

Transpiling is the process of converting the typescript into Javascript (using Traceur, a JS compiler). Though Typescript is used to write code in the Angular applications, the code is internally transpiled into javascript.

Which of the Angular life cycle component execution happens when a data-bound input value updates?

ngOnChanges is the life cycle hook that gets executed whenever a change happens to the data that was bound to an input.

Differentiate between Components and Directives in Angular.

Components break up the application into smaller parts; whereas, Directives add behavior to an existing DOM element.

What is the use of @Input and @Output?

When it comes to the communication of Angular Components, which are in Parent-Child Relationship; we use @Input in Child Component when we are passing data from Parent to Child Component and @Output is used in Child Component to receive an event from Child to Parent Component.

What does a router.navigate do?

When we want to route to a component we use router.navigate. Syntax: this.router.navigate([‘/component_name’]);

What is ViewEncapsulation?

ViewEncapsulation decides whether the styles defined in a component can affect the entire application or not. There are three ways to do this in Angular:
  • Emulated: styles from other HTML spread to the component.
  • Native: styles from other HTML do not spread to the component
  • None: styles defined in a component are visible to all components.

What are Services in Angular and what command is used to create a service?

Services help us in not repeating the code. With the creation of services, we can use the same code from different components. Here is the command to create a service in angular, ng g service User (a UserService is created when this command is used).

What is Dependency Injection in Angular?

When a component is dependent on another component the dependency is injected/provided during runtime.

What is Routing in Angular?

Routing helps a user in navigating to different pages using links.

How to handle Events in Angular?

Any activity (button click, mouse click, mouse hover, mouse move, etc) of a user on a frontend/web screen is termed as an event. Such events are passed from the view (.HTML) page to a typescript component (.ts).

What is a RouterOutlet?

RouterOutlet is a substitution for templates rendering the components. In other words, it represents or renders the components on a template at a particular location.

Explain the usage of {{}}?

The set of brackets {{}} when used with an HTML tag, represent data from a component. For example, on a HTML page which has <h1>{{ variableName }}</h1>, here the ‘variableName’ is actually typescript (component) data representing its value on the template; i.e., HTML. This entire concept is called String Interpolation.

In how many ways the Data Binding can be done?

Data Binding happens between the HTML (template) and typescript (component). Data binding can be done in 3 ways:
  • Property Binding
  • Event Binding
  • Two-Way Data Binding

When to use NgOnInit and constructor in Angular?

Constructors are used for initializing class members and also for dependency injection. Ngonlnit is used for the initialization work. Both of these methods are called when the component is created. A constructor method is a pre-defined method in the constructor class which is only called when the class is instantiated. It is also used for properly initializing the fields. The constructor in Angular 2 is used to create a new instance of the class. Ngonlnit is the class we import when we implement the constructor in order to use it in a class. The method used in this case is ngOnlnit(). This method helps in initializing the directive or the component after the data-bound properties are displayed and the directive or components input is set.

What is the difference between observable and promises?

  • Observable is a more powerful way of handling HTTP asynchronous requests. Whereas, A promise handles a single event when an asynchronous operation completes or fails.
  • An observable is like a stream which allows passing zero or more events where the callback is called for each event. Whereas, A promise eventually calls the success or failed callback even when you don’t need the notification or the result it provides anymore.
  • Observable works with multiple values for a particular time. Whereas, Promises works with and even returns a single value at a time.
  • Observables can be canceled. Whereas, Promises cannot be canceled.
  • Observable supports map, filter, reduce and similar operators. Whereas, Promises have more readable codes with try/catch and async/await.
  • In observable, one operator ‘retry’ can be used to retry whenever needed. Whereas, Promises cannot be retried. A promise should have access to the original function that returned the promise in order to have a retry capability.

What is ECMAScript?

ECMAScript is a standard for scripting languages. It is a subset of Javascript.

What is Traceur Compiler?

Traceur is a compiler which takes ECMAScript and compiles it down to regular Javascript that runs in your browser. Traceur can be used in several ways like- typing or pasting the ES6 code into the read-eval-print-loop page, or by including traceur in the web page and compiling ES6 code content on the fly, or many other ways.

What are pipes?

A pipe takes in data as input and transforms it to a desired output. You can chain pipes together in potentially useful combinations. You can write your own custom pipes. Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe.