Angular: Interview questions dataset

What is Routing Guard in Angular?

A) Angular's route guards are interfaces which can tell the router whether or not it should allow navigation to a requested route. They make this decision by looking for a true or false return value from a class which implements the given guard interface.

B) Angular's route guards are components that handle routing logic and navigation in an Angular application.

C) Angular's route guards are built-in directives that control the layout of routes in an Angular application.

D) Angular's route guards are CSS classes used to style the navigation links in an Angular application.

What is a module, and what does it contain?

A) An Angular module is a set of Angular basic building blocks like components, directives, services etc. An app can have more than one module.
B) An Angular module is a JavaScript library used to enhance the functionality of HTML elements.
C) An Angular module is a type of web component used to create complex UI elements.
D) An Angular module is a set of external styles and fonts used to customize the appearance of an app.

What are pipes?

A) A pipe takes in data as input and transforms it into a desired output.
B) A pipe is a type of data structure used to store and manipulate data in Angular applications.
C) A pipe is a component responsible for handling network requests and responses in Angular applications.
D) A pipe is a security feature in Angular that prevents unauthorized access to certain routes.

What is the minimum definition of a component?

A) The absolute minimal configuration for a @Component in Angular is a template.
B) A component must have a template, a selector, and a constructor.
C) A component must have a template and a constructor, but the selector is optional.
D) A component must have a template, a selector, and a styleUrls property.

What's the difference between an Angular component and a module?

A) Modules consist of one or more components. They do not control any HTML. Your modules declare which components can be used by components belonging to other modules, which classes will be injected by the dependency injector and which component gets bootstrapped. Modules allow you to manage your components to bring modularity to your app.
B) Components control views (html). They also communicate with other components and services to bring functionality to your app.
C) Components and modules are the same in Angular, and the terms can be used interchangeably.
D) Components and modules are both types of services in Angular that provide functionality to different parts of an app.

How would you run unit tests?

A) The Angular CLI downloads and installs everything you need to test an Angular application with the Jasmine test framework. The project you create with the CLI is immediately ready to test. Just run this one CLI command: ng test
B) Running unit tests in Angular requires installing third-party libraries manually. To run tests, use the npm test command.
C) Angular applications do not support unit testing.
D) To run unit tests in Angular, you need to manually write and configure the test environment.

What is a service, and when will you use it?

A) Angular services are singleton objects that share data and logic among application components, ensuring data persistence and a clear separation of concerns.
B) Angular services are components that handle the UI logic and user interactions in an Angular application.
C) Angular services are external JavaScript libraries that enhance the performance of Angular applications.
D) Angular services are used to style and design the user interface of an Angular application.

What is interpolation?

A) Interpolation is a technique used to transform data in Angular applications. It's similar to pipes but more powerful.
B) Interpolation is a special syntax that Angular converts into property binding. It's a convenient alternative to property binding. It is represented by double curly braces({{}}).
C) Interpolation is a form of routing in Angular that directs users to different views based on their interactions.
D) Interpolation is a way to include external libraries and code snippets in an Angular application.

What is a bootstrapping module?

A) Every application has at least one Angular module, the root module that you bootstrap to launch the application is called the bootstrapping module. It is commonly known as AppModule.
B) A bootstrapping module is a module that is used to initialize the application and handle routing logic. It is typically defined using the @BootstrappingModule decorator.
C) A bootstrapping module is a type of service that manages the data bootstrapping process in Angular applications.
D) A bootstrapping module is an Angular component responsible for rendering the initial user interface of the application.

What is the equivalent of ngShow and ngHide in Angular?

A) Just bind to the hidden property.
B) Use the ngIf directive with the condition inverted to achieve ngHide functionality. Use the ngIf directive with the condition directly to achieve ngShow functionality.
C) Use the [hidden] attribute with the condition inverted to achieve ngHide functionality. Use the [hidden] attribute with the condition directly to achieve ngShow functionality.
D) Use the [show] attribute with the condition inverted to achieve ngHide functionality. Use the [show] attribute with the condition directly to achieve ngShow functionality.

What are observables?

A) Observables are declarative, providing support for passing messages between publishers and subscribers in your application.
B) Observables are components used to manage the UI layout in Angular applications.
C) Observables are HTML tags used to display data in Angular applications.
D) Observables are utility functions for handling network requests in Angular applications.

What is a component? Why would you use it?

A) Components are the most basic building block of a UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.
B) Components are JavaScript libraries used to enhance the functionality of HTML elements.
C) Components are used to style and design the user interface in Angular applications.
D) Components are used to manage network requests and responses in Angular applications.

What is an observer?

A) Observer is an interface for a consumer of push-based notifications delivered by an Observable. It has the below structure,

interface Observer < T > {
    closed ? : boolean;next: (value: T) => void;error: (err: any) => void;complete: () => void;
}

