Interview Questions 1

What is a directive in Angular?

A directive in Angular is used to extend the syntax and capabilities of a normal HTML view. Angular directives have special meaning and are understood by the Angular compiler. When Angular begins compiling the TypeScript, CSS, and HTML files into a single JavaScript file, it scans through the entire code and looks for a directive that has been registered. In case it finds a match, then the compiler changes the HTML view accordingly. Angular is shipped with many directives. However, we can build our directives and let Angular know what they do so that the compiler knows about them and uses them during the compilation step.

What are modules in Angular?

A module is a logical boundary of our application. It is used to encapsulate code dealing with a specific aspect of the application, such as routing, HTTP, validation, etc. The main reason why modules are used is to enhance application composability. For example, if we wish to implement validation logic using different libraries, then for the one we have already implemented, we can create a new validation module and replace the current one with the new one, and our application would work just the same. In Angular, we create a module using the NgModule decorator.

What are services in Angular?

A service in Angular is a term that covers broad categories of functionalities. A service is any value, function, or feature that an app needs. A service is typically used to accomplish a very narrow purpose such as HTTP communication, sending data to a cloud service, decoding some text, validating data, etc. A service does one thing and does it well. It is different from a component as it is not concerned with HTML or any other kind of presentation logic. Normally, a component uses multiple services to accomplish multiple tasks.

What is string interpolation in Angular?

Also referred to as moustache syntax, string interpolation in Angular refers to a special type of syntax that makes use of template expressions in order to display the component data. These template expressions are enclosed within double curly braces i.e. {{ }}. The JavaScript expressions that are to be executed by Angular are added within the curly braces and the corresponding output is embedded into the HTML code. Typically, these expressions are updated and registered like watches as a part of the digest cycle.

Could you explain the difference between Angular expressions and JavaScript expressions?

Although both Angular expressions and JavaScript expressions can contain literals, operators, and variables, there are some notable dissimilarities between the two. Important differences between Angular expressions and JavaScript expressions are enlisted below: Angular expressions support filters while JavaScript expressions do not It is possible to write Angular expressions inside the HTML tags. JavaScript expressions, contrarily, can't be written inside the HTML tags While JavaScript expressions support conditionals, exceptions, and loops, Angular expressions don't

How are observables different from promises?

Although both promises and observables are used to handle asynchronous requests in JavaScript, they work in very different ways. Promises can only handle a single event at a time, while observables can handle a sequence of asynchronous events over a period of time. Observables also provide us with a wide variety of operators that allow us to transform data flowing through these observables with ease. A promise is just a way to wrap asynchronous operations so that they can be easily used, while an observable is a way to turn asynchronous operations into a stream of data that flows from a publisher to a subscriber through a well-defined path with multiple operations transforming the data along the way.

What are observables in Angular?

An observable is a declarative way using which we can perform asynchronous tasks. Observables can be thought of as streams of data flowing from a publisher to a subscriber. They are similar to promises as they both deal with handling asynchronous requests. However, observables are considered to be a better alternative to promises as the former comes with a lot of operators that allow developers to better deal with asynchronous requests, especially if there is more than one request at a time. Observables are preferred by many developers as they allow them to perform multiple operations such as combining two observables, mapping an observable into another observable, and even piping multiple operations through an observable to manipulate its data.

What is Angular Universal?

Angular Universal is a package for enabling server-side rendering in Angular applications. We can easily make our application ready for server-side rendering using the Angular CLI. To do this, we need to type the following command: ng add @nguniversal/express-engine This allows our Angular application to work well with an ExpressJS web server that compiles HTML pages with Angular Universal based on client requests. This also creates the server-side app module, app.server.module.ts, in our application directory.

What are Lifecycle hooks in Angular? Explain some life cycles hooks

