Angular 2 Interview Questions and Answers

AngularJS is a structured, JavaScript framework used for dynamic one-page applications. It is a library written in JavaScript. Being a framework, it uses code templates written in HTML in order to perform particular function or command. The data binding and dependency functionalities of Angular JS saves time invested in writing lengthy codes. All these features are packaged in a browser that makes it a suitable server technology.

Key features:

• MVC
• Two-way Data Model Binding
• Dependency Injection
• Writing less code
• Unit testing

There are many front-end JavaScript frameworks to choose from today, each with its own set of trade-offs. A truly write less and do more framework. Angular.js uses Plain Old JavaScript Objects (POJO) to share data between different layers of MVC. Many Java based applications are being converted to Angular.js based UI. HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Many people were happy with the functionality that Angular 1.x afforded them. Angular 2 improved on that functionality and made it faster, more scalable and more modern. The first release of Angular provided programmers with the tools to develop and architect large scale JavaScript applications, but its age has revealed a number of flaws and sharp edges. Organizations that found value in Angular 1.x will find more value in Angular 2.

The new versions of Angular are now simply called, Angular. Angular 2 is a TypeScript-based, web application development platform that makes the switch from MVC (model-view-controller) to a components-based approach to web development. Angular 2 also offered a much cleaner component model. Interoperation with technologies such as web components was also a focus in Angular 2.

Angular Version 2, first announced in late 2014, finally released in late 2016, marks the beginning of a new platform, not merely a browser bound framework. With Angular you can target browser, mobile (Ionic), desktop (Electron), and server-rendered (Universal) apps.

Angular 2 is high performance and it minimizes the load time of your pages. It is based on TypeScript.  Improved Mobile development and web development. It Support for a component-based architecture and all browsers support. Improved data binding and Dependency Injection

• Improved Dependency Injection (DI)
• Annotation
• Child Injectors
• Dynamic Loading
• Logging
• Language Service for templates
• Screen Activator
• Instance Scope
• Components Inheritance
• ViewContainer
• Access to Angular Version

A component has a lifecycle managed by Angular itself. Angular manages creation, rendering, data-bound properties etc. It also offers hooks that allow us to respond to key lifecycle events.

Here is the complete lifecycle hook interface inventory:

• ngOnChanges : when an input binding value changes
• ngOnInit :after the first ngOnChanges
• ngDoCheck :after every run of change detection
• ngAfterContentInit :after component content initialized
• ngAfterContentChecked : after every check of component content
• ngAfterViewInit : after component’s view(s) are initialized
• ngAfterViewChecked : after every check of a component’s view(s)
• ngOnDestroy : just before the component is destroyed

These are the core building blocks of Angular 2:

• Modules which group or encapsulate functionality within the application
• Components which represent a unified View + View Model + Styles unit that you can compose to create an application
• Templates which represent a view with a special syntax to enhance html with Angular2 functionality like data binding
• Metadata that wires everything together, a view with a view model with styles, etc
• Data binding to flow data changes between view and view model and vice versa
• Services to encapsulate and reuse non-view related logic that can be used by different parts of an application
• Directives Dependency Injection to inject the necessary dependencies for a given component/service at runtime and provide flexibility, extensibility and testability to the framework and your application

TypeScript is a superset of JavaScript but like Java it allows us to define new types. Declaring variables with types rather than the generic var opens the door to new tooling support, which we will find to be a great productivity enhancer. TypeScript comes with a static code analyzer, and as we enter code in our TypeScript-aware IDE (WebStorm/IntelliJ Idea, Visual Studio Code, Sublime Text, etc.) we’re guided by context sensitive help suggesting the available methods in the object or types of the function argument. If we accidentally use an incorrect type, the IDE will highlight the erroneous code.

TypeScript is a strict superset of ECMAScript 2015, which is itself a superset of ECMAScript 5, commonly referred to as JavaScript. As such, a JavaScript program is also a valid TypeScript program, and a TypeScript program can seamlessly consume JavaScript.

In Angular 2, a template is a HTML view that tells Angular 2, how to render your components in the views. The Angular 2 templates are very similar to Angular 1 but Angular 2 have some small syntactical changes.

You can see the changes as below:

• {}: It is use to rendering the HTML elements.
• []: It is use to binding properties.
• (): It is use to handling your events.
• [()]: It is use to data binding.
• *: It is use to asterisk Operations like *ngFor=”#item of items”

DOM (Document Object Model) in Angular 2 directives are used to bind application data to the attributes of HTML DOM elements.

