Angular 2 Questions And Answers Pdf - Latest Updated
1. List some advantages of Angular 2 over Angular 1?
Answer: Angular 2 is a re-written version of Angular1 and not an update. The best way to compare Angular 2 and Angular 1 is by finding out the new features in Angular 2. This way we will be able to find out the advantages of Angular 2 over Angular1 precisely. So, some of the advantages of Angular 2 are:-
Angular 2 Angular1
Angular 2 is a mobile-oriented framework Whereas Angular1 was not developed with a mobile base in mind.
Angular 2 is a versatile framework, i.e. we have more choices for languages. We can use ES5, ES6, Typescript or Dart to write an Angular 2 code Whereas an Angular1 code can be written by using only ES5, ES6, and Dart. We don’t have many choices of language in Angular1.
Nowadays, the controllers are replaced by components and Angular 2 is completely component-based. Whereas Angular1 was based on controllers whose scope is now over.
Angular 2 directly uses the valid HTML DOM element properties and events which reduces the usage of many available built-in directives.
2. What would you not put the shared module?
Answer: Services that should not have multiple instances created for the application.
3. Explain Components in Angular 2?
Answer: Each application consists of Components. Each component is a logical boundary of functionality for the application. You need to have layered services, which are used to share the functionality across components. Following is the anatomy of a Component.
A component consists of:
Class − This is like a C or Java class which consists of properties and methods.
Metadata − This is used to decorate the class and extend the functionality of the class.
Template − This is used to define the HTML view which is displayed in the application.
4. Explain Components in Angular 2?
Answer: In angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.
5. What are the modules in angular 2?
Answer: In Angular, a module is a mechanism to group components, directives, pipes and services that are related,
in such a way that can be combined with other modules to create an application.
An Angular application can be thought of like a puzzle where each piece (or each module) is needed to be able to see the full picture.
6. What is TypeScript? What is the need for it in Angular2?
Answer: TypeScript is a typed superset of JavaScript which has been built and maintained by Microsoft and chosen by the AngularJS team for development.
Understanding the need for TypeScript file in Angular2 applications.
7. What is a good use case for ngrx/store?
Answer: Complex application state management requirements, involving asynchronous requests to update state.
8. What are some security-related features built into the Angular framework?
Answer: Sanitation, to prevent cross-site scripting. Built-in support in the HttpClient to prevent cross-site request forgery.
9. What is the tslint.json file used for?
Answer: Linting the TypeScript code (making sure it conforms to certain standards/conventions).
10. What is @outputs In Angular 2?
Answer: @Output along with EventEmitter is used to push out events in components.
The @Output decorator binds a property with our child component so that our child component can call its parent component. We can say it is used for communication between parent and child component.
11. What would be a good use case for having your own routing module?
Answer: An application whose requirements imply having many routes, and potentially route guards, and child routes.
12. What does this line do? @HostBinding(‘[class.valid]’) is Valid?
Answer: Applies the CSS class ‘valid’ to whatever is using this directive conditionally based on the value of isValid.
13. Why would you use renderer methods instead of using native element methods?
Answer: Potentially if you’re rendering to something besides the browser, e.g. rendering native elements on a mobile device or server-side rendering.
14. How can you bypass sanitation in Angular and why would you do so?
Answer: To inject known safe code, you can bypass sanitation (e.g. to embed an iframe).
15. What pseudo-class selector targets styles in the element that hosts the component?
Answer:
The: host pseudo-class selector.
16. Explain Angular 2 hidden property?
Answer: The hidden property in Angular 2 is a special case.
The property is more powerful and is used to bind any property of the elements.
It is considered the closest cousin of the show and hides.
It sets the display property “display: none”.
17. What is @Inputs in Angular 2?
Answer: @Input allows you to pass data into your controller and templates through HTML and defining custom properties. This allows you to easily reuse components and have them display different values for each instance of the renderer.
18. What are the Components?
Answer: Components are a part of the view which controls a patch of the screen. Our Page can be made of several components.
19. What do you understand by Metadata in context of Angular 2 Application?
Answer: It is the way to tell Angular how to process a class
20. What are Templates?
Answer: They are the companion of Components. More clearly, it is the component’s view, which tells Angular how to render the component. It is in HTML format with regular HTML tags plus uses Angular’s template syntax (like *ngFor, *ngIf).
It can be defined in the same component file or can be in a separate file (for clean coding) with its reference in the component file in the @Component decorator. (Read Components first for better understanding).
21. What is the meaning of Ng in Angular 2?
Answer: ng is the core module and stands for Angular. The ng module is loaded by default when an AngularJS application is started.
The module itself contains the essential components for an AngularJS application to function.
22. Which other PrimeNG components have you used with Angular 2?
Answer: Create a simple PrimeNG application using PrimeNG Components like PrimeNG Button, Confirmation Box, Text Box.
Angular 2 Gotchas
1. Compilation
As of now, Angular 2 supports development in Typescript, JavaScript, and Dart. Even though the framework supports JavaScript and Dart, the true contender for any new potential development seems to be Typescript. Moreover, the framework itself is written in Typescript.
Typescript is a superset of JavaScript language, and it has to be compiled into JavaScript in order to work. Angular 2 supports two kinds of compilation methods out of the box: Ahead-of-time (AOT) compilation and Just-in-time (JIT) compilation.
Ahead-of-time (AOT) compiles the application at build time with optimizations and is the method that must be used for production builds.
23. Configuration Over Convention?
Answer: While reading the documentation, I started following the “Tour of Heroes” tutorial from the official Angular 2 documentation. It’s a simple application created for the sole purpose of learning. Even with this small application, it started to get annoying quickly having to declare every component, pipe, directive, etc in modules. I’m not sure if this is a technical limitation (I didn’t get the chance to dig into Angular 2’s internal implementation yet), but isn’t there a way we can do a component scan and wire it all up based on Modules.
24. what is ng On Changes in Angular 2?
Answer: # ngOnChanges is called right after the data-bound properties have been checked and before view and content children are checked, experienced Angular developers.
25. What is ECMA Script?
Answer: ECMAScript is a subset of JavaScript. JavaScript is basically ECMAScript at its core but builds upon it. Languages such as ActionScript, JavaScript, JScript all use ECMAScript as its core. As a comparison, AS/JS/JScript are 3 different cars, but they all use the same engine… each of their exteriors is different though, and there have been several modifications done to each to make it unique. Angular2 supports ES6 and higher versions.
26. How to declare a component in Angular 2?
Answer: Components in Angular 2 are simply directives that are always associated with a direct template. Angular 2 components have an extremely well-defined life-cycle. When working with angular components, we can make use of interfaces which allows us to implement functionality for different times in a component’s lifecycle. A component must belong to a NgModule in order for it to be usable by another component or application. Components can even control their runtime behavior by implementing various Life-cycle hooks.
27. What is ECMAScript?
Answer: ECMAScript is a standard for scripting languages. It is a subset of Javascript. Languages such as ActionScript, JavaScript use ECMAScript as its core. ECMA stands for European Computer Manufacturer’s Association. Coders commonly use ECMAScript for client-side scripting on the World Wide Web. It is also used for server applications and services. It includes structured, dynamic, functional, and prototype-based features. The ECMAScript was developed by Brendan Eich of Netscape. The ECMAScript is standardized by the ECMA International standards organization in the ECMA-262 and ECMA-402 specifications. It is a programming language which is designed specifically for acting on an existing entity or system. It provides the rules, details, and guidelines that a scripting language must observe to be considered ECMAScript compliant.
28. Why do we use Angular 2?
Answer: Angular 2 is a structural framework for dynamic web apps.
With AngularJS, designers can use HTML as the template language and it allows for the extension of HTML’s syntax to convey the application’s components effortlessly.
Angular makes much of the code you would otherwise have to write completely redundant.
29. How to cache an observable data in Angular 2?
Answer: Caching of an observable data is done with the help of “observable.cache”. We can use caching in order to cache the response in the memory and then, on the next subscription, instead of requesting the remote server again. This operator is used at the end of the string. Caching is important for the performance, especially on bandwidth restricted devices and slow networks. You should have a good understanding of caching while working with promises but while translating it to observable, it is a bit difficult. Therefore, when interacting with observables, we typically set up a subscription on the consumer side and react to values coming through the pipe. We can easily add caching to the observables by adding publishReplay(1) and refCount.
30. What are the new features of Angular2?
Answer: Angular 2 is written entirely in Typescript and meets the ECMAScript 6 specification.
Component-Based- Angular 2 is entirely component-based. Controllers and $scope are no longer used. They have been replaced by components and directives.
Directives- The specification for directives is considerably simplified, although they are still subject to change. With the @Directive annotation, a directive can be declared.
Dependency Injection- Because of the improved dependency injection model in Angular2, there are more opportunities for component / object-based work.
Use of TypeScript-TypeScript is a typed superset of JavaScript which has been built and maintained by Microsoft and chosen by the AngularJS team for development. The presence of types makes the code written in TypeScript less prone to run-time errors. In recent times, the support for ES6 has been greatly improved and a few features from ES7 have been added as well.
Generics- TypeScript has generics which can be used in the frontend.
Lambdas with TypeScript- In TypeScript, lambdas are available.
Forms and Validations- Forms and validations are an important aspect of frontend development. Within Angular 2 the Form Builder and Control Group are defined. (company)
31. Can you automate porting Angular 1 code to Angular 2?
Answer: No, currently we are not provided with any such tool that ports the Angular 1 code to the Angular 2 code.
In the process of porting, the Angular 1 code to Angular 2, the side by side manual conversion of Angular 1 directives to the Angular 2 components takes place because they are two different frameworks and hence requires different approaches to solve the same problem.
32. What is the possible order of lifecycle hooks in Angular?
Answer: ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy.
33. How can we achieve Internationalization using Angular 2 ?
Answer: It can be achieved using directive i18n. Internationalization (or i18n, which stands for in) is the process of adapting software and web applications to multiple languages, allowing their application to be used by multiple language-speaking users. By ensuring that your application supports multiple languages, you can reach a broader audience and ensure smooth user experience for multilingual users.
34. Why do we need provider aliases? And how do you create one?
Answer: To substitute an alternative implementation for a provider. Can create like so: { provide: Logger Service, use Class: Date Logger Service
35. List the modern browsers supported by Angular 2?
Answer:
Angular supports most of the recent browsers some of which are:
- Google Chrome
- Firefox
- Edge
- IE for versions 9-11
- Safari
- iOS 7.1
- Android 4.1
- IE Mobile
36. What is Bootstrap array in Angular 2?
Answer: 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.
Note: Browse latest AngularJs Interview Questions and Angular Tutorial Videos. Here you can check Angular Training details and Angularjs Training Videos for self learning. Contact +91 988 502 2027 for more information.