Angular components enter its lifecycle from the time it is created to the time it is destroyed. Angular hooks provide ways to tap into these phases and trigger changes at specific phases in a lifecycle. ngOnChanges( ): This method is called whenever one or more input properties of the component changes. The hook receives a SimpleChanges object containing the previous and current values of the property. ngOnInit( ): This hook gets called once, after the ngOnChanges hook. It initializes the component and sets the input properties of the component. ngDoCheck( ): It gets called after ngOnChanges and ngOnInit and is used to detect and act on changes that cannot be detected by Angular. We can implement our change detection algorithm in this hook. ngAfterContentInit( ): It gets called after the first ngDoCheck hook. This hook responds after the content gets projected inside the component. ngAfterContentChecked( ): It gets called after ngAfterContentInit and every subsequent ngDoCheck. It responds after the projected content is checked. ngAfterViewInit( ): It responds after a component's view, or a child component's view is initialized. ngAfterViewChecked( ): It gets called after ngAfterViewInit, and it responds after the component's view, or the child component's view is checked. ngOnDestroy( ): It gets called just before Angular destroys the component. This hook can be used to clean up the code and detach event handlers.

What are the differences between Angular expressions and JavaScript expressions?

Angular expressions and JavaScript expressions are quite different from each other as, in Angular, we are allowed to write JavaScript in HTML, which we cannot do in plain JavaScript. Also, all expressions in Angular are scoped locally. But, in JavaScript, these expressions are scoped against the global window object. These differences, however, are reconciled when the Angular compiler takes the Angular code we have written and converts it into plain JavaScript, which can then be understood and used by a web browser.

What is the difference between interpolated content and the content assigned to the innerHTML property of a DOM element?

Angular interpolation happens when in our template we type some JavaScript expression inside double curly braces '{{ someExpression() }}'. This is used to add dynamic content to a web page. However, we can do the same by assigning some dynamic content to the innerHTML property of a DOM element. The difference between the two is that, in Angular, the compiler always escapes the interpolated content, i.e., HTML is not interpreted, and the browser displays the code as it is with brackets and symbols, rather than displaying the output of the interpreted HTML. However, in innerHTML, if the content is HTML, then it is interpreted as the HTML code.

What is Angular?

Angular is a TypeScript-based open-source web application framework, developed and maintained by Google. It offers an easy and powerful way of building front end web-based applications. Angular integrates a range of features like declarative templates, dependency injection, end-to-end tooling, etc. that facilitates web application development.

Can you explain the concept of scope hierarchy in Angular?

Angular organizes the $scope objects into a hierarchy that is typically used by views. This is known as the scope hierarchy in Angular. It has a root scope that can further contain one or several scopes called child scopes. In a scope hierarchy, each view has its own $scope. Hence, the variables set by a view's view controller will remain hidden to other view controllers. Following is a typical representation of a Scope Hierarchy: Root $scope$scope for Controller 1$scope for Controller 2......$scope for Controller n

What are the differences between AngularJS and Angular?

AngularJS is the previous version of Angular, which is a complete rewrite, i.e., there are several differences between the two that we can highlight. Architecture: AngularJS supports the MVC architecture in which the model contains the business logic; the view shows the information fetched from the models, and the controller manages interactions between the view and the model by fetching data from the model and passing it to the view. On the other hand, in Angular, we have a component-based architecture where instead of having separate pieces for logic, presentation, etc., we now have a single self-contained piece of the user interface that can be used in isolation or included in a big project. Language: In AngularJS, we could only use JavaScript. However, in Angular, we can use both TypeScript and JavaScript. Mobile support: In AngularJS, we do not get mobile browser support out of the box, but in Angular, we do get mobile support for all popular mobile browsers.

How do Observables differ from Promises?

As soon as a promise is made, the execution takes place. However, this is not the case with observables because they are lazy. This means that nothing happens until a subscription is made. While promises handle a single event, observable is a stream that allows passing of more than one event. A callback is made for each event in an observable.

What are components?

Components are the basic building block of the user interface in Angular. A component consists of HTML, CSS, and JavaScript for a specific portion of a user interface. We can think of these as a custom HTML element that only Angular can understand. These components are isolated, i.e., styles and code from one component do not affect other components as they get namespaced by the compiler. These components are then pieced together by the Angular framework to build the user interface for the browser to render.