Shadow DOM is a part of the HTML spec which allows developers to encapsulate their HTML markup, CSS styles and JavaScript. Shadow DOM, along with a few other technologies, gives developers the ability to build their own 1st class tags, web components and APIs just like the <audio> tag. Collectively, these new tags and APIs are referred to as Web Components. Shadow DOM provides better separation of concern along with lesser conflict of styles and scripts with other HTML DOM elements.

@NgModule is a decorator function. A decorator function allows users to mark something as Angular 2 thing (could be a module or component or something else) and it enables you to provide additional data that determines how this Angular 2 thing will be processed, instantiated and used at the runtime. So, whenever user writes @NgModule, it tells the Angular 2 module, what’s going to be included and used in and using this module.

• Create an application folder.
• Create the tsconfig file (To configure the TypeScript compiler).
• Create the package.json file (To define the libraries and scripts we need).
• Create the typings.json file (That specifies a missing TypeScript type definition file).
• Install the libraries and typing files.
• Create the host Web page. (Normally index.html).
• Create the main.ts file (To bootstrap the Angular application with the root component).

services are reusable function which include their properties used to perform some common functionality which can be used by different components instead of writing the same code again and again for different components a data service can be used by multiple components (via dependency injection).

Angular 2 doesn’t have bi-directional digest cycle, unlike angular 1. In angular 2, any change occurred in the component always gets propagated from the current component to all its children in hierarchy. If the change from one component needs to be reflected to any of its parent component in hierarchy, we can emit the event by using Event Emitter API.

In short, EventEmitter is class defined in @angular/core module which can be used by components and directives to emit custom events.

@output () something Changed = new EventEmitter ();

We use somethingChanged.emit (value) method to emit the event. This is usually done in setter when the value is being changed in the class.

This event emit can be subscribed by any component of the module by using subscribe method.

myObj.somethingChanged.subscribe(val) => this.myLocalMethod(val));

Angular is based on Components, as Components are the logical piece of code, which consists of Classes, Template and Metadata. tro say more simplistically Components are used to bind model and template while also providing the logical part.

In Angular 2, AOT (Ahead of Time) compilation, in which the angular compiler compiles the angular components and templates to native JavaScript and HTML during the build time. The compiled Html and JavaScript is deployed to the web server so that the compilation and render time can be saved by the browser.

In Angular 2, Change detection basically is the process of detecting the changes in the internal state of our application which might be caused due to Events, XHR and Timers and make it visible in the user interface. Change detection work on the principle of zone.js in Angular.

In Angular 2, Bootstrap array is used to inform Angular JS which components need to be loaded, so that its functionality can be accessed in the application.

In Angular 2, Routing is used to separate different parts of our app, generally by using the URL to denote our location.

Too many two-way binding attributes can cause performance concerns in application. Each data binding pushes an event in JavaScript event loop messages que and pushing too many messages can block event loop and browser window.

In Angular 2or 4, Dependency injection gives us the ability to add functionality of a component at runtime. It also provides us a way to create a service that is a reusable piece of code, which can be used across our application to perform a particular function

The three types of directives in Angular 2 are attribute directives, structural directives, and components.

• Structural directives change the DOM layout by adding and removing DOM elements.
• Attribute directives change the appearance or behavior of an element
• Component is used to break up the application into smaller components.

In Angular 2, PrimeNG is a collection of rich UI components for Angular 2. PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces. All widgets are open source and free to use under Apache License 2.0, a commercial friendly license. PrimeNG is developed by PrimeTek Informatics, a company with years of expertise in developing open source UI components. AngularJS makes it possible to use predefined components for development like tables etc. This helps developers save time and efforts. Using PrimeNG developers can create awesome applications in no time

Decorators are used as identifier of class or type of object that is being created in TypeScript. Angular 2 identifies class below decorator call as definition of class and extend decorator specific properties with class definition.

Lazy loading modules speeds up our applications startup time. Lazy loading creates multiple bundles and loads them on demand in runtime. If we had loaded all our components and templates into one big bundle, it would lead to a large performance penalty.

There are four main components that can be used to configure routing in Angular 2:

Routes:  It describes our application’s routes.

Router Imports:  It uses to import our application’s Routes.

Router Outlet: It is a “placeholder” component that gets expanded to each route’s content.

Router Link: IT is used to link to application’s routes.

 In Angular 2,@ViewChild decorator is used when a parent component needs to communicate with and pass data to the child component. We need to pass the class name of the child component to @Viewchild decorator function.

Traceur is a JavaScript. Next-to-JavaScript-of-today compiler that allows you to use features from the future today. Traceur supports ES6 as well as some experimental ES.next features. Traceur’s goal is to inform the design of new JavaScript features which are only valuable if they allow you to write better code.

