Angular 2

This for all the web developer using Angular in the web framework. We have list down the important interview questions that can help you to lend a job.

Q.1 What are the primary components of Angular 2?
This is one of the most common interview questions asked in an interview. The primary components of Angular 2 are -
1. Component:− Used to bring the modules together.
2. Service: − Used to create components which can be shared across the entire application.
3. Modules: − Used to break up the application into logical pieces of code. Each piece of code or module is designed to perform a single task.
4. Templates: − Used to define the views of an Angular JS application.
5. Metadata: − Used to add more data to an Angular JS class.
Q.2 What is Angular 2?
Angular 2 is an open-source JavaScript framework for building web and mobile applications.
Q.3 Define host decorator in Angular 2.
One of the frequently asked Angular 2 interview questions which is used to bind the properties of components with UI elements values, such that these properties defined with @HostBinding inside the component class.
Q.4 What are the key features of Angular 2?
Features include a component-based architecture, two-way data binding, dependency injection, and more.
Q.5 What are Pipes in Angular 2?

Pipes are used in templates to convert the content into the desired output or as per business requirement Symbol for pipe is like this “|”,

For Example - {{appList[0] | lowercase}}.

Q.6 What is TypeScript, and why is it used in Angular 2?
TypeScript is a superset of JavaScript that provides strong typing and other features. It's used in Angular 2 for development.
Q.7 List the hidden property in Angular 2?
Some of the hidden property in Angular 2 are -
1. The property is more powerful and is used to bind any property of the elements.
2. It is considered the closest cousin of ngshow and nghide.
3. It sets the display property “display: none”.
Q.8 Explain the component-based architecture in Angular 2.
Angular 2 organizes applications into reusable components, each with its own logic, template, and styles.
Q.9 List the features of structural directive in Angular 2?
The features of structural derivates are -
1. Structural directives are primarily used to manipulate DOM in angular.
2. Structural directives are also responsible for HTML layout, such that by adding, removing, or manipulating LMNs in angular, they shape or reshape the structure of DOM.
3. This structural directive is applied to a host element with the help of other directives such that the directives then do whatever it is supposed to do with that host element and its descendants.
4. Structural directives can be easily recognized. It can also delay the instantiation of a component or an element. It can also be used for cosmetic effect or manually handling the timing of the loading of components.
5. Structural directives are bound to a template. The two most common structural directives are “ngIf” and “ngFor”. The process occurring in a structural directive is dynamic.
Q.10 What is a template in Angular 2?
A template is an HTML file that defines the UI structure and layout for a component.
Q.11 What do you understand by CLI?

CLI is abbreviated for Command Line Interface, that can be used to create the Angular JS application.

Using CLI, such that we can also create a unit and end-to-end tests for the Angular application.

Q.12 What is two-way data binding?
Two-way data binding in Angular 2 allows automatic synchronization of data between the component and the view.
Q.13 State the reasons for using decorators in Angular 2?

Decorators are used in Angular 2, as an identifier of class or type of the object which is created by the TypeScript.

Angular 2 identifies the class below decorator call as the definition of the class and extends the decorator specific properties with the class definition.

Q.14 What is dependency injection in Angular 2?
Dependency injection is a design pattern in Angular 2 that provides a way to create and manage dependencies.
Q.15 How will you handle errors in Angular 2 Applications?

Angular 2 Applications provide with the option of error handling. Such that the errors reported in Angular 2 are handled by including the ReactJS catch library and later using the catch function.

Firstly, the catch function, is used after adding the catch library contains the link to the Error handler function. After which this error, handler function, the errors are sent to the error console, and also the errors are thrown back to continue the execution.

Such that whenever an error occurs it will be redirected to the error console of the web.

