└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # 100+ Angular 2, 4 and 5 Interview Questions And Answers 2 | 3 | This is a collection of Angular 2 interview questions I've found online, along with (hopefully) correct answers for most of them. Feel free to contribute / send corrections. 4 | I'm adding in some Angular 4 and 5 questions now. 5 | 6 | Note: "PA" stands for Possible Answer (one of many valid ones). 7 | 8 | ## Template Syntax Questions 9 | 10 | **What is a template reference variable, and how would you use it?** 11 | 12 | A: A variable (defined using a #) in a component template, which can be referenced in other parts of the template. For example, a template variable for a form can then be referenced by other elements of the form. 13 | 14 | **What are the possible ways to bind component properties to an associated template?** 15 | 16 | A: Interpolation binding, one way binding, two way binding. 17 | 18 | **What's the difference between binding a value with or without square brackets, i.e.: `` vs ``?** 19 | 20 | A: The square brackets will cause "something" to be evaluated as an expression, as opposed to just be passed in as a literal string. 21 | 22 | **What does the ngFor template syntax look like?** 23 | 24 | A: example:`` 25 | 26 | **What does the pipe syntax look like in Angular templates?** 27 | 28 | A: example: `
{{ value | my-pipe : option }}
` 29 | 30 | **What does an interpolated string look like in a template?** 31 | 32 | A: example: `
...
` 33 | 34 | **What is ``?** 35 | 36 | A: A grouping element that does not interfere with styles or layout (it's analogous to curly braces in JavaScript). 37 | 38 | 39 | **What is ``?** 40 | 41 | A: It's an Angular element for rendering HTML when using structural directives. The ng-template itself does not render to anything but a comment directly. 42 | 43 | 44 | ## Component/Directive Questions 45 | 46 | **What is the minimum definition of a component?** 47 | 48 | A: A class with a Component decorator specifying a template. 49 | 50 | **What is the difference between a component and a template?** 51 | 52 | A: A component is a directive with a template (representing a view). 53 | 54 | **What are different kinds of directives supported in Angular 2?** 55 | 56 | A: Structural, component, and attribute directives. 57 | 58 | **How do components communicate with each other?** 59 | 60 | A: Various ways - for example: Input/Output properties, services, ViewChild/ViewContent. 61 | 62 | **How do you create two way data binding in Angular 2.0?** 63 | 64 | A: By using the two-way binding syntax [()] (along with ngModel, if you're doing this in the context of a form control element). 65 | 66 | **How would you create a component to display error messages throughout your application?** 67 | 68 | A: Implement your own ErrorHandler and configure it in the list of providers for the modules you want it used in. 69 | 70 | **How would you support logging in your Angular app?** 71 | 72 | PA: One way would be to use angular2-logger, which is a package inspired by log4j. 73 | 74 | **How would you use the ngClass directive?** 75 | 76 | A: For example: `
...
` 77 | 78 | **How do you resolve a template URL relative to a Component class?** 79 | 80 | A: By specifying the moduleId to be module.id in the Component decorator. (Note: while this is still needed when using SystemJS, it is not necessary anymore when using Webpack module bundler for Angular 2 projects.) 81 | 82 | **What are dynamic components?** 83 | 84 | A: Components that are added at runtime (i.e. not fixed). For example, an ad banner component that is determined at runtime. 85 | 86 | **What is ComponentFactoryResolver used for?** 87 | 88 | A: A class that is used to create dynamic components - it produces a ComponentFactory for a particular component which can then be loaded into view via a createComponent on ViewContainerRef. 89 | 90 | 91 | ## NgModules Questions: 92 | 93 | **What is the purpose of NgModule?** 94 | 95 | A: It's to give Angular information on a particular module’s contents, through decorator properties like: declarations, imports, exports, providers, etc. 96 | 97 | **How do you decide to create a new NgModule?** 98 | 99 | A: Typically for a nontrivial feature in an application, that will involve a collection of related components and services. 100 | 101 | **What are the attributes that you can define in an NgModule annotation?** 102 | 103 | A: Declarations, imports, exports, providers, bootstrap 104 | 105 | **What is the difference between a module's forRoot() and forChild() methods and why do you need it?** 106 | 107 | A: forRoot and forChild are conventional names for methods that deliver different import values to root and feature modules. 108 | 109 | **What would you have in a shared module?** 110 | 111 | A: Common components, directives, and pipes used in other modules in your application. 112 | 113 | **What would you not put shared module?** 114 | 115 | A: Services that should not have multiple instances created for the application. 116 | 117 | **What module would you put a singleton service whose instance will be shared throughout the application (e.g. ExceptionService andLoggerService)?** 118 | 119 | A: Root Module 120 | 121 | **What is the purpose of exports in an NgModule?** 122 | 123 | A: Provide components, directives, pipes to other modules for their usage. 124 | 125 | **Why is it (potentially) bad if SharedModule provides a service to a lazy loaded module?** 126 | 127 | A: You will have two instances of the service in your application, which is often not what you want. 128 | 129 | **Can we import a module twice?** 130 | 131 | A: Yes, and the latest import will be what is used. 132 | 133 | **Can you re-export classes and modules?** 134 | 135 | A: Yes. 136 | 137 | **What kind of classes can you import in an angular module?** 138 | 139 | A: Components, pipes, directives 140 | 141 | **What is the providers property used for in a module's NgModule metadata?** 142 | 143 | A: To provide a list of service cerators that this module contributes to the global collection of services. 144 | 145 | **What is bootstrapping in Angular?** 146 | 147 | A: The mechanism that launches the application in Angular, loading the root module (typically called AppModule) which loads one or more bootstrapped components into the application's DOM. 148 | 149 | ## Services Questions: 150 | 151 | **What is the use case of services?** 152 | 153 | A: One very common use case is providing data to components, often by fetching it from a server. Though there’s no real definition of service from Angular point of view – it could do almost anything (e.g., logging is another common use case, among many). 154 | 155 | **How are the services injected to your application?** 156 | 157 | A: Via Angular’s DI (Dependency Injection) mechanism 158 | 159 | **Why is it a bad idea to create a new service in a component like the one below?** 160 | 161 | `let service = new DataService();` 162 | 163 | A: The object may not be created with its needed dependencies. 164 | 165 | **How to make sure that a single instance of a service will be used in an entire application?** 166 | 167 | A: Provide it in the root module. 168 | 169 | **Why do we need provider aliases? And how do you create one?** 170 | 171 | A: To substitute an alternative implementation for a provider. Can create like so: `{ provide: LoggerService, useClass: DateLoggerService }` 172 | 173 | 174 | ## Lifecycle Hooks Questions: 175 | 176 | **What is the possible order of lifecycle hooks in Angular?** 177 | 178 | A: ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy. 179 | 180 | **When will ngOnInit be called?** 181 | 182 | A: Called once, after the first ngOnChanges. 183 | 184 | **How would you make use of onNgInit()?** 185 | 186 | PA: Fetch initial component data (e.g. from server). 187 | 188 | **What would you consider a thing you should be careful doing on onNgInit()?** 189 | 190 | A: You cannot expect the component's children's data-bound properties to have been checked at this point. 191 | 192 | **What is the difference between onNgInit() and constructor() of a component?** 193 | 194 | A: A directive’s data-bound input properties are not set until after construction, so that’s one difference. 195 | 196 | ## Pipes Questions: 197 | 198 | **What is a pure pipe?** 199 | 200 | A: A pipe that is only executed when Angular detects a pure change to the input value (e.g. new primitive object or new object reference). 201 | 202 | **What is an impure pipe?** 203 | 204 | A: A pipe that is executed during every component change detection cycle (i.e., often – every keystroke, mouse move). 205 | 206 | **What is an async pipe?** 207 | 208 | A: An impure pipe that accepts a promise or observable as input and eventually returns emitted values. 209 | 210 | **What kind of data can be used with async pipe?** 211 | 212 | A: Stateful, asynchronous 213 | 214 | **What types of pipes are supported in Angular 2?** 215 | 216 | A: Pure and impure pipes (async pipes are a kind of impure pipe). 217 | 218 | ## Routing Questions: 219 | 220 | **What is the difference between RouterModule.forRoot() vs RouterModule.forChild()? Why is it important?** 221 | 222 | A: forRoot is a convention for configuring app-wide Router service with routes, whereas forChild is for configuring the routes of lazy-loaded modules. 223 | 224 | **How does loadChildren property work?** 225 | 226 | A: The Router calls it to dynamically load lazy loaded modules for particular routes. 227 | 228 | **When does a lazy loaded module get loaded?** 229 | 230 | A: When its related route is first requested. 231 | 232 | **How would you use a Route Guard?** 233 | 234 | A: You would implement CanActivate or CanDeactivate and specify that guard class in the route path you’re guarding. 235 | 236 | **What are some different types of RouteGuards?** 237 | 238 | A: CanActivate, CanDeactivate, CanLoad, Resolve, etc. 239 | 240 | **How would you intercept 404 errors in Angular 2?** 241 | 242 | A: Can provide a final wildcard path like so: { path: ‘**’, component: PageNotFoundComponent } 243 | 244 | **This link doesn't work. Why? How do I fix it?** 245 | `
` 246 | 247 | A: `{{product.id}}` 248 | 249 | 250 | **What do route guards return?** 251 | 252 | A: boolean or a Promise/Observable resolving to boolean value. 253 | 254 | **What is `` for?** 255 | 256 | A: Specifies the place where routes are mounted in the application. 257 | 258 | 259 | ## Styling Questions: 260 | 261 | **How would you select a custom component to style it?** 262 | 263 | A: Using the `:host` pseudo-class selector in your component's styles. 264 | 265 | **How do you reference the host of a component?** 266 | 267 | A: Let DI inject an ElementRef into the constructor of your component. 268 | 269 | **What pseudo-class selector targets styles in the element that hosts the component?** 270 | 271 | A: The :host pseudo class selector. 272 | 273 | **How would you select all the child components' elements?** 274 | 275 | A: With the @ViewChildren decorator, like for example: 276 | 277 | `@ViewChildren(ChildDirective) viewChildren: QueryList;` 278 | 279 | **How would you select a css class in any ancestor of the component host element, all the way up to the document root?** 280 | 281 | A: Using the :host-context() pseudo-class selector. 282 | 283 | **What selector force a style down through the child component tree into all the child component views?** 284 | 285 | A: Use the /deep/ selector along with :host pseudo-class selector. 286 | 287 | **What does :host-context() pseudo-class selector target?** 288 | 289 | A: The :host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root. 290 | 291 | **What does the following css do?** 292 | `:host-context(.theme-light) h2 { 293 | background-color: red; 294 | }` 295 | 296 | A: Will change this component’s background-color to red if the context of the host has the .theme-light class applied. 297 | 298 | 299 | ## Forms Questions: 300 | 301 | **When do you use template driven vs model driven forms? Why?** 302 | 303 | A: Template driven forms make more sense for simpler forms, at least in terms of validation. Model driven or Reactive forms lend themselves to easier testing of the validation logic, so if that’s complex, Reactive forms make more sense. There’s also the issue of asynchronous (template driven forms) vs. synchronous (model driven). 304 | 305 | **How do you submit a form?** 306 | 307 | PA: use the ngSubmit event binding like so: `
` 308 | 309 | **What's the difference between NgForm, FormGroup, and FormControl? How do they work together?** 310 | 311 | A: FormGroup tracks the value and validity state of a group of AbstractControl instances. FormControl does the same for an individual control. NgForm is a directive that Angular automatically attaches to each `` tag. It has its own ‘valid’ property which is true only if every contained control is valid. 312 | 313 | **What's the advantage of using FormBuilder?** 314 | 315 | A: Reduces repetition and clutter by handling details of control creation for you. 316 | 317 | **How do you add form validation to a form built with FormBuilder?** 318 | 319 | A: pass in Validator objects along with the FormControl objects... 320 | 321 | **What's the difference between dirty, touched, and pristine on a form element?** 322 | 323 | A: Dirty means it contains user data, touched means the user has at least done something with a particular control (perhaps just literally ‘touched’ it by giving it focus?), and pristine means the control has not been touched at all by the user. 324 | 325 | **How can you access validation errors in the template to display error messages?** 326 | 327 | PA: Use formErrors 328 | 329 | **What is async validation and how is it done?** 330 | 331 | A: Verifying some field using some asynchronous call (perhaps a server call)… return a `Promise` from your validator. When creating a FormControl object, you can pass an asynchronous validator into the constructor (e.g. `new FormControl(‘value’, syncValidator, asyncValidator)`). 332 | 333 | 334 | **What is patchValue used for?** 335 | 336 | A: Setting a form value (one or more fields with an object) bypassing validation. 337 | 338 | ## Observables Questions 339 | 340 | **What are observables?** 341 | 342 | A: They provide a declarative way of message passing between publishers and subscribers in an application. They typically produce one or more values over time, which are subscribed to by observers. They provide some advantages over promises. 343 | 344 | **What is RxJS?** 345 | 346 | A: RxJS stands for Reactive Extensions for JavaScript, and is a reactive programming library centered around observables and operators making it easier to write complex asynchronous code. 347 | 348 | **How do observables differ from promises?** 349 | 350 | A: Observables are declarative; promises execute immediately upon creation. Observables can provide many values, whereas promises provide one value. Observables are cancellable, whereas promiess aren't. Error handling also differs between them. 351 | 352 | **What are some advantages to using observables?** 353 | 354 | A: Observables are cancellable; they come with powerful transformative functions (especially when using RxJS) to make asynchronous coding easier. 355 | 356 | **Does an observable compute anything if it has no calls to subscribe?** 357 | 358 | A: No, it will not. 359 | 360 | ## Animations Questions 361 | 362 | **How do you define transition between two states?** 363 | 364 | PA: Using the transition and animate function in an animations block like so: `animations: [transition('inactive => active'), animate('100 ms ease-in')]` 365 | 366 | **How do you define a wildcare state?** 367 | 368 | A: Using the asterisk - example: `transition('* => active'), animate('100ms ease-in'))` 369 | 370 | ## Architecture / Framework Questions: 371 | 372 | **What are some of the top level building blocks of the Angular framework?** 373 | 374 | A: Services, Templates, Modules, Components, Providers, etc. 375 | 376 | **What is AOT?** 377 | 378 | A: Ahead of time compilation. 379 | 380 | **What is Reactive programming and how does it relate to Angular?** 381 | 382 | A: It's an "asynchronous programming paradigm concerned with data streams and the propagation of change." 383 | 384 | **What are some differences between Angular 2 and 4?** 385 | 386 | A: Improvements in AOT, allowing the "else" clause in ngIf, support for TypeScript 2.1, breaking out the animations package... 387 | 388 | **What are some security related features built in to the Angular framework?** 389 | 390 | A: Sanitation, to prevent cross site scripting. Built-in support in the HttpClient to prevent cross-site request forgery. 391 | 392 | **How can you bypass sanitation in Angular and why would you do so?** 393 | 394 | A: To inject known safe code, you can bypass sanitation (e.g. to embed an iframe). 395 | 396 | **What is a good use case for ngrx/store?** 397 | 398 | A: Complex application state management requirements, involving asynchronous requests to update state. 399 | 400 | **What is Redux and how does it relate to an Angular app?** 401 | 402 | A: It's a way to manage application state and improve maintainability of asynchronicity in your application by providing a single source of truth for the application state, and a unidirectional flow of data change in the application. ngrx/store is one implementation of Redux principles. 403 | 404 | **What would be a good use case for having your own routing module?** 405 | 406 | A: An application whose requirements imply having many routes, and potentially route guards, and child routes. 407 | 408 | **Where would you configure TypeScript specific compiler options for your project?** 409 | 410 | A: In the tsconfig.json file.A 411 | 412 | **What is the tslint.json file used for?** 413 | 414 | A: Linting the TypeScript code (making sure it conforms to certain standards / conventions). 415 | 416 | **What are some changes introduced in Angular 4?** 417 | 418 | A: Introduction of the else clause in ngIf; splitting out of animation package; support for TypeScript 2.1; improvements around AOT. 419 | 420 | **What are some changes introduced in Angular 5?** 421 | 422 | A: New version of HttpClient; build optimizer; Universal State Transfer API (allows sharing state of app between server and client easily); support for TypeScript 2.3. 423 | 424 | ## API Questions: 425 | 426 | **What does this line do?** 427 | `@HostBinding('[class.valid]') isValid;` 428 | 429 | A: Applies the css class ‘valid’ to whatever is using this directive conditionally based on the value of isValid. 430 | 431 | **Why would you use renderer methods instead of using native element methods?** 432 | 433 | A: Potentially if you’re rendering to something besides the browser, e.g. rendering native elements on a mobile device, or server side rendering (?). 434 | 435 | **What is the point of calling renderer.invokeElementMethod(rendererEl, methodName)?** 436 | 437 | A: To invoke a method on a particular element but avoid direct DOM access (so we don’t tie our code just to the browser). 438 | 439 | **How would you control size of an element on resize of the window in a component?** 440 | 441 | A: 442 | `@HostListener('window:resize', ['$event']) 443 | onResize(event: any) { 444 | this.calculateBodyHeight(); 445 | }` 446 | 447 | **What would be a good use for NgZone service?** 448 | 449 | A: Running an asynchronous process outside of Angular change detection. 450 | 451 | **How would you protect a component being activated through the router?** 452 | 453 | A: Route Guards 454 | 455 | **How would you insert an embedded view from a prepared TemplateRef?** 456 | 457 | PA: `viewContainerRef.createEmbeddedView(templateRef); 458 | 459 | ## Testing Questions 460 | 461 | 462 | **What is Protractor?** 463 | 464 | A: E2E (end-to-end) testing framework. 465 | 466 | **What is Karma?** 467 | 468 | A: Unit test testing library. 469 | 470 | **What are spec files?** 471 | 472 | A: Jasmine unit test files. 473 | 474 | **What is TestBed?** 475 | 476 | A: Class to create testable component fixtures. 477 | 478 | **What does detectChanges to in Angular jasmine tests?** 479 | 480 | A: propagates changes to the DOM by running Angular change detection. 481 | 482 | **Why would you use a spy in a test?** 483 | 484 | A: To verify a particular value was returned or a method was called, for example when calling a service. 485 | 486 | 487 | ` 488 | 489 | --------------------------------------------------------------------------------