In Angular 2, observables are similar to promises but with major differences that make them better. Observables handle multiple values over time which makes them a good candidate for working with real-time data. Observables can also be cancelled and this gives a better control when working with in-flow of values from a stream. Observables is an ES7 feature which means you need to make use of an external library to use it today. For example, RxJS – https://github.com/Reactive-Extensions/RxJS

In Angular 2,Host decorators bind properties of component with UI element values. The properties inside component class definition decorated with @HostBinding can be accessed in template from assigned property i.e. @HostBinding() title = ‘My Title’

Systemjs is a client side module bundler in angular as it loads modules (components and other files) on demand instead of loading an entire application at startup. This largely reduces load times while starting up the app.

The up side of Web pack over Systemjs is that it bundles and creates a single file called bundle.js, which contains HTML, CSS and JS etc. While the initial load time might take a few seconds once the app is cached it becomes lightning fast and will lead to a large boost in performance.

Angular 4 is offered view-engine improvements and code-generation reductions. Angular 4 released in March 2017. The Angular 4.3 upgrade, was released in July and featured HttpClient, which provided a smaller, easier-to-use library for making HTTP requests. Angular 4.3 also has an attribute, @.disabled, for conditionally disabling animations as well as new router life cycle events.

• Angular 4 Features:
• View engine with less code
• Router ParamMap
• Animation Package
• Improved *ngIf and *ng for
• Size smaller and improved the speed
• Pipes and Source Maps for Templates
• TypeScript 2.1 & 2.2 compatibility
• HTTP request

Angular 5’s release took longer than expected, missing previous release targets of September 18 and October 23, 2017.

Angular 5 features are:

• Its Simpler Progressive Web Applications.
• Making Material Design components compatible with server-side rendering. Google needs to fix a few bugs before releasing this functionality.
• A build optimizer that makes the application smaller by eliminating unnecessary code. (The build optimizer is a command-line tool.)
• Angular Universal State Transfer API and DOM support
• Improved Compiler and Typescript
• Pipes for internationalized number, date, and currency
• To remove more polyfills, the ReflectiveInjector has been replaced with the StaticInjector. As a result, application size is reduced for most developers.
• Multiple names are supported for components and directives, which is useful in helping users migrate without breaking changes.
• Updated HTTP client.
• CLI 1.5, which generates Angular 5 projects by default.
• Router Hooks
• The RxJS reactive programming library has been updated to version 5.5.2 or later, featuring operators that eliminate the side effects of code-splitting and tree-shaking problems. Also, RxJS now distributes a version using ECMAScript modules, pulled in by default by the Angular CLI.

Angular version 6 continues an emphasis on being smaller, faster and easier to use. To help achieve these goals, the version 6 beta features a new renderer called Ivy. The beta also adds an optional, backward-compatible generic type to support typed nativeElement. The release candidate for Angular 6 is scheduled for March 2018, with production release on March 28.

• Its applications are not safe. Server side authentication and authorization is necessary to keep an application secure.
• Not Degradable: If user of your application disables the JavaScript then it displays nothing except basic page.
• Complex at times: At times AngularJS becomes complex to handles as there are multiple ways to do the same thing. This creates confusion and requires considerable efforts.

AngularJs is a most popular JavaScript framework developed by Google to develop a dynamic web application and mobile application.  The AngularJS Development Company makes use of the features provided by the Angular 1.0 to 5.0(next 6, 7, and 8) which brought major improvements of the developed code size. Its every version improved Security and performance.

AngularJS:

• It is based on MVC architecture.
• It is write in JavaScript to build the application
• Two-way data bindings
• Attaching new behavior to DOM elements, such as DOM event handling.
• Grouping of HTML into reusable components.
• Best used tools and support from the Google community

Angular 2 or Angular:

• Angular 2 is based on service/controller.
• It is write in TypeScript. TypeScript is a superset of JavaScript which helps to build more robust and structured code.
• It is Mobile Supported.
• Universal server rendering
• Improved Data Binding
• Data Management
• HTTP and more

Angular 4:

• It is very Fast and small size
• Animations
• Email Validator: In Angular 2.0, we use an email validator, using pattern option. But in Angular 4.0, there is a validator to validate an email.
• Angular Universal: outside of the browser
• Improved overall performance and security
• Better Debugging with Source Maps for Templates

Angular 5:

• It is Very faster (compare to angualr4). In this loading time as well as execution time has been improved.
• Service Worker support in the CLI
• Compiler Improvements
• Improved Decorators
• HttpClient
• Rxjs 5.5
• New Router Cycle
• Zone Seed Improvements and more.