Q.16 Explain decorators in Angular 2.
Decorators are used to enhance classes with metadata and configuration in Angular 2.
Q.17 What do you understand by component specific hooks?
Some of the component specific hooks in Angular2 are -
1. ngafterContentinit: It initializes the component content
2. ngAfterConctentChecked: It checks the binding of the external content.
3. ngafterViewinit: It creates the component view.
4. ngAfterviewChecked: It checks the bindings of the component’s view.
Q.18 What is an Angular module?
An Angular module is a container for organizing application components, services, and other features.
Q.19 What do you understand by Angular 2 RouteParams?
RouteParams are used to map the given URL’s based on the route URLs such that they become optional parameters for that route.
Q.20 How do you create a new Angular component?
Use the Angular CLI or manually create files for the component class, template, and styles.
Q.21 What do you understand by lazy loading in Angular 2?
Lazy loading is a module that is used to decrease the start-up time. Whenever Lazy loading is used, then the system application does not need to load everything at once. Such that it only needs to load what the user expects to see when the application first loads.
Also the modules that are lazily loaded will only be loaded when the user navigates to their routes. Lazy loading improves the performance of our system applications. It keeps the initial payload small and these smaller payloads lead to faster download speeds. It helps in lowering the resource cost, especially on mobile networks. Lazy loading is setup in the main routing file. Lazy loading overcomes the problem of slow loading of applications in their own way which hence improves the loading time of the application. We can perform Lazy loading in the following steps -
1. Update your route file
2. Install angular-router-loader and add the loader to your webpack configuration file.
3. Define the lazy routes
4. Import the routes to the module.
Q.22 What is a directive in Angular 2?
Directives are special markers in the DOM that trigger specific behaviors in Angular 2.
Q.23 Define a template in Angular 2?
Template in Angular 2 is used to define the views of the AngularJS Application.
Q.24 Differentiate between structural and attribute directives.
Structural directives change the structure of the DOM, while attribute directives modify the appearance or behavior of an element.
Q.25 What do you understand by AOT compilation?
AOT is abbreviated for Ahead of Time. AOT is the compilation in which Angular compiles the components and templates to JavaScript and HTML while developing.
Q.26 How do you handle user input in Angular 2?
Use event binding to capture and respond to user input events like clicks and key presses.
Q.27 What are host decorator in Angular 2?
Host decorators in Angular 2 are used to bind the properties of components with UI element values. Such that the properties inside a component class definition are decorated with @HostBinding are accessed in a template from the assigned property that is @HostBinding()title=’Our title'( whatever the title is).
Q.28 What is Angular CLI?
Angular CLI is a command-line tool that simplifies Angular application development tasks like scaffolding, testing, and building.
Q.29 What do you understand by .angular-cli.json?
angular-cli.json is used to configure a project in angular2. We can find it in the root folder of your angular2 Project.
Q.30 Explain the concept of services in Angular 2.
Services in Angular 2 are singleton objects used for sharing data and functionality across components.
Q.31 What do you understand by Event emitters?
Event emitter is a class defined in core module which is used by components and directives to emit custom events.
Q.32 What is a route in Angular 2?
A route is a URL pattern that maps to a component, enabling navigation within an Angular 2 application.
Q.33 Differentiate between constructor and ngOnlnit in Angular js?
The points of difference are -
1. ngonInit is a method in a class structurally is not different to any other method in a class. On the other hand a constructor is a completely different thing. It will be called when an instance of a class is created.
2. A class constructor in angular is used to inject dependencies, referred as constructor injection pattern. On the other hand when ngOnInit is called, it has finished creating a component DOM, injected all required dependencies through constructor and processed input bindings.
3. A constructor is a n the other hand ngOnInit is a life cycle hook referred by Angular 2 to indicate that angular is done creating the component.
4. ngOnInit relies on the binding of the component. On the other hand it is not the case when a constructor is used.
Q.34 What is lazy loading in Angular 2 routing?
Lazy loading is a technique in which modules are loaded on-demand, improving application performance.
Q.35 What are the modern browsers supported by Angular 2?
Angular supports most of the recent browsers such as Google Chrome, Firefox, Edge, IE for versions 9-11, Safari, iOS 7.1, Android 4.1 and IE Mobile.
Q.36 What is an Angular 2 pipe?
A pipe is a way to transform data in templates, such as formatting dates or filtering lists.
Q.37 What do you understand by Traceur Compiler?
Traceur is a compiler that takes ECMAScript and compiles it down to regular Javascript which runs in the browser. Traceur is primarily used in several ways like -
1. 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.
2. Even traceur is written in ES6, compiled to ES5. The main goal of a traceur compiler is to inform the designs of Javascript features and allows us to write the code in a better manner.
3. Traceur compilers are broadly used in Angular 2 platform. It also supports transpilling and type checking via type annotations.
Q.38 How do you handle HTTP requests in Angular 2?
Use the HttpClient module to make HTTP requests to a server and retrieve data.
Q.39 What is a resolver in Angular 2 routing?
A resolver is a service that fetches data before a route is activated, ensuring data availability when a component is loaded.
Q.40 What is a reactive form in Angular 2?
Reactive forms in Angular 2 provide a model-driven approach to form handling, offering more control and flexibility.
Q.41 How do you perform unit testing in Angular 2?
Angular 2 provides tools like TestBed and Jasmine for writing and running unit tests.
Q.42 What is Angular Material?
Angular Material is a library of UI components for Angular 2 applications, providing pre-designed and styled components.
Q.43 How can you optimize performance in Angular 2?
Strategies include lazy loading, ahead-of-time (AOT) compilation, and optimizing change detection.
Q.44 Explain the concept of observables in Angular 2.
Observables are a powerful way to handle asynchronous data streams and events in Angular 2.
Q.45 What is the purpose of the Angular 2 ngFor directive?
ngFor is used for rendering lists of data by iterating over an array or collection.
Q.46 What is Angular Universal?
Angular Universal is a technology for server-side rendering (SSR) of Angular applications, improving performance and SEO.
Q.47 How do you handle errors in Angular 2?
You can use error handling techniques such as try-catch blocks or catchError() operators with observables.
Q.48 What is the Angular 2 ViewChild decorator?
ViewChild is used to access child components or elements in a parent component's template.
Q.49 What is Ahead-of-Time (AOT) compilation in Angular 2?
AOT compilation converts Angular templates and components into efficient JavaScript code during build time.
Q.50 Explain Angular Change Detection.
Angular Change Detection is a mechanism that automatically updates the view when the model changes.
Q.51 How can you pass data between components in Angular 2?
You can use @Input and @Output decorators for parent-child communication or services for cross-component data sharing.
Q.52 What are Angular directives used for?
Directives are used to extend HTML with custom behavior or to modify the behavior of elements in the DOM.
Q.53 What is the Angular Development Mode?
Development Mode in Angular provides additional debugging information and is used during development but disabled in production.
Q.54 What is Angular 2, and how does it differ from AngularJS (Angular 1)?
Angular 2 is a complete rewrite of AngularJS, introducing a component-based architecture, improved performance, and TypeScript as the primary language.
Q.55 What is TypeScript, and why is it used in Angular 2?
TypeScript is a superset of JavaScript that adds static typing and other features. Angular 2 uses TypeScript for improved tooling, code quality, and maintainability.
Q.56 What is a component in Angular 2?
A component is a fundamental building block of an Angular 2 application, encapsulating the template, logic, and styling for a specific part of the UI.
Q.57 What is the use of angular 2?