B) Observer is a type of web component used to display data in Angular applications.
C) Observer is a service used to manage the business logic in Angular applications.
D) Observer is a JavaScript library used to manipulate the DOM in Angular applications

const observer = {
  next(value) {
    console.log('Observer got a next value: ' + value);
  },
  error(err) {
    console.error('Observer got an error: ' + err);
  },
  complete() {
    console.log('Observer got a complete notification');
  }
};

You have an HTML response I want to display. How do I do that?

A) The correct syntax is the following:
<div [innerHTML]=theHtmlString></div>
B) You can use the <ng-html> tag to display HTML responses in Angular applications.
C) You can use the <html-display> tag to render HTML responses in Angular applications.
D) You can directly bind the HTML response using {{theHtmlString}} in the template.

What is the difference between Structural and Attribute directives in Angular?

A) Structural directives are used to alter the DOM layout by removing and adding DOM elements. It is far better to change the structure of the view. Examples of Structural directives are NgFor and NgIf.
B) Attribute directives are used to define the styling of DOM elements in Angular applications.
C) Structural directives are used to define the styling of DOM elements in Angular applications.
D) Attribute directives are used to alter the DOM layout by removing and adding DOM elements in Angular applications.

How can I select an element in a component template?

A) You can get a handle to the DOM element via ElementRef by injecting it into your component's constructor:
constructor(myElement: ElementRef) { ... }
B) You can use the querySelector method provided by the Angular core library to select elements in a component template.
C) You can use the @ViewChild decorator to select elements in a component template.
D) You can use the getElementById method to select elements in a component template.

What is the difference between *ngIf vs [hidden]?

A) ngIf effectively removes its content from the DOM while [hidden] modifies the display property and only instructs the browser to not show the content but the DOM still contains it.
B) ngIf and [hidden] both completely remove the content from the DOM.
C) ngIf and [hidden] both modify the display property of the content in the DOM.
D) ngIf and [hidden] have the same behaviour and can be used interchangeably.

What are the differences between AngularJS (angular 1.x) and Angular (Angular 2.x and beyond)?

A) Angular and AngularJS are different frameworks with the same name.
Angular is more ready for the current state of web standards and the future state of the web (ES6/7, immutability, components, shadow DOM, service workers, mobile compatibility, modules, TypeScript, and more).
Angular killed many main features in AngularJS like controllers, $scope, directives (replaced with @Component annotations), the module definition, and much more, even simple things like ng-repeat have not remained the same as it was.
B) Angular and AngularJS are different names for the same framework.
Angular is a complete rewrite of AngularJS, maintaining the same core concepts and features.
C) Angular is a simplified version of AngularJS.
Angular and AngularJS are completely unrelated frameworks with no similarities.
D) AngularJS is a newer version of Angular.
Angular and AngularJS are interchangeable terms for the same framework.

What are some differences between Angular 2 and 4?

A) Improvements in AOT, allowing the else clause in ngIf, support for TypeScript 2.1, breaking out the animations package.
B) Angular 4 completely replaces Angular 2 and does not have any similarities with it.
C) Angular 4 is a downgrade from Angular 2 in terms of performance and features.
D) Angular 4 introduces a completely new architecture different from Angular 2.

What is the difference between @Component and @Directive in Angular?

A) Directives add behaviour to an existing DOM element or an existing component instance. A component, rather than adding/modifying behaviour, actually creates its view (hierarchy of DOM elements) with attached behaviour.
B) @Component and @Directive are interchangeable and can be used in the same context. Both @Component and @Directive modify the appearance of DOM elements.
C) @Component is used for adding behavior to existing DOM elements while @Directive is used to create new components. Both @Component and @Directive creates their views.
D) @Component creates new components while @Directive adds behavior to existing DOM elements. Both @Component and @Directive have the same functionality.

How would you protect a component being activated through the router?

A) The Angular router ships with a feature called guards. These provide us with ways to control the flow of our application.
B) To protect a component, you can use the @Protect directive provided by Angular.
Create a service named canActivate that checks the user's access level and returns true or false. Use the @Protect directive in the component's template to restrict access.
C) You cannot protect a component from being activated through the router.
Angular automatically protects all components from unauthorized access.
D) To protect a component, you can use the ng-protect attribute in the component's selector. Create a service named canActivate that checks the user's access level and returns true or false. Use the ng-protect attribute in the component's template to restrict access.

The overall process for protecting Angular routes:
1. Create a guard service: ng g guard auth
2. Create canActivate() or canActivateChild() methods
3. Use the guard when defining routes

  const routes: Routes = [
       {
         path: 'account',
         canActivate: [AuthGuard]
       }
     ];

