Angular 2 Interview Questions and Answers With Typescript and Angular 4 i
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 ii
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 iii
iv
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. v
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. vi
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. vii
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? 7. What Is the Difference Between AngularJs and Angular 2? 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? 11. What Are the Securities Threats should we be Aware of in Angular 2 Applications? 12. How would you optimize the Angular 2 Application for better Performance? 13. What Is AOT compilation? Why Use in Angular 2? 14. What modern Browsers are supported in Angular 2? 15. Constructor Vs. ngoninit 13 16. When Will nginit be called? How would 14 6 7 10 11 11 12 13 viii
you make use of ngoninit ()? 17. What Are Components Lifecycle Hooks in Angular 2? 18. What Is the Best way to Declare and Access a Global Variable in Angular 2? 19. What Are Angular 2 Components? 22 20. What Are difference between Components and Directives? 21. How To passing data into Angular 2 components with @Input? 22. How To passing data into Angular 2 components with @Output? 23. What Is hidden property in Angular 2? 30 24. Don't Use hidden attribute with Angular 2. Here is why? 25. How do Components Communicate with Each Other in Angular 2? 26. What Are the difference between Renderer and ElementRef in angular 2? 27. Do notice that you should refrain from using ElementHref as it flagged with a security risk? 28. What Is the point of calling renderer.invokeelementmethod(rendererel, methodname)? 29. How do we display errors in a component view with Angular 2? 30. What Is Angular 2 Service? What are the features of Angular 2 Service? 31. What Are the Steps for Creating an Angular 2 Services? 16 19 24 26 28 31 32 35 36 36 37 41 42 ix
32. What Are the differences between Observables & Promises? 33. What Are the Steps for Calling an Angular 2 Service in the Angular 2 Component class? 34. How To CREATE an Injectable Service in Angular 2? Example? 35. How To Create & Call Angular 2 Services in Components? 36. How To Create a Singleton Service in Angular 2? 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? 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? 47. What Are Attribute Directives in Angular 2? 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? 43 43 43 43 43 55 64 65 70 x
52. Is it possible to have a multiple routeroutlet in the same template? 53. What Is Router-link Directive in Angular 2? 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? 58. What Are Differences of using template and templateurl in Angular 2 Component? 59. How To Use styleurls and styles in Angular 2? 60. What Is Dependency Injection (DI) in Angular 2? 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? 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? 70. What Is One Root Module? 90 71. What Are differences between Angular 2 Modules vs. JavaScript Modules? 71 72 76 77 79 81 82 86 90 xi
72. What Are Zones? What Is NgZone in Angular 2? 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? 76. What Is Cookies in Angular 2? How to Create and Use? 92 95 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? xii 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
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? 23. What Is Public, Private, Protected and Readonly Modifiers in TypeScript? 118 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? 33. What Is default export in TypeScript? Why we use it? 34. What Are differences between Modules vs. Namespace? 131 133 134 Angular 4 Questions and Answers 137 xiii
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? 5. What Is the Difference Between [ngfor] and [ngforof] in Angular 2? 144 145 xiv
1 My Blog - www.code-sample.com (1) What Is Angular 2? Angular 2 is a most popular and powerful JavaScript frameworks for developing mobile apps. It is also for desktop as well as mobile applications. Angular 2 is focusing on databinding, 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.
2 My Blog - www.code-sample.com 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 My Blog - www.code-sample.com validity of the supplied values before they are manipulated by your programs. Generics- TypeScript has generics which can be used in the frontend 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 ngrepeat is replaced with *ngfor etc. 12. In Angular2, local variables are defined using prefix (#) hash. You can see the below *ngfor loop Example.
4 My Blog - www.code-sample.com 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 application debugging. 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.
5 My Blog - www.code-sample.com The Angular2 structural directives syntax is changed like ngrepeat is replaced with *ngfor etc. In Angular2, local variables are defined using prefix (#) hash. You can see the below *ngfor loop Example. 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 My Blog - www.code-sample.com (6) What Are the Fundamental Concepts of Angular 2? Angular 2 is a most popular and powerful JavaScript 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 My Blog - www.code-sample.com 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 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 ngrepeat is replaced with *ngfor etc. 12. In Angular2, local variables are defined using prefix (#) hash. You can see the below *ngfor loop Example. 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 My Blog - www.code-sample.com 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 My Blog - www.code-sample.com }); 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 ngrepeat is replaced with *ngfor etc. 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 My Blog - www.code-sample.com (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 My Blog - www.code-sample.com Get Complete Book At Educreation Store www.educreation.in