Explain Dependency Injection?

Dependency injection is an application design pattern that is implemented by Angular and forms the core concepts of Angular. Let us understand in a detailed manner. Dependencies in Angular are services which have a functionality. Various components and directives in an application can need these functionalities of the service. Angular provides a smooth mechanism by which these dependencies are injected into components and directives.

What are directives in Angular?

Directives are one of the core features of Angular. They allow an Angular developer to write new, application-specific HTML syntax. In actual, directives are functions that are executed by the Angular compiler when the same finds them in the DOM. Directives are of three types: Attribute Directives Component Directives Structural Directives

What is AOT (Ahead-Of-Time) Compilation?

Each Angular app gets compiled internally. The Angular compiler takes in the JS code, compiles it and then produces some JS code. This happens only once per occasion per user. It is known as AOT (Ahead-Of-Time) compilation.

Discuss the advantages and disadvantages of using Angular?

Following are the various advantages of using Angular: Ability to add a custom directive Exceptional community support Facilitates client and server communication Features strong features, such as Animation and Event Handlers Follows the MVC pattern architecture Offers support for static template and Angular template Support for two-way data-binding Supports dependency injection, RESTful services, and validations Disadvantages of using Angular are enumerated as follows: Complex SPAs can be inconvenient and laggy to use due to their size Dynamic applications do not always perform well Learning Angular requires a decent effort and time

Explain what is the difference between Angular and backbone.js?

Following are the various notable differences between Angular and Backbone.js Architecture Backbone.js makes use of the MVP architecture and doesn't offer any data binding process. Angular, on the contrary, works on the MVC architecture and makes use of two-way data binding for driving application activity. Community Support Being backed by Google greatly ups the community support received by the Angular framework. Also, extensive documentation is available. Although Backbone.js has a good level of community support, it only documents on Underscore.js templates, not much else. Data Binding Angular uses two-way data binding process and thus is a bit complex. Backbone.js, on the contrary, doesn't have any data binding process and thus, has a simplistic API. DOM The prime focus of Angular JS is upon valid HTML and dynamic elements that imitate the underlying data for rebuilding the DOM as per the specified rules and then works on the updated data records. Backbone.js follows the direct DOM manipulation approach for representing data and application architecture changes. Performance Thanks to its two-way data binding functionality, Angular offers an impactful performance for both small and large projects. Backbone.js has a significant upper hand in performance over Angular in small data sets or small webpages. However, it is not recommended for larger webpages or large data sets due to the absence of any data binding process. Templating Angular supports templating via dynamic HTML attributes. These are added to the document to develop an easy to understand application at a functional level. Unlike Angular, Backbone.js uses Underscore.js templates that aren't fully-featured as Angular templates. The Approach to Testing The approach to testing varies greatly between Angular and Backbone.js due to the fact that while the former is preferred for building large applications the latter is ideal for developing smaller webpages or applications. For Angular, unit testing is preferred and the testing process is smoother through the framework. In the case of Backbone.js, the absence of a data binding process allows for a swift testing experience for a single page and small applications. Type Angular is an open-source JS-based front-end web application framework that extends HTML with new attributes. On the other hand, Backbone.js is a lightweight JavaScript library featuring a RESTful JSON interface and MVP framework.

What is new in Angular 6?

Here are some of the new aspects introduced in Angular 6: Angular Elements - It allows converting Angular components into web components and embeds the same in some non-Angular application Tree Shakeable Provider - Angular 6 introduces a new way of registering a provider directly inside the @Injectable() decorator. It is achieved by using the providedIn attribute RxJS 6 - Angular 6 makes use of RxJS 6 internally i18n (internationalization) - Without having to build the application once per locale, any Angular application can have "runtime i18n"

What is HttpClient, and what are its benefits?