Some other available guards:
CanActivate: Check if a user has access
CanActivateChild: Check if a user has access to any of the child routes
CanDeactivate: Can a user leave a page? For example, they haven't finished editing a post
Resolve: Grab data before the route is instantiated
CanLoad: Check to see if we can load the route's assets

What is the difference between declarations, providers and import in NgModule?

A) Declarations are used to specify the components, directives, and pipes that belong to the module.
B) Providers are used to specify the services that the module contributes to the global collection of services.
C) Import is used to import other modules whose exports are needed by the current module.
D) All of the above.

What's new in Angular 6 and why shall we upgrade to it?

A) Angular 6 introduces a new renderer called Ivy, which results in improved build and runtime performance.
B) Angular 6 introduces a new toolchain for building Angular applications, resulting in faster builds.
C) Angular 6 adds support for the Bazel build system.
D) All of the above.

Why would you use a spy in a test?

A) To mock asynchronous operations.
B) To simulate user interactions.
C) To track function calls and arguments.
D) To optimize performance in tests.
E) To generate random data for testing.

What is TestBed?

A) A testing utility for Angular components.
B) A module used for E2E testing.
C) A package manager for Angular apps.
D) A tool for optimizing Angular performance.
E) A component for displaying test results.

What is Protractor?

A) A data binding syntax in Angular templates.
B) A tool for generating Angular forms.
C) An E2E testing framework for Angular apps.
D) A module for managing HTTP requests in Angular.
E) A utility for managing Angular state.

What is the point of calling 'renderer.invokeElementMethod(rendererEl, methodName)'?

A) To directly manipulate the DOM without Angular's change detection.
B) To execute a method on a DOM element using Angular's renderer.
C) To override the default rendering behavior of Angular.
D) To invoke a service method from a component.
E) To dynamically load components.

How would you control the size of an element on the resize of the window in a component?

A) By using the CSS 'max-width' and 'max-height' properties.
B) By using the 'ng-style' directive.
C) By using the 'window.onresize' event in JavaScript.
D) By using the 'ngClass' directive.
E) By using the 'resize' event and updating a property in the component.

What is AOT?

A) All Our Troubles.
B) Ahead-of-Time compilation.
C) Astonishing Output Transformation.
D) Angular Object Templates.
E) Annotated Object Types.

What is Redux and how does it relate to an Angular app?

A) Redux is a state management library for JavaScript applications and can be used with Angular.
B) Redux is an Angular module used for HTTP requests.
C) Redux is a new programming language for building Angular apps.
D) Redux is an alternative to Angular's template syntax.
E) Redux is a build tool for optimizing Angular apps.

What is the use of codelyzer?

A) Codelyzer is a tool for generating documentation from TypeScript files.
B) Codelyzer is a linter for Angular applications.
C) Codelyzer is a testing framework for Angular apps.
D) Codelyzer is a package manager for Angular applications.
E) Codelyzer is a visualization tool for profiling Angular applications.

How to inject the base href?

A) Using the @Injectable decorator.
B) Using the baseHref property in the RouterModule configuration.
C) Using the constructor of a component.
D) Using the ngOnInit lifecycle hook.
E) Injecting the base href is not supported in Angular.

How to bundle an Angular app for production?

A) By using the 'ng package' command.
B) By manually concatenating and minifying all source files.
C) By using the 'webpack' command.
D) By using the 'ng build' command with the '--prod' flag.
E) By using the 'ng compile' command with the '--prod' flag.

When would you use eager module loading?

A) When you want to load modules lazily for better performance.
B) When you want to load a module along with the main application module.
C) When you want to delay the loading of a module until it's explicitly requested.
D) When you want to load a module only in development mode.
E) None of the above.

What are the Core Dependencies of Angular 7?

A) Angular CLI, RxJS, TypeScript.
B) Angular Router, NgZone, Webpack.
C) Angular Material, Angular Forms, Angular HttpClient.
D) Zone.js, Angular Compiler, Angular Animation.
E) None of the above.

Why Incremental DOM Has Low Memory Footprint?

A) It uses a virtual DOM that reduces memory consumption.
B) It only updates the parts of the DOM that have changed, minimizing memory usage.
C) It avoids using JavaScript for DOM manipulation, saving memory.
D) It loads the DOM elements incrementally, reducing the initial memory load.
E) None of the above.

What are the ways to control AOT compilation?

A) Using the '--aot' flag with the Angular CLI.
B) Configuring the 'angular.json' file to enable AOT.
C) Including the '@angular/aot' module in the app module.
D) Enabling AOT through the browser's developer console.
E) None of the above.

What is Angular Universal?

A) It's a framework for building universal JavaScript applications.
B) It's a module used for creating custom directives in Angular.
C) It's a tool that performs static analysis of Angular code.
D) It's a server-side rendering solution for Angular apps.
E) None of the above.