The use of Angular2 is widespread.
Angular2 increases developer productivity by offering various facilities to quickly develop web applications and SPAs or single page applications.

Angular2 is a Typescript based open source Javascript framework.

  • Angular 2 has hierarchical dependency using providers, declarations, etc
  • Angular 2 has CLI or command line interface of their own
  • For data binding, Angular 2 has more intuitive syntax.
  • For heavy data intensive applications, Angular 2 is faster than predecessors
Q.58 What is the purpose of the NgModule in Angular 2?
NgModule is used to define and configure modules in Angular 2, grouping related components, services, and other code.
Q.59 What is the difference between AngularJS and angular 2?

The differences between Angular and AngularJS are

  • AngularJS supports MVC architecture whereas Angular uses components and directives
  • AngularJS uses JavaScript and Angular 2 onwards uses Typescript
  • Dependency injection in AngularJS is injected into various functions but in Angular, it is hierarchical dependency using providers, declarations, etc
  • Angular 2 onwards has CLI or command line interface of their own, which is absent in AngularJS
  • For data binding, correct syntax of ng directives for event or property in AngularJS, is needed whereas in Angular it is more intuitive.
  • For heavy data intensive applications, Angular is faster as compared to AngularJS
Q.60 How is data binding implemented in Angular 2?
Data binding in Angular 2 allows automatic synchronization between the UI and the underlying data model using one-way or two-way binding.
Q.61 What is current version of angular?
The latest version of Angular is 8.2.13 as on Oct, 2019
Q.62 What are directives in Angular 2?
Directives are markers on DOM elements that instruct Angular to attach specific behavior or manipulate the DOM. Examples include *ngFor and *ngIf.
Q.63 What is angular and why angular?