HttpClient is an Angular module used for communicating with a backend service via the HTTP protocol. Usually, in frontend applications, for sending requests, we use the fetch API. However, the fetch API uses promises. Promises are useful, but they do not offer the rich functionalities that observables offer. This is why we use HttpClient in Angular as it returns the data as an observable, which we can subscribe to, unsubscribe to, and perform several operations on using operators. Observables can be converted to promises, and an observable can be created from a promise as well.

What are HttpInterceptors in Angular?

HttpInterceptors are part of the @angular/common/http module and are used to inspect and transform HTTP requests and HTTP responses as well. These interceptors are created to perform checks on a request, manipulate the response, and perform cross-cutting concerns, such as logging requests, authenticating a user using a request, using gzip to compress the response, etc.

Explain the difference between an Annotation and a Decorator in Angular?

In Angular, annotations are used for creating an annotation array. They are only metadata set of the class using the Reflect Metadata library. Decorators in Angular are design patterns used for separating decoration or modification of some class without changing the original source code.

What is the purpose of the common module in Angular?

In Angular, the common module that is available in the package @angualr/common is a module that encapsulates all the commonly needed features of Angular, such as services, pipes, directives, etc. It contains some sub-modules as well such as the HttpClientModule, which is available in the @angular/common/http package. Because of the modular nature of Angular, its functionalities are stored in small self-contained modules, which can be imported and included in our projects if we need these functionalities.

What are the different types of compilers used in Angular?

In Angular, we use two different kinds of compilers: Just-in-time (JIT) compiler Ahead-of-time (AOT) compiler Both these compilers are useful but for quite different purposes. The JIT compiler is used to compile TypeScript to JavaScript as our browsers cannot understand TypeScript but only JavaScript. This compilation step is done in a development environment, i.e., when less time is needed to be spent on compilation and more in development to quickly iterate over features. The JIT compiler is used when we use ng serve or ng build command to serve the app locally or create an uncompressed build of the entire codebase. On the other hand, the AOT compiler is used to create a minified production build of the entire codebase, which can be used in production. To use the AOT compiler, we have to use the ng build command with the -prod blog: ng build -prod. This instructs the Angular CLI to create an optimized production build of the codebase. This takes a bit more time because several optimizations such as minification can take time, but for production builds, this time can be spared.

What is multicasting in Angular?

In Angular, when we are using the HttpClient module to communicate with a backend service and fetch some data, after fetching the data, we can broadcast it to multiple subscribers, all in one execution. This task of responding with data to multiple subscribers is called multicasting. It is specifically useful when we have multiple parts of our applications waiting for some data. To use multicasting, we need to use an RxJS subject. As observables are unicast, they do not allow multiple subscribers. However, subjects do allow multiple subscribers and are multicast.

What does subscribing mean in RxJS?

In RxJS, when using observables, we need to subscribe to an observable to use the data that flows through that observable. This data is generated from a publisher and is consumed by a subscriber. When we subscribe to an observable, we pass in a function for the data and another function for errors so that, in case there is some error, we can show some message or process the message in some way.

What is server-side rendering in Angular?

In a normal Angular application, the browser executes our application, and JavaScript handles all the user interactions. However, because of this, sometimes, if we have a large application with a big bundle size, our page's load speed is slowed down quite a bit as it needs to download all the files, parse JavaScript, and then execute it. To overcome this slowness, we can use server-side rendering, which allows us to send a fully rendered page from the server that the browser can display and then let the JavaScript code take over any subsequent interactions from the user.

What is Data Binding? How many ways it can be done?

In order to connect application data with the DOM (Data Object Model), data binding is used. It happens between the template (HTML) and component (TypeScript). There are 3 ways to achieve data binding: Event Binding - Enables the application to respond to user input in the target environment Property Binding - Enables interpolation of values computed from application data into the HTML Two-way Binding - Changes made in the application state gets automatically reflected in the view and vice-versa. The ngModel directive is used for achieving this type of data binding.

Could you explain the various types of filters in AngularJS.

