sample copy. not for distribution. · 2017-08-10 · iii angular 2 interview questions and answers...

Sample Copy. Not For Distribution.

i

Angular 2 Interview

Questions and Answers

With Typescript and Angular 4


ii

Publishing-in-support-of,

EDUCREATION PUBLISHING

RZ 94, Sector - 6, Dwarka, New Delhi - 110075 Shubham Vihar, Mangla, Bilaspur, Chhattisgarh - 495001

Website: www.educreation.in

________________________________________________________________

© Copyright, Authors

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted, in any form by any means, electronic, mechanical, magnetic, optical, chemical, manual, photocopying, recording or otherwise, without the prior written consent of its writer.

ISBN: 978-1-5457-0337-3

Price: ` 390.00

The opinions/ contents expressed in this book are solely of the authors and do not represent the opinions/ standings/ thoughts of Educreation or the Editors . The book is released by using the services of self-publishing house.

Printed in India


iii

Angular 2

Interview Questions

and Answers

With Typescript and Angular 4

Anil Singh Reviewer - Alok Kumar Singh

Editor - Reena Singh

EDUCREATION PUBLISHING (Since 2011)

www.educreation.in


iv


v

About Author

ANIL SINGH

My name is Anil Singh. I born and brought up in Kushinagar

(U.P.) India. I have done B.Sc(Math) and Master of Computer

Application (MCA). I’m currently working as Technical Lead at

Australian MNC and have earned total experience of 8+ years in

different domain like Telecom, Legal and Casino Gaming industry.

I have written over 1500+ technical articles on my blog

http://code-sample.com. I also have a number of certifications

including MCTS - 515 and MCTS - 513. My hobbies include -

learning new technologies, blogging, writing and sharing

knowledge using social media and so on.


vi

About Reviewer

ALOK KUMAR SINGH

I am Alok Kumar Singh. I belong to UP, India. I am postgraduate

with Master in computer Application (MCA). I am working on

Microsoft Technologies from 8+ years. I am active Blogger as well

as book and blog Reviewer. I reviewed this book content that is

very useful for the Interviewee - students, programmers and

software engineers.


vii

About Book

Angular 2 Interview Questions and Answers This book has the collection of Angular 2 Interview Questions and

Answers with TypeScript and Angular 4 and also guides you

effectively on how to become an extremely skilled that too in a

very short period of time.

Angular 2 is a most popular and powerful JavaScript

frameworks for developing mobile as well as desktop applications

and it is so simpler, faster, modular and instrumented design.

Angular is designed and developed by Google and Misko Hevery

is the father of Angular.

You can learn complete knowledge of Angular 2, TypeScript

and basic of Angular 4 simpler and faster with examples.

This book has important questions and answers for beginner

and expert level of developers, students or engineers and it’s

containing 115 plus questions and answers with TypeScript,

Angular 4 and examples.


viii

Table of Contents

S. No. Content Page

1. What Is Angular 2? 1

2. What Are The New Features Of Angular 2? 2

3. What Are Advantages of Angular 2? 3

4. Why We Used Angular 2? 4

5. Who Is Creator Of Angular? 5

6. What Are the Fundamental Concepts of

Angular 2?

6

7. What Is the Difference Between AngularJs

and Angular 2?

7

8. What Is ECMAScript? 10

9. What Is Traceur Compiler? 10

10. What Is Lazy Loading and How to Enable

Lazy Loading in Angular 2?

10

11. What Are the Securities Threats should we

be Aware of in Angular 2 Applications?

11

12. How would you optimize the Angular 2

Application for better Performance?

11

13. What Is AOT compilation? Why Use in

Angular 2?

12

14. What modern Browsers are supported in

Angular 2?

13

15. Constructor Vs. ngOnInit 13

16. When Will ngInit be called? How would 14


ix

you make use of ngOnInit ()?

17. What Are Components Lifecycle Hooks in

Angular 2?

16

18. What Is the Best way to Declare and

Access a Global Variable in Angular 2?

19

19. What Are Angular 2 Components? 22

20. What Are difference between Components

and Directives?

24

21. How To passing data into Angular 2

components with @Input?

26

22. How To passing data into Angular 2

components with @Output?

28

23. What Is hidden property in Angular 2? 30

24. Don't Use hidden attribute with Angular 2.

Here is why?

31

25. How do Components Communicate with

Each Other in Angular 2?

32

26. What Are the difference between Renderer

and ElementRef in angular 2?

35

27. Do notice that you should refrain from

using ElementHref as it flagged with a

security risk?

36

28. What Is the point of calling

renderer.invokeElementMethod(rendererEl,

methodName)?

36

29. How do we display errors in a component

view with Angular 2?

37

30. What Is Angular 2 Service? What are the

features of Angular 2 Service?

41

31. What Are the Steps for Creating an

Angular 2 Services?

42


x

32. What Are the differences between

Observables & Promises?

43

33. What Are the Steps for Calling an Angular

2 Service in the Angular 2 Component

class?

43

34. How To CREATE an Injectable Service in

Angular 2? Example?

43

35. How To Create & Call Angular 2 Services

in Components?

43

36. How To Create a Singleton Service in

Angular 2?

43

37. What Is Angular 2 Pipes? 49

38. What Is a pure and impure pipe? 50

39. Why Use Angular 2 Pipes? 53

40. What Is Async Pipe? 54

41. How To CREATE and Use custom Pipes in

Angular 2?

55

42. What Are Directives? 62

43. What Are Components Directives? 62

44. What Are Structural Directives? 63

45. How To creating a Structural Directive? 63

46. How To CREATE multiple Structural

Directives?

64

47. What Are Attribute Directives in Angular

2?

65

48. What Is Routing in Angular 2? 66

49. What Is Routes? 67

50. What Is Router Imports? 69

51. What Is router-outlet Directive in Angular

2?

70


xi

52. Is it possible to have a multiple router-

outlet in the same template?

71

53. What Is Router-link Directive in Angular

2?

72

54. What Is route-config in Angular 2? 73

55. What Is Route Params in Angular 2? 74

56. What Is Template Angular 2? 75

57. How To Use {}, [], () and [()] in Angular 2

Template?

76

58. What Are Differences of using template

and templateUrl in Angular 2 Component?

77

59. How To Use styleUrls and styles in

Angular 2?

79

60. What Is Dependency Injection (DI) in

Angular 2?

81

61. What Is @Injectable()? Why Use It? 81

62. What Is @Inject()? Why Use It? 82

63. How To Use Dependency Injection (DI)

Correctly in Angular 2?

82

64. What Is @NgModule? Why Use? 83

65. Why Angular 2 modules needed? 85

66. Why @NgModule? 85

67. What Is a Root Module? 85

68. How Should We Organize Modules? 85

69. How To Declaration Components,

Services, Pipe and NgZone in the

NgModule? How to Use?

86

70. What Is One Root Module? 90

71. What Are differences between Angular 2

Modules vs. JavaScript Modules?

90


xii

72. What Are Zones? What Is NgZone in

Angular 2?

92

73. What Is Change Detection? 92

74. How To Run NgZone outside Angular 2? 93

75. What would be a good use for NgZone

Service?

95

76. What Is Cookies in Angular 2? How to

Create and Use?

95

TypeScript Questions and Answers – 99

1. What Is TypeScript? 100

2. Why Should I Use Typescript? 100

3. What Are the Benefits of Using

TypeScript?

100

4. What Are TypeScript Types? 101

5. How To Setup and Install Typescript NPM

and Angular 2?

103

6. What Is Variable in TypeScript? 104

7. How To Declare Variable in TypeScript? 104

8. What Are differences between “declare” vs

“var”?

105

9. What Is scope variable? 106

10. What Is an Interface in TypeScript? 108

11. What Is Optional Properties in TypeScript? 109

12. What Is Functions in TypeScript? 110

13. How many types you defined in

TypeScript?

111

14. What Is Anonymous Functions? 111

15. What Is Named Function? 113


xiii

16. What Is Lambda Function/Arrow

Function?

113

17. What Is an Optional Parameters Function? 114

18. What Is Rest Parameters? 115

19. What Is Default Parameters? 116

20. How To create fields, constructor and

function in TypeScript Class?

117

21. How Static class in TypeScript? 118

22. Ways To declare a nest class structure in

TypeScript?

118

23. What Is Public, Private, Protected and

Readonly Modifiers in TypeScript?

119

24. What Is Method Overriding in TypeScript? 123

25. What Is Inheritance in TypeScript? 124

26. How Automatic Assignment of Constructor

Parameters in TypeScript work?

125

27. What's a Module? 126

28. What’s an Internal Module? 127

29. What Is Implicit Internal Modules? 128

30. What Is Named Internal Modules? 128

31. What Is an External Module? 130

32. What's an export in TypeScript? Why using

export in TypeScript?

131

33. What Is default export in TypeScript? Why

we use it?

133

34. What Are differences between Modules vs.

Namespace?

134

Angular 4 Questions and Answers – 137


xiv

1. What’s New in Angular 4? 138

2. Why Angular 4? 143

3. What Happened to Angular 3? 143

4. How To Upgrade Web Apps from Angular

2 to Angular 4?

144

5. What Is the Difference Between [ngFor]

and [ngForOf] in Angular 2?

145


1

My Blog - www.code-sample.com

________________________________________________________________________

(1) What Is Angular 2?


frameworks for developing mobile apps. It is also for desktop

as well as mobile applications. Angular 2 is focusing on data-

binding, extensible HTML and on application test-ability but it is

still in design and prototyping stage.

Angular framework helps us to build client applications in

HTML and JavaScript.

Angular 2 is so simpler, faster, modular and instrumented

design.

Angular 2 targeting to modern browsers and it is developing

using ES6 (ES6 is called ECMAScript version 6). It also support

to ECMAScript version 5(ES5).

You don’t worry about the versions of ECMAScript.

The ES6 compiler manages to the versioning related problems.

All version of Angular 2 framework code is already being

written in ECMAScript 6.

The set of modern browsers are

Chrome

Firefox

Opera

Safari

IE Version10, 11 and so on...

On mobiles, it is supporting to the list of Chrome on Android,

iOS 6+, Windows Phone 8+ and Fire-Fox mobile and also trying to

support to older versions of Android.

Angular 2 team is working with Traceur compiler team to

provide the support to build some extensions and this set of

extensions called “ES 6 +A”.


http://www.code-sample.com/2015/07/angularjs-2-documentation-with-example.html

2


________________________________________________________________________

The “Angular 2” is using “Traceur” compiler. Traceur is a

compiler that takes “ES6” and compiles it down (ES5) to

regular JavaScript that runs in your browsers. It is run everywhere

you want to do.

(2) What Are The New Features of Angular 2?

Angular 2 Features –

Angular 2 is Entirely Component Based

Directives

Dependency Injection

Used of TypeScript

Used of Lambdas or Arrow functions

Generics

Forms and Validations

And So on..

Component Based- It is entirely component based. It is not used

to scope and controllers and Angular 2 are fully replaced by

components and directives.

Directives- The directive can be declared as @Directive

annotation. A component is a directive with a template and the

@Component decorator is actually a @Directive decorator

extended with template oriented features.

Dependency Injection- Dependency Injection is a powerful

pattern for managing code dependencies. There are more

opportunities for component and object based to improve the

dependency injection.

Use of TypeScript- Type represents the different types of values

which are using in the programming languages and it checks the


3


________________________________________________________________________

validity of the supplied values before they are manipulated by your

programs.

Generics- TypeScript has generics which can be used in the front-

end development.

Lambdas and Arrow functions – In the TypeScript, lambdas/

arrow functions are available. The arrow function is additional

feature in typescript and it is also known as a lambda function.

Forms and Validations- Angular 2 forms and validations are an

important aspect of front-end development.

(3) What Are The Advantages of Angular 2?

Consider the following Advantages in Angular 2.

1. It is entirely component based.

2. Better change detection

3. Angular2 has better performance.

4. Angular2 has more powerful template system.

5. Angular2 provide simpler APIs, lazy loading and easier to

application debugging.

6. Angular2 much more testable

7. Angular2 provides to nested level components.

8. Ahead of Time compilation (AOT) improves rendering speed

9. Angular2 execute run more than two programs at the same

time.

10. Angular1 is controllers and $scope based but Angular2 is

component based.

11. The Angular2 structural directives syntax is changed like ng-

repeat is replaced with *ngFor etc.

12. In Angular2, local variables are defined using prefix (#) hash.

You can see the below *ngFor loop Example.


4


________________________________________________________________________

13. TypeScript can be used for developing Angular 2 applications

14. Better syntax and application structure.

The Angular 2 architecture diagram identifies the eight main

building blocks as.

1. Module

2. Component

3. Template

4. Outputs

5. Data Binding

6. Directive

7. Service

8. Dependency Injection

The Angular 2 framework consists of several libraries, the some of

them working as core and some are optional.

(4) Why We Used Angular 2?

It is entirely component based.

Better change detection

Angular2 has better performance.

Angular2 has more powerful template system.

Angular2 provide simpler APIs, lazy loading and easier to


Angular2 much more testable

Angular2 provides to nested level components.

Ahead of Time compilation (AOT) improves rendering speed

Angular2 execute run more than two programs at the same

time.

Angular1 is controllers and $scope based but Angular2 is

component based.


http://www.code-sample.com/2016/04/cannot-find-module-angular2-core.html

http://www.code-sample.com/2016/06/angular-2-components.html

http://www.code-sample.com/2016/06/angular-2-template-components.html

http://www.code-sample.com/2016/06/angular-2-outputs.html

http://www.code-sample.com/2016/06/angular-2-template-components.html

http://www.code-sample.com/2016/06/angular-2-directives-components.html

http://www.code-sample.com/2016/04/dependency-injection-in-angular-2.html

5


________________________________________________________________________

The Angular2 structural directives syntax is changed like ng-


In Angular2, local variables are defined using prefix (#) hash.


TypeScript can be used for developing Angular 2 applications

Better syntax and application structure

(5) Who Is Creator Of Angular?

Misko Hevery is a Creator and Father of AngularJs.

Misko also involved with Angular as well as AngularJs v1.x

and his current focus on the core components and the features of

the framework. Currently AngularJs 1.x and Angular 2+ are

developed by Google Inc.


6


________________________________________________________________________

(6) What Are the Fundamental Concepts

of Angular 2?


frameworks for developing mobile apps. It is also for desktop as

well as mobile applications. Now, Angular 4+ is development

phase you know very well and hopefully you love.

The Angular2 is focusing on data-binding,

extensible HTML and on application test-ability but it is still in

design and prototyping stage.

Angular framework helps us to build client applications

in HTML and JavaScript.

Angular 2 is so simpler, faster, modular and instrumented

design.

It is entirely component based and better changes detections.

Angular 2 targeting to modern browsers and it is developing

using ES6 (The ES6 is called ECMAScript version 6). It also

support to ECMAScript version 5(ES5).

You don’t worry about the versions of ECMAScript. The

compiler manages to the versioning related problems.

All the Angular 2 framework code is already being written in

ECMAScript 6.

The set of modern browsers are

1. Chrome

2. Firefox

3. Opera

4. Safari

5. IE Version10 and 11.

On mobiles, it is supporting to the list of Chrome

on Android, iOS 6+, Windows Phone 8+ and Fire-Fox mobile

and also trying to support to older versions of Android.


7


________________________________________________________________________

The Angular 2 is using Traceur compiler to generate the

nice ECMAScript 5/6 that runs everywhere you want to do.

Angular 2 team is working with Traceur compiler team to

provide the support to build some extensions and this set of

extensions called “ES 6 +A”.

(7) What is the difference between

AngularJs and Angular 2?

The core differences and many more advantages on Angular 2 vs.

Angular 1 as following,

1. It is entirely component based.

2. Better change detection

3. Angular2 has better performance.

4. Angular2 has more powerful template system.

5. Angular2 provide simpler APIs, lazy loading and easier to


6. Angular2 much more testable

7. Angular2 provides to nested level components.

8. Ahead of Time compilation (AOT) improves rendering speed

9. Angular2 execute run more than two programs at the same

time.

10. Angular1 is controllers and $scope based but Angular2 is

component based.

11. The Angular2 structural directives syntax is changed like ng-


12. In Angular2, local variables are defined using prefix (#) hash.


13. TypeScript can be used for developing Angular 2 applications

14. Better syntax and application structure.

There are more advantages over performance, template system,

application debugging, testing, components and nested level

components.


8


________________________________________________________________________

For Examples as,

Angular 1 Controller:-

var app = angular.module("userApp", []);

app.controller("productController", function($scope) {

$scope.users = [{ name: "Anil Singh", Age:30, department :"IT"

},

{ name: "Aradhya Singh", Age:3, department :"MGMT" }];

});

Angular 2 Components using TypeScript:-

Here the @Component annotation is used to add the metadata to

the class.

import {Component} from '@angular/core';

@Component({

selector: 'usersdata',

template: `<h3>{{users.name}}</h3>`

})

export class UsersComponent {

users = [{ name: "Anil Singh", Age:30, department :"IT" },

{ name: "Aradhya Singh", Age:3, department :"MGMT" }];

}

Bootstrapping in Angular 1 using ng-app,

angular.element(document).ready(function() {

angular.bootstrap(document, ['userApp']);


9


________________________________________________________________________

});

Bootstrapping in Angular 2 as,

import { bootstrap } from '@angular2/platform/browser';

import { UsersComponent } from './product.component';

bootstrap(UserComponent);

The Angular2 structural directives syntax is changed like ng-


For Example as,

Angular 1-

<div ng-repeat="user in users">

Name: {{user.name}}, Age : {{user.Age}}, Dept:

{{user.Department}}

</div>

Angular 2 -

<div *ngFor="let user of users">

Name: {{user.name}}, Age : {{user.Age}}, Dept:

{{user.Department}}

</div>


10


________________________________________________________________________

(8) What is ECMAScript?

The ECMAScript is a scripting language which is developed

by Ecma International Org.

Currently ECMAScript available in multiple versions that

are ES5 and ES6 and both of versions fully supported to

Chrome, Firefox, Opera, Safari, and IE etc.

(9) What is Traceur compiler?

The Traceur is a JavaScript compiler. The Traceur compiler is

very popular now days and uses to allow us to use the features

from the future. This compiler is fully supported to ES5, ES6 and

also to vNext.

The main goal of Traceur compiler is to inform to design of

new JavaScript features and wrote the programming code of new

efficient and good manners.

(10) What is lazy loading and How to enable

lazy loading in Angular 2?

Lazy Loading - Lazy loading enables us to load only the module

user is interacting and keep the rest to be loaded at runtime on

demand.

Lazy loading speeds up the application initial load time by

splitting the code into multiple bundles and loading them on

demand.

1. Each and every Angular2 application must have one main

module that is called “AppModule” and your code should be

splitted into various child modules based on your

applications.


11


________________________________________________________________________

Get Complete Book At Educreation Store

www.educreation.in


sample copy. not for distribution. · 2017-08-10 · iii angular 2 interview questions and answers...

Documents