Angular is a web open source Javascript framework, to develop software applications for internet especially dynamic web applications. Angular is used to develop single page applications or SPA.

The main advantage of using Angular being, ease of development as it uses HTML like syntax to declare various functionality of a web application.

Why Angular, because Angular makes it easy to quickly develop application  for both web and mobile. Angular hides the crude implementation and many things are provided, as

Angular offers

  • Component-based architecture offering Reusability, Maintainability
  • TypeScript giving better tooling, cleaner code, and higher scalability
  • RxJS for efficient, asynchronous programming
  • Hierarchical dependency injection
  • Ivy renderer
  • Angular Material for streamlining Material Design interface engineering
  • Seamless updates using Angular CLI
  • Angular elements

Q.64 What is dependency injection in Angular 2?
Dependency injection is a design pattern in Angular 2 that allows components to request and receive dependencies (such as services) from a container.
Q.65 Why do we need angular 2?

Angular 2 is needed to streamline web application development.  Angular 2 makes it easy to develop dynamic web applications especially single page applications or SPA.

Angular 2 is a web open source Javascript framework for quick development of applications both for mobile and web.

Angular 2 distinctive features due to which we need Angular 2, is

  • Angular2 is a Typescript based open source Javascript framework.
  • Angular 2 has hierarchical dependency using providers, declarations, etc
  • Angular 2 has CLI or command line interface of its own
  • For data binding, Angular 2 has more intuitive syntax.
  • For heavy data intensive applications, Angular 2 is more fast than predecessors


Q.66 What is a service in Angular 2?
A service is a reusable, injectable code module in Angular 2 that provides specific functionality or data to components.
Q.67 What are the new features of angular 2 why you used angular 2?

The new features of angular 2 are

  • Angular 2 uses TypeScript
  • Angular 2 has built-in support for mobile application development
  • offline compilation and fast change detection in Angular 2 boosts performance
  • Has 3 directive types - component, decorator and template directives
  • improved support for dependency injection
  • Data binding in Angular 2 is improved and done by wrapping the element inside a square bracket
  • completely component based
  • Has improved routing by navigational model, location service and URL resolver

Angular 2 is used  to streamline web application development.  Angular 2 makes it easy to develop dynamic web applications especially single page applications or SPA.

Angular 2 is a web open source Javascript framework used for quick development of applications both for mobile and web.

Q.68 How do you create a new Angular 2 project using the Angular CLI?
You can create a new project using the ng new command, followed by the project name and other options.
Q.69 What is angular good for?

Angular is good for developing application for both web and mobile.  Angular  is a web open source Javascript framework from Google.

Angular is good for

  • Modular application development
  • Support for both mobile and web
  • RESTful API
  • Uses HTML type syntax and extends HTML
  • Data Binding
  • Dependency injection
  • MVC architecture
  • Directives, filters, modules, routes etc
  • Separation of data model from view and user interaction

Q.70 What is the purpose of the router module in Angular 2?
The router module allows for navigation between different parts of an Angular 2 application by defining routes and their associated components.
Q.71 What is the advantage of using angular?