In order to format the value of expression so that it can be displayed to the user, AngularJS has filters. It is possible to add these filters to the controllers, directives, services, or templates. AngularJS also provides support for creating custom filters. Organizing data in such a way so that it is displayed only when certain criteria are fulfilled is made possible using filters. Filters are added to the expressions using the pipe '|' character. Various types of AngularJS filters are enumerated as follows: currency - Formats a number to the currency format date - Formats a data to some specific format filter - Selects a subset of items from an array json - Formats an object to a JSON string limitTo - Limits an array or string into a specified number of characters or elements lowercase - Formats a string to lowercase number - Formats a number to a string orderBy - Orders an array by an expression

What is SPA (Single Page Application) in Angular? Contrast SPA technology with traditional web technology?

In the SPA technology, only a single page, which is index.HTML, is maintained although the URL keeps on changing. Unlike traditional web technology, SPA technology is faster and easy to develop as well. In conventional web technology, as soon as a client requests a webpage, the server sends the resource. However, when again the client requests for another page, the server responds again with sending the requested resource. The problem with this technology is that it requires a lot of time.

What is Angular Material?

It is a UI component library. Angular Material helps in creating attractive, consistent, and fully functional web pages as well as web applications. It does so while following modern web design principles, including browser portability and graceful degradation.

What is the process called by which TypeScript code is converted into JavaScript code?

It is called Transpiling. Even though TypeScript is used for writing code in Angular applications, it gets internally transpiled into equivalent JavaScript.

Describe the MVVM architecture.

MVVM architecture removes tight coupling between each component. The MVVM architecture comprises of three parts: Model View ViewModel The architecture allows the children to have reference through observables and not directly to their parents. Model: It represents the data and the business logic of an application, or we may say it contains the structure of an entity. It consists of the business logic - local and remote data source, model classes, repository. View: View is a visual layer of the application, and so consists of the UI Code(in Angular- HTML template of a component.). It sends the user action to the ViewModel but does not get the response back directly. It has to subscribe to the observables which ViewModel exposes to it to get the response. ViewModel: It is an abstract layer of the application and acts as a bridge between the View and Model(business logic). It does not have any clue which View has to use it as it does not have a direct reference to the View. View and ViewModel are connected with data-binding so, any change in the View the ViewModel takes note and changes the data inside the Model. It interacts with the Model and exposes the observable that can be observed by the View.

State some advantages of Angular over other frameworks.

Out of box Features: Several built-in features like routing, state management, rxjs library, and HTTP services are straight out of the box services provided by Angular. So, one does not need to look for the above-stated features separately. Declarative UI: Angular uses HTML to render the UI of an application as it is a declarative language and is much easier to use than JavaScript. Long-term Google Support: Google plans to stick with Angular and further scale up its ecosystem as it has offered its long term support to Angular.

What is Angular Router?

Routing in a single-page frontend application is the task of responding to the changes in the URL made by adding and removing content from the application. This is a complicated task as we first need to intercept a request that changes the browser's URL as we do not wish for the browser to reload. Then, we need to determine which content to remove and which content to add, and finally, we have to change the browser's URL as well to show the user the current page they are on. As we can see, this can be very difficult to implement, especially in multiple applications. That is why Angular comes with a full routing solution for a single-page application. In this, we can define routes with matching components and let Angular handle the routing process.

What is RxJS?

RxJS is a library, and the term stands for Reactive Extensions for JavaScript. It is used so that we can use observables in our JavaScript project, which enables us to perform reactive programming. RxJS is used in many popular frameworks such as Angular because it allows us to compose our asynchronous operations or callback-based code into a series of operations performed on a stream of data that emits values from a publisher to a subscriber. Other languages such as Java, Python, etc. also have libraries that allow them to write reactive code using observables.

Could you explain services in Angular?