Do I need a Routing Module always?

A) Yes, a Routing Module is required for any Angular application.
B) No, a routing Module is only necessary for single-page applications.
C) It depends on whether your application uses lazy loading.
D) It depends on whether your application has multiple components.
E) None of the above.

What is the purpose of the Wildcard route?

A) It matches any URL and redirects to the default route.
B) It's used for handling authentication-related routing.
C) It's a route that can only be accessed by authorized users.
D) It's used for redirecting broken links to a specific page.
E) None of the above.

What is an activated route?

A) It's a service used to activate Angular modules.
B) It's a class that represents the current activated route.
C) It's a feature in Angular that enables route animations.
D) It's a guard used to prevent unauthorized access to routes.
E) None of the above.

What is Routing Guard in Angular?

A) A module that guards against routing errors.
B) A service used for routing animations.
C) A guard that prevents unauthorized access to routes.
D) A component that handles routing in Angular.
E) None of the above.

What is router state?

A) The current state of the Angular router.
B) A module that manages the routing state in Angular.
C) The state of the application's navigation stack.
D) A service for tracking route changes in Angular.
E) None of the above.

What is Reactive Programming and how to use one with Angular?

A) A design pattern for handling UI events reactively.
B) A programming paradigm focused on mutable states.
C) A way to manage data using asynchronous streams.
D) A technique to eliminate callback functions in Angular.
E) None of the above.

Why should ngOnInit be used, if we already have a constructor?

A) ngOnInit is more efficient than the constructor.
B) ngOnInit is a newer alternative to the constructor.
C) ngOnInit is better for performing asynchronous tasks.
D) ngOnInit is specifically designed for Angular lifecycle events.
E) None of the above.

What are dynamic components?

A) Components that are dynamically loaded based on user interactions.
B) Components that change their appearance dynamically.
C) Components created programmatically at runtime.
D) Components that can be styled using dynamic CSS.
E) None of the above.

Explain how custom elements work internally.

A) Custom elements use shadow DOM to encapsulate their styles.
B) Custom elements use Angular services for internal functionality.
C) Custom elements leverage the browser's native web component APIs.
D) Custom elements rely on Angular change detection for updates.
E) None of the above.

What are custom elements?

A) Angular components with custom styling.
B) HTML tags registered by the application for reusability.
C) Elements created using custom JavaScript libraries.
D) Components created with custom decorators in Angular.
E) None of the above.

What are the utility functions provided by RxJS?

A) map, reduce, filter
B) subscribe, emit, pipe
C) merge, switchMap, catchError
D) transform, forEach, delay
E) None of the above.

How do you perform error handling in observables?

A) Using try-catch blocks in the observable chain.
B) Using the catchError operator to handle errors.
C) Using the onError method of the observable.
D) Throwing exceptions from the observable.
E) None of the above.

What is multicasting?

A) A technique to share observables among multiple subscribers.
B) A way to broadcast events to multiple components.
C) A method to multicast data over a network.
D) A feature to improve the performance of observables.
E) None of the above.

What is the difference between promise and observable?

A) Promises support multiple values, while observables support a single value.
B) Promises are asynchronous, while observables are synchronous.
C) Promises are cancellable, while observables are not.
D) Promises are lazy, while observables are eager.
E) None of the above.

Can you explain the difference between Promise and Observable in Angular? In what scenario can we use each case?

A) Promises are better for handling multiple asynchronous operations, while observables are ideal for single operations.
B) Promises are ideal for handling single asynchronous operations, while observables are better for multiple operations.
C) Promises are cancellable, while observables are not.
D) Observables are cancellable, while promises are not.
E) None of the above.

What is subscribing?

A) A way to create new observables.
B) A method used to trigger an observable's execution.
C) A process of converting observables to promises.
D) A technique to handle asynchronous operations using callbacks.
E) None of the above.

How do you perform Error handling for HttpClient?

A) Using the catchError operator.
B) Using try-catch blocks around HttpClient calls.
C) Using the handleError method of the HttpClient service.
D) Throwing exceptions directly from HttpClient calls.
E) None of the above.

What is the difference between @Component and @Directive in Angular?

A) @Component is used for creating custom elements, while @Directive is used for defining the structure of a component.
B) @Component is used for creating components with templates, while @Directive is used for creating attribute or structural directives.
C) @Component is used for creating directives, while @Directive is used for creating components.
D) @Component is used for creating services, while @Directive is used for creating modules.
E) None of the above.

Explain the difference between 'Constructor' and 'ngOnInit'.

A) Both are lifecycle hooks that serve the same purpose.
B) Constructor is called before ngOnInit.
C) ngOnInit is called before the constructor.
D) Constructor is used for dependency injection, while ngOnInit is used for initialization logic.
E) None of the above.