What is Angular?

Angular is a free and open-source web application framework, developed by Google. It is based on NodeJS, and it uses Typescript as its main development language. It was introduced to create Single Page applications, it brings structure and consistency to web applications and it provides scalability and maintainability.

What are the advantages of using a framework like Angular?

There are many advantages in using Angular as a development framework, that really ease and smoothen the development process, allowing a more natural approach. For example, you can use dependency injection, it has MVC (or component-based) architecture, and it allows creating unit tests. Also, being a component-based framework, it consists of different design patterns like components, directives, pipes, and services, which help in the smooth creation of applications. The code written in Angular is highly reusable and maintainable, so it makes the framework suited for developing enterprise web applications.

What is Typescript?

TypeScript is a syntactical superset of JavaScript that offers excellent consistency, and makes the code base more comfortable to understand and maintain. TypeScript code compiles into JavaScript, so it runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.

What are the differences between AnguarJS and Angular 2+?

What are Single-Page Applications (SPA)?

Single-page applications are front-end web applications that load only once, and they change their content dynamically. An SPA does not load new HTML pages to display the new page's content, instead it is being generated dynamically. This is done by JavaScript's ability to manipulate the DOM on the page itself. A SPA loads faster, providing a seamless user experience, and can be created with the help of Javascript frameworks like Angular.

What is AOT Compilation and what are its advantages?

AOT (Ahead of time compilation) compiles the code during the application build process, instead of doing it when the browser downloads and runs the code. A couple of its advantages include: faster rendering, smaller app size, quick template errors detection, better security and fewer async requests.

What are the Components in Angular?

Components can be defined as block of the user interface and its functionality. Every component consists of a template, and a subset of directives (the code behind the template), a CSS stylesheet and a unit test. An Angular application consists of one root component (AppComponent) which then branches out into other components making a hierarchy. Components can be reused into eachother, and different kinds of values can be passed into them.

What are Pipes in Angular?

Pipes are simple functions that accept an input value and transform it based on the developer's needs. There are predefined and user-defined pipes, they can be accessed using the pipe symbol "|", and they can be chained together.

Custom pipes can be defined using the PipeTransform interface.

1import { Pipe, PipeTransform } from '@angular/core';
2
3@Pipe({
4
5name: 'demopipe'
6
7})
8
9export class DemopipePipe implements PipeTransform {
10
11transform(value: unknown, ...args: unknown[]): unknown {
12
13return null;
14
15}
16}

What is ngModule?

NgModule is a container that reserves a block of code to a specific application domain. @NgModule takes a metadata object that generally describes the way to compile the template of a component and to generate an injector at runtime. In addition, it identifies the module's components, directives, and pipes, making some of them public, through the export property so that external components can use them.

What is string interpolation?

String interpolation is a type of syntax that makes use of template expressions to display component data. These expressions are enclosed with double curly brackets {{}}.

1<h3>Current customer: {{ currentCustomer }}</h3>

Explain the lifecycle hooks in Angular

In Angular, every component has a lifecycle. Angular creates and renders these components and also destroys them before removing them from the DOM. This is achieved with the help of lifecycle hooks. Here's the list of them -

1. ngOnChanges() - Triggers when Angular sets/resets data-bound input properties.
2. ngOnInit() - Initialize the directive/component after Angular first displays it
3. ngDoCheck() - Detect and act upon changes that Angular can't or won't detect on its own.
4. ngAfterContentInit() - Triggers after Angular projects external content into the component's view
5. ngAfterContentChecked() - Triggers after Angular checks the content projected into the component.
6. ngAfterViewInit() - Triggers after Angular initializes the component's views
7. ngAfterViewChecked() - Triggers after Angular checks the component's views
8. ngOnDestroy - Cleanup just before Angular destroys the directive/component.

What are services in Angular?

Angular services are classes with defined methods, that can be reused by multiple components. These functions can include everything, including data and image fetching, network connections, and database management among others. A service can be written once and injected into multiple components, by using dependency injection, into the components' constructor.

What are observables in Angular?

Observables are used to deal with asynchronous events in Angular. They are executed when using the subscribe() method, emit multiple values over a period of time, and they help perform operations like forEach, filter, and retry, among others. They also can deliver errors to the subscribers. When the unsubscribe() method is called, the listener stops receiving further values.

How to use ngFor?

The ngFor directive is used to iterate over an array or an object and create a template for each element. It acts the same as any for statement in any other programming language, but it is used in an HTML template, and it can serve to build lists dynamically.

1<ul>
2
3<li *ngFor = "let items in itemlist"> {{ item }} </li>
4
5</ul>

1. “Let item” creates a local variable that will be available in the template
2. “Of items” indicates that we are iterating over the items iterable.
3. The * before ngFor creates a parent template.

One Pager Cheat Sheet

• Angular is a free and open-source web application framework developed by Google, based on NodeJS, which uses Typescript as main development language to create Single Page applications and offers scalability, maintainability and many other advantages, such as a dependency injection, an MVC (or component-based) architecture and a highly reusable code.
• Unit tests can be easily created in Angular using the Jasmine framework, which provides an expect-assertion approach written in JavaScript.
• Single-page applications load only once and are created with Javascript frameworks like Angular, leveraging its Ahead of Time compilation for faster rendering, smaller app size, quick template errors detection, better security and fewer async requests, and it consists of hierarchical components that can be reused and passed different kind of values.
• The code is compiled during the build process and the result of the compilation is included in the application bundle, resulting in faster page load times with AOT compilation.
• Pipes are user-defined functions which are accessed using the pipe symbol "|" that can be chained together to transform an input value in Angular.
• False, Pipes in Angular can either be System-defined, provided by the Angular library, or User-defined, custom-made functions that utilize the PipeTransform interface.
• In Angular, lifecycle hooks are used to create, render, and destroy components, while services provide functions that can be used across components, and observables provide a way to execute asynchronous events and deliver values over a period of time. Furthermore, ngFor is a directive used to iterate over an array or an object to create a template for each element.
• Yes, ngOnChanges() will be triggered when data-bound input properties of a component are changed, such as through property binding or user input.