Singleton objects in Angular that get instantiated only once during the lifetime of an application are called services. An Angular service contains methods that maintain the data throughout the life of an application. The primary intent of an Angular service is to organize as well as share business logic, models, or data and functions with various components of an Angular application. The functions offered by an Angular service can be invoked from any Angular component, such as a controller or directive.

Please explain the digest cycle in Angular?

The process of monitoring the watchlist in order to track changes in the value of the watch variable is termed the digest cycle in Angular. The previous and present versions of the scope model values are compared in each digest cycle. Although the digest cycle process gets triggered implicitly, it is possible to start it manually by using the $apply() function.

Please explain the differences between Angular and jQuery?

The single biggest difference between Angular and jQuery is that while the former is a JS frontend framework, the latter is a JS library. Despite this, there are some similarities between the two, such as both features DOM manipulation and provides support for animation. Nonetheless, notable differences between Angular and jQuery are: Angular has two-way data binding, jQuery does not Angular provides support for RESTful API while jQuery doesn't jQuery doesn't offer deep linking routing though Angular supports it There is no form validation in jQuery whereas it is present in Angular

Explain Angular Authentication and Authorization.

The user login credentials are passed to an authenticate API, which is present on the server. Post server-side validation of the credentials, a JWT (JSON Web Token) is returned. The JWT has information or attributes regarding the current user. The user is then identified with the given JWT. This is called authentication. Post logging-in successfully, different users have a different level of access. While some may access everything, access for others might be restricted to only some resources. The level of access is authorization.

What are the building blocks of Angular?

There are essentially 9 building blocks of an Angular application. These are: Components - A component controls one or more views. Each view is some specific section of the screen. Every Angular application has at least one component, known as the root component. It is bootstrapped inside the main module, known as the root module. A component contains application logic defined inside a class. This class is responsible for interacting with the view via an API of properties and methods. Data Binding - The mechanism by which parts of a template coordinates with parts of a component is known as data binding. In order to let Angular know how to connect both sides (template and its component), the binding markup is added to the template HTML. Dependency Injection (DI) - Angular makes use of DI to provide required dependencies to new components. Typically, dependencies required by a component are services. A component's constructor parameters tell Angular about the services that a component requires. So, a dependency injection offers a way to supply fully-formed dependencies required by a new instance of a class. Directives - The templates used by Angular are dynamic in nature. Directives are responsible for instructing Angular about how to transform the DOM when rendering a template. Actually, components are directives with a template. Other types of directives are attribute and structural directives. Metadata - In order to let Angular know how to process a class, metadata is attached to the class. For doing so decorators are used. Modules - Also known as NgModules, a module is an organized block of code with a specific set of capabilities. It has a specific application domain or a workflow. Like components, any Angular application has at least one module. This is known as the root module. Typically, an Angular application has several modules. Routing - An Angular router is responsible for interpreting a browser URL as an instruction to navigate to a client-generated view. The router is bound to links on a page to tell Angular to navigate the application view when a user clicks on it. Services - A very broad category, a service can be anything ranging from a value and function to a feature that is required by an Angular app. Technically, a service is a class with a well-defined purpose. Template - Each component's view is associated with its companion template. A template in Angular is a form of HTML tags that lets Angular know that how it is meant to render the component.

Please explain the various features of Angular.

There are several features of Angular that make it an ideal front end JavaScript framework. Most important of them are described as follows: Accessibility Applications Angular allows creating accessible applications using ARIA-enabled components, built-in a11y test infrastructure, and developer guides. Angular CLI Angular provides support for command-line interface tools. These tools can be used for adding components, testing, instant deploying, etc. Animation Support Angular's intuitive API allows the creation of high-performance, complex animation timelines with very little code. Cross-Platform App Development Angular can be used for building an efficient and powerful desktop, native, and progressive web apps. Angular provides support for building native mobile applications using Cordova, Ionic, or NativeScript. Angular allows creating high performance, offline, and zero-step installation progressive web apps using modern web platform capabilities. The popular JS framework can also be used for building desktop apps for Linux, macOS, and Windows. Code Generation Angular is able to convert templates into highly-optimized code for modern JavaScript virtual machines. Code Splitting With the new Component Router, Angular apps load quickly. The Component Router offers automatic code-splitting so that only the code required to render the view that is requested by a user is loaded. Synergy with Popular Code Editors and IDEs Angular offers code completion, instant errors, etc. with popular source code editors and IDEs. Templates Allows creating UI views with a simple and powerful template syntax. Testing Angular lets you carry out frequent unit tests using Karma. The Protractor allows running faster scenario tests in a stable way.