The advantage of using angular, are

  • Angular enables Modular application development
  • Angular support application development for both mobile and web
  • Angular provides RESTful API
  • Uses HTML type syntax and extends HTML
  • Angular uses TypeScript  hence concise code
  • Angular has built-in support for mobile application development
  • offline compilation and fast change detection in Angular boosts performance
  • Has 3 directive types - component, decorator and template directives
  • improved support for dependency injection
  • Data binding in Angular is improved and done by wrapping the element inside a square bracket
  • completely component based
  • Has improved routing by navigational model, location service and URL resolver

Q.72 What is lazy loading in Angular 2?
Lazy loading is a technique where modules and components are loaded only when they are needed, improving initial load times.
Q.73 Why should I use angular?
You should use Angular to - Develop application for both mobile and web - Save time in application development - Have modular application - Use MVC architecture - Easily test the application being developed from early stages - Have less code while getting desired functionality
Q.74 How can you pass data between parent and child components in Angular 2?
Data can be passed from parent to child components using input properties, and from child to parent components using output properties with event emitters.
Q.75 What are the new features of angular 2?

The new features of angular 2 are

  • Angular 2 uses TypeScript
  • Angular 2 has built-in support for mobile application development
  • offline compilation and fast change detection in Angular 2 boosts performance
  • Has 3 directive types - component, decorator and template directives
  • improved support for dependency injection
  • Data binding in Angular 2 is improved and done by wrapping the element inside a square bracket
  • completely component based
  • Has improved routing by navigational model, location service and URL resolver

Q.76 What is the purpose of Angular 2's ngFor directive?
ngFor is used for iterating over a collection, such as an array or list, and rendering multiple elements based on the data.
Q.77 Is angular 2 mobile oriented?

Yes, angular 2 is mobile oriented.

You can use Ionic or Nativescript for developing mobile applications or porting web application in Angular to a mobile application. Hence, angular 2 is mobile oriented.