Explain different kinds of Angular directives.

There are three kinds of directives in Angular. Let's discuss them: Components: A component is simply a directive with a template. It is used to define a single piece of the user interface using TypeScript code, CSS styles, and the HTML template. When we define a component, we use the component decorated with the @ symbol and pass in an object with a selector attribute. The selector attribute gives the Angular compiler the HTML tag that the component is associated with so that, now, when it encounters this tag in HTML, it knows to replace it with the component template. Structural: Structural directives are used to change the structure of a view. For example, if we wish to show or hide some data based on some property, we can do so by using the ngIf directive, or if we wish to add a list of data in the markup, we can use *ngFor, and so on. These directives are called structural directives because they change the structure of the template. Attribute: Attribute directives change the appearance or behavior of an element, component, or another directive. They are used as the attributes of elements. Directives such as ngClass and ngStyle are attribute directives.

What is the AOT (Ahead-Of-Time) Compilation? What are its advantages?

There are two kinds of compilation that Angular provides: JIT(Just-in-Time) compilation: the application compiles inside the browser during runtime AOT(Ahead-of-Time) compilation: the application compiles during the build time. Advantages of AOT compilation: Fast Rendering: The browser loads the executable code and renders it immediately as the application is compiled before running inside the browser. Fewer Ajax Requests: The compiler sends the external HTML and CSS files along with the application, eliminating AJAX requests for those source files. Minimizing Errors: Easy to detect and handle errors during the building phase. Better Security: Before an application runs inside the browser, the AOT compiler adds HTML and templates into the JS files, so there are no extra HTML files to be read, thus providing better security for the application.

Why was Angular introduced as a client-side framework?

Traditionally, VanillaJS and jQuery were used by developers to develop dynamic websites. As the websites became more complex with added features and functionality, it was hard for the developers to maintain the code. Moreover, there was no provision of data handling facilities across the views by jQuery. So, Angular was built to address these issues, thus, making it easier for the developers by dividing code into smaller bits of information that are known as Components in Angular. Client-side frameworks permit the development of advanced web applications like SPAs which, if developed by VanillaJS, is a slower process.

What is a two-way data binding?

Two-way data binding is done in Angular to ensure that the data model is automatically synchronized in the view. For example, when a user updates some data in a model and that model is being displayed in multiple places in a component, that update should be reflected in all the places. Two-way data binding has been supported in Angular for a long time. Although, it is something that should be used with careful consideration as it could lead to poor application performance or performance degradation as time goes on. It is called two-way data binding because we can change some data that is in the component model from the view that is HTML, and that change can also propagate to all other places in the view where it is displayed.

Why prioritize TypeScript over JavaScript in Angular?

TypeScript is a superset of Javascript as it is Javascript + Types or extra features like typecasting for variables, annotations, variable scope and much more. The typescript is designed in a way to overcome Javascript shortcomings like typecasting of variables, classes, decorators, variable scope and many more. Moreover, Typescript is purely object-oriented programming that offers a "Compiler" that can convert to Javascript-equivalent code

Enumerate some salient features of Angular 7.

Unlike the previous versions of Angular, the 7th major release comes with splitting in @angular/core. This is done in order to reduce the size of the same. Typically, not each and every module is required by an Angular developer. Therefore, in Angular 7 each split of the @angular/core will have no more than 418 modules. Also, Angular 7 brings drag-and-drop and virtual scrolling into play. The latter enables loading as well as unloading elements from the DOM. For virtual scrolling, the latest version of Angular comes with the package. Furthermore, Angular 7 comes with a new and enhanced version of the ng-compiler.