Q.78 What is an Angular 2 template reference variable?
A template reference variable (e.g., #varName) allows you to reference elements or components in a template to access their properties or methods.
Q.79 What is the difference between angular 2 and angular 5?

The difference between angular 2 and angular 5, is

  • Angular 2 was released in 2016 and Angular 5 in 2017
  • Angular 2 supports up to Typescript 1.8 and Angular 5 supports TypeScript 2.3 version
  • Angular 5 has a build optimizer
  • Angular 5 has Angular Universal State Transfer API to share the application state between server and client side
  • Angular 5 has extensive support of incremental compilation of an application
  • Angular 5 can remove unnecessary white space for reduced bundle size
  • Angular 5 has increases the internationalization across all the browsers and no need for i18n polyfills
  • Angular 5 has exportAs feature
  • Angular 5 has HttpClient
  • Angular 5 has new router Life-cycle Events
  • Angular 5 has improved faster Compiler support

Q.80 How do you handle user input in Angular 2 forms?
Angular 2 provides two-way data binding and various form control directives to handle user input and form validation.
Q.81 Is angular 2 Object Oriented?

Yes, angular 2 is Object Oriented. Angular 2 is based on Typescript.

Typescript is a strict syntactical superset of JavaScript and is an object oriented programming language. TypeScript compiles to JavaScript code in any JavaScript engine that supports ECMAScript 3 (or newer).

TypeScript Objects helps to model real world similar to that in OO programming.

Q.82 What is Angular CLI, and how does it simplify development?
Angular CLI is a command-line tool that automates common development tasks, such as project setup, generation of components, and building production-ready apps.
Q.83 What is the difference between angular 2 and angular 4 and angular 5?

The differences between angular 2 and angular 4, are

  • Angular 2 was released in 2016 and Angular 4 in 2017
  • Angular 2 supports up to Typescript 1.8 and Angular 4 supports TypeScript 2.1 and 2.2 version
  • Angular 4 is next iteration of Angular 2 as Angular 3 was skipped.
  • Core concepts and inheritance is same in Angular 4 and Angular 2
  • Angular 4 has extensive changes in core library as compared to Angular 2
  • Angular 4 has reduced size of AOT compiler generated code
  • In Angular 4 animation is in @angular/animation
  • Angular 4 has, Else block in *ngIf introduced

The differences between angular 2 and angular 5, are

  • Angular 2 was released in 2016 and Angular 5 in 2017
  • Angular 2 supports up to Typescript 1.8 and Angular 5 supports TypeScript 2.3 version
  • Angular 5 has a build optimizer
  • Angular 5 has Angular Universal State Transfer API to share the application state between server and client side
  • Angular 5 has extensive support of incremental compilation of an application
  • Angular 5 can remove unnecessary white space for reduced bundle size
  • Angular 5 has increases the internationalization across all the browsers and no need for i18n polyfills
  • Angular 5 has exportAs feature
  • Angular 5 has HttpClient
  • Angular 5 has new router Life-cycle Events
  • Angular 5 has improved faster Compiler support

Q.84 How can you handle HTTP requests in Angular 2?
Angular 2 provides the HttpClient module for making HTTP requests to APIs or servers. You can use observables for handling asynchronous responses.
Q.85 Are there breaking changes between angular 2 and angular 4?

Yes, there are breaking changes between angular 2 and angular 4

Breaking changes between angular 2 and angular 4, are

  • Angular 4 supports TypeScript 2.1 and 2.2 version
  • Angular 4 has reduced size of AOT compiler generated code
  • In Angular 4 animation is in @angular/animation
  • Angular 4 has, Else block in *ngIf introduced
  • Angular 4 has extensive changes in core library
Q.86 What is the purpose of Angular 2's ngIf directive?
ngIf is used for conditionally rendering elements in the DOM based on a specified condition. If the condition is false, the element is removed.
Q.87 Why is angular 2 used?

Angular 2 is used  to streamline web application development.  Angular 2 makes it easy to develop dynamic web applications especially single page applications or SPA.

Angular 2 is a web open source Javascript framework used for quick development of applications both for mobile and web.

Angular 2 is used as

  • Angular 2 uses TypeScript
  • Angular 2 has built-in support for mobile application development
  • offline compilation and fast change detection in Angular 2 boosts performance
  • Has 3 directive types - component, decorator and template directives
  • improved support for dependency injection
  • Data binding in Angular 2 is improved and done by wrapping the element inside a square bracket
  • completely component based
  • Has improved routing by navigational model, location service and URL resolver

Q.88 What are Angular 2's lifecycle hooks, and why are they useful?
Lifecycle hooks are methods provided by Angular 2 that allow you to tap into specific moments in a component's lifecycle, enabling you to perform actions at various stages.
Q.89 How do you use Angular 2's two-way data binding syntax?
Two-way data binding in Angular 2 uses the [(ngModel)] directive to bind a property to an input element and update it bidirectionally.
Q.90 What is Angular 2's ngOnChanges lifecycle hook used for?
ngOnChanges is called when the input properties of a component change, allowing you to respond to these changes.
Q.91 What Core Differences Observables have from the Promises?

Core difference Observables have from the Promises , as


Promises:

  • returns a single value.
  • They are non-cancellable.

Observables:

  • works with multiple values over time.
  • They are cancellable.
  • supports map, filter, reduce and similar operators.
  • proposed feature for ES 2016.
  • use Reactive Extensions (RxJS).
  • an array whose items arrive asynchronously over time
Q.92 What is the purpose of Angular 2's ngOnInit lifecycle hook?
ngOnInit is called after a component's inputs are initialized and is commonly used for initialization logic and HTTP requests.
Q.93 What is the difference Between Constructor And Ngoninit?

Differences - Constructor Vs. ngOnInit
Angular 2 Constructors:-

  • The constructor: it is a default method runs when component is being constructed.
  • The constructor: it is a typescript feature and it is used only for a class instantiations and nothing to do with Angular 2.
  • The constructor: it is called first time before the ngOnInit(). The ngOnInit is called after the constructor, while ngOnInit is called after the first ngOnChanges. When an input or output binding value changes, the ngOnChanges is called.
Q.94 What is Angular 2's ngOnDestroy lifecycle hook used for?
ngOnDestroy is called just before a component is destroyed, allowing you to clean up resources or unsubscribe from observables.
Q.95 What Is AOT Compilation?

An AOT compilation stands for Ahead Of Time compilation, in which the angular components and templates to compile by the angular compiler 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.

Q.96 How do you create a custom directive in Angular 2?
You can create a custom directive using the @Directive decorator and defining the directive's behavior in its class.
Q.97 How can we set up our Development Environment For Angular 2?

Setting up our development environment for Angular 2 requires two basic steps:

  • Install npm, or node package manager.
  • Set up the Angular 2 application.
Q.98 What is the difference between ViewEncapsulation modes in Angular 2?
ViewEncapsulation modes control how styles are scoped to Angular components. Modes include Emulated, None, and ShadowDom.
Q.99 What Is Npm?

Npm, or node package manager:

  • is a command line utility interacting with a repository of open source projects
  • Is the package manager for JavaScript.

Using npm we can install packages, libraries, and applications, along with their dependencies.

Q.100 How can you handle errors in Angular 2 HTTP requests?
You can use the catch operator with observables to handle errors gracefully in HTTP requests and provide error messages or fallback behavior.
Q.101 How Can We Setting Up Angular 2 Application?
  • 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's file(To bootstrap the Angular application with the root component).
Q.102 What is the purpose of the Angular 2 CLI ng generate command?
The ng generate command is used to generate components, services, modules, and other Angular artifacts quickly.
Q.103 In an Angular 2 Application What Are The Security Threats Should We Be Aware Of?

Angular 2 application has many security threats.

Angular 2 application should also follow some of the basic guidelines to mitigate the security risks.

Some of them are

  • Avoid using/injecting dynamic Html content to your component.
  • If using external Html, that is coming from database or somewhere outside the application, sanitize it.
  • Unless it is trusted try not to put external urls in the application. Avoid url re-direction unless it is trusted.
  • Consider using AOT compilation or offline compilation.
  • Try to prevent XSRF attack by restricting the api and use of the app for known or secure environment/browsers.
Q.104 What is AOT (Ahead-of-Time) compilation in Angular 2?
AOT compilation converts Angular templates into highly optimized JavaScript code during the build process, improving application performance.
Q.105 State the Advantages Of Using Angular 2 Over Angular 1?
  • Angular 2 is not only a language it's a platform
  • Better Performance and speed: No $Scope in Angular 2, AOT
  • Simpler Dependency Injection
  • Modular, cross platform
  • Benefits of ES6 and Typescript.
  • Flexible Routing with Lazy Loading Features
  • Easier to Comprehend
Q.106 What is the Angular 2 router outlet used for?
The router outlet is a directive that marks where the content of a specific route should be displayed in the application's layout.
Q.107 What differences do Components hold from the Directives?

Differences do Components hold from the Directives

Components :

  • For register component we use @Component meta-data annotation.
  • Component may be a directive that use shadow DOM to make encapsulate visual behavior referred to as parts.
  • Components are typically used to create UI widgets.
  • Component is employed to interrupt up the appliance into smaller parts.
  • Only one part will be gift per DOM component.
  • @View decorator or modelurl template are obligatory within the part.

Directives :

  • For register directives we use @Directive meta-data annotation.
  • Directives is employed to feature behavior to AN existing DOM component.
  • Directive is use to design re-usable components.
  • Many directive will be employed in a per DOM component.
  • Directive don’t have View.
Q.108 How do you handle asynchronous operations in Angular 2?
You can use observables, promises, or async/await to handle asynchronous operations, such as HTTP requests and timers, in Angular 2 applications.
Q.109 What Is Component In Angularjs 2 ?
In Angular, a Component is a special kind of directive using a simpler configuration which is suitable for a component-based application structure.
Q.110 What Is @inputs In Angular 2?

@inputs In Angular 2, allows you to pass data into your controller and templates through html and defining custom properties.

Thus this permits you to easily reuse components and have them display different values for each instance of the renderer.

Get Govt. Certified Take Test