Can you draw a comparison between the service() and the factory() functions?

Used for the business layer of the application, the service() function operates as a constructor function. The function is invoked at runtime using the new keyword. Although the factory() function works in pretty much the same way as the service() function does, the former is more flexible and powerful. In actual, the factory() function are design patterns that help in creating objects.

What is the difference between Angular and AngularJS.

Various differences between Angular and AngularJS are stated as follows: Architecture - AngularJS supports the MVC design model. Angular relies on components and directives instead Dependency Injection (DI) - Angular supports a hierarchical Dependency Injection with unidirectional tree-based change detection. AngularJS doesn't support DI Expression Syntax - In AngularJS, a specific ng directive is required for the image or property and an event. Angular, on the other hand, use () and [] for blinding an event and accomplishing property binding, respectively Mobile Support - AngularJS doesn't have mobile support while Angular does have Recommended Language - While JavaScript is the recommended language for AngularJS, TypeScript is the recommended language for Angular Routing - For routing, AngularJS uses $routeprovider.when() whereas Angular uses @RouteConfig{(...)} Speed - The development effort and time are reduced significantly thanks to support for two-way data binding in AngularJS. Nonetheless, Angular is faster thanks to upgraded features Structure - With a simplified structure, Angular makes the development and maintenance of large applications easier. Comparatively, AngularJS has a less manageable structure Support - No official support or updates are available for the AngularJS. On the contrary, Angular has active support with updates rolling out every now and then

What is ViewEncapsulation and how many ways are there do to do it in Angular?

ViewEncapsulation determines whether the styles defined in a particular component will affect the entire application or not. Angular supports 3 types of ViewEncapsulation: Emulated - Styles used in other HTML spread to the component Native - Styles used in other HTML doesn't spread to the component None - Styles defined in a component are visible to all components of the application

What are lifecycle hooks in Angular?

When building an Angular app, there will be times when we need to execute some code at some specific event—such as when a component is initialized or displayed on the screen or when the component is being removed from the screen. This is what lifecycle hooks are used for. For example, if we have some event listener attached to an HTML element in a component, such as a button click or form submission, we can remove that event listener before removing the component from the screen, just like we can fetch some data and display it on the screen in a component after the component is loaded on the screen. To use a lifecycle hook, we can override some methods on a component, such as ngOnInit or ngAfterViewInit. These methods, if available on a component, will be called by Angular automatically. This is why these are called lifecycle hooks.

What are pipes in Angular?

When we are trying to output some dynamic data in our templates, we may sometimes need to manipulate or transform the data before it is put into our templates. Though there are several ways of doing that, in Angular, using pipes is the most preferred way. A pipe is just a simple function, which we can use with expressions in our templates. Pipes are extremely useful as we can use them throughout our application after declaring them just once and registering them with the Angular framework. Some of the most common built-in pipes in Angular are UpperCasePipe, LowerCasePipe, CurrencyPipe, etc.

Could you explain the concept of templates in Angular?

Written with HTML, templates in Angular contains Angular-specific attributes and elements. Combined with information coming from the controller and model, templates are then further rendered to cater the user with the dynamic view.

Could we make an angular application to render on the server-side?

Yes, we can, with Angular Universal, a technology provided by Angular capable of rendering applications on the server-side. The benefits of using Angular Universal are: Better User Experience: Allows users to see the view of the application instantly. Better SEO: Universal ensures that the content is available on every search engine leading to better SEO. Loads Faster: Render pages are available to the browsers sooner, so the server-side application loads faster.

Define the ng-content Directive?

https://blog.angular-university.io/angular-ng-content/

How to generate a class in Angular 7 using CLI?

ng generate class Dummy [options]

What is ngOnInit()? How to define it?

ngOnInit() is a lifecycle hook that is called after Angular has finished initializing all data-bound properties of a directive. It is defined as: