Learning Path for Programming Journey. Start Now

Angular Interview Questions (Frequently Asked)

Angular Interview Questions

Hackr.io.

Spread the Knowledge

Preparing for getting your dream job of an Angular developer? Or, simply planning to switch to being an Angular developer? In this article, we’re going to look at some of the frequently asked questions that you can expect to be coming your way during an Angular interview for the role of an Angular developer.
In addition to these concept-based questions, there will be a requirement for a (or maybe multiple) coding test(s). So, keep up your programming practice for the interview. If you wish to hone your Angular development skills further, here are some of the best Angular tutorials that can help you out.

So, ready to see how well your preparation is going? Without further ado, here we present you with some important Angular interview questions that you might expect in your interview:

Question: Define the ng-content Directive?
Answer: Conventional HTML elements have some content between the tags. For instance:

<p>Put your paragraph here</p>

Now consider the following example of having custom text between angular tags:

<app-work>This won’t work like HTML until you use ng-content Directive</app-work>

However, doing so won’t work the way it worked for HTML elements. In order to make it work just like the HTML example mentioned above, we need to use the ng-content Directive. Moreover, it is helpful in building reusable components.

Know more about the ng-content directive.

Question: Demonstrate navigating between different routes in an Angular application.
Answer: Following code demonstrates how to navigate between different routes in an Angular app dubbed “Some Search App”:

import {Router} from "@angular/router";
.
.
.
@Component({
  selector: 'app-header',
  template: `
<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" (click)="goHome()">Some Search App</a> 
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" (click)="goHome()">Home</a> 
    </li>
    <li class="nav-item">
      <a class="nav-link" (click)="goSearch()">Search</a> 
    </li>
  </ul>
</nav>
 `
})
class HeaderComponent {
  constructor(private router: Router) {} 
  goHome() {
    this.router.navigate(['']); 
  }
  goSearch() {
    this.router.navigate(['search']); 
  }
}

Question: Enumerate some salient features of Angular 7.
Answer: Unlike the previous versions of Angular, the 7th major release comes with splitting in @angular/core. This is done in order to reduce the size of the same. Typically, not each and every module is required by an Angular developer. Therefore, in Angular 7 each split of the @angular/core will have no more than 418 modules.

Also, Angular 7 brings drag-and-drop and virtual scrolling into play. The latter enables loading as well as unloading elements from the DOM. For virtual scrolling, the latest version of Angular comes with the <cdk-virtual-scroll-viewport> package. Furthermore, Angular 7 comes with a new and enhanced version of the ng-compiler.

Question: Explain Angular Authentication and Authorization.
Answer: The user login credentials are passed to an authenticate API, which is present on the server. Post server-side validation of the credentials, a JWT (JSON Web Token) is returned. The JWT has information or attributes regarding the current user. The user is then identified with the given JWT. This is called authentication.

Post logging-in successfully, different users have a different level of access. While some may access everything, access for others might be restricted to only some resources. The level of access is authorization.

Here is a detailed post on Angular 7 – JWT Authentication Example & Tutorial: http://jasonwatmore.com/post/2018/11/16/angular-7-jwt-authentication-example-tutorial

Question: How to generate a class in Angular 7 using CLI?
Answer:

ng generate class Dummy [options]

This will generate a class named Dummy.

Question: How do Observables differ from Promises?
Answer: As soon as a promise is made, the execution takes place. However, this is not the case with observables because they are lazy. This means that nothing happens until a subscription is made. While promises handle a single event, observable is a stream that allows passing of more than one event. A callback is made for each event in an observable.

Question: Observe the following image:

Angular Interview Questions-1
What should replace the “?”?
Answer: Directives. The image represents the types of directives in Angular; Attribute, structural, and custom.

Question: What are the building blocks of Angular?
Answer: There are essentially 9 building blocks of an Angular application. These are:

  1. Components A component controls one or more views. Each view is some specific section of the screen. Every Angular application has at least one component, known as the root component. It is bootstrapped inside the main module, known as the root module. A component contains application logic defined inside a class. This class is responsible for interacting with the view via an API of properties and methods.
  2. Data Binding The mechanism by which parts of a template coordinates with parts of a component is known as data binding. In order to let Angular know how to connect both sides (template and its component), the binding markup is added to the template HTML.
  3. Dependency Injection (DI) Angular makes use of DI to provide required dependencies to new components. Typically, dependencies required by a component are services. A component’s constructor parameters tell Angular about the services that a component requires. So, a dependency injection offers a way to supply fully-formed dependencies required by a new instance of a class.
  4. Directives The templates used by Angular are dynamic in nature. Directives are responsible for instructing Angular about how to transform the DOM when rendering a template. Actually, components are directives with a template. Other types of directives are attribute and structural directives.
  5. Metadata In order to let Angular know how to process a class, metadata is attached to the class. For doing so decorators are used.
  6. Modules Also known as NgModules, a module is an organized block of code with a specific set of capabilities. It has a specific application domain or a workflow. Like components, any Angular application has at least one module. This is known as the root module. Typically, an Angular application has several modules.
  7. Routing An Angular router is responsible for interpreting a browser URL as an instruction to navigate to a client-generated view. The router is bound to links on a page to tell Angular to navigate the application view when a user clicks on it.
  8. Services A very broad category, a service can be anything ranging from a value and function to a feature that is required by an Angular app. Technically, a service is a class with a well-defined purpose.
  9. Template Each component’s view is associated with its companion template. A template in Angular is a form of HTML tags that lets Angular know that how it is meant to render the component.

Question: Can you give us an overview of Angular architecture?
Answer: You can draw some like this:

Overview-of-Angular-architecture

Here is Angular Architecture in detail: https://angular.io/guide/architecture

Question: What is Angular Material?
Answer: It is a UI component library. Angular Material helps in creating attractive, consistent, and fully functional web pages as well as web applications. It does so while following modern web design principles, including browser portability and graceful degradation.

Question: What is AOT (Ahead-Of-Time) Compilation?
Answer: Each Angular app gets compiled internally. The Angular compiler takes in the JS code, compiles it and then produces some JS code. This happens only once per occasion per user. It is known as AOT (Ahead-Of-Time) compilation.

Question: What is Data Binding? How many ways it can be done?
Answer: In order to connect application data with the DOM (Data Object Model), data binding is used. It happens between the template (HTML) and component (TypeScript). There are 3 ways to achieve data binding:

  1. Event Binding – Enables the application to respond to user input in the target environment
  2. Property Binding – Enables interpolation of values computed from application data into the HTML
  3. Two-way Binding – Changes made in the application state gets automatically reflected in the view and vice-versa. The ngModel directive is used for achieving this type of data binding.

Question: What is demonstrated by the arrow in the following image?

Angular dependency injection
Answer: This represents a dependency injection or DI.

Question: What is new in Angular 6?
Answer: Here are some of the new aspects introduced in Angular 6:

  • Angular Elements – It allows converting Angular components into web components and embeds the same in some non-Angular application
  • Tree Shakeable Provider – Angular 6 introduces a new way of registering a provider directly inside the @Injectable() decorator. It is achieved by using the providedIn attribute
  • RxJS 6 – Angular 6 makes use of RxJS 6 internally
  • i18n (internationalization) – Without having to build the application once per locale, any Angular application can have “runtime i18n”

Question: What is ngOnInit ()? How to define it?
Answer: ngOnInit () is a lifecycle hook that is called after Angular has finished initializing all data-bound properties of a directive. It is defined as:

Interface OnInit {
           ngOnInit () : void
      }

Question: What is SPA (Single Page Application) in Angular? Contrast SPA technology with traditional web technology?
Answer: In the SPA technology, only a single page, which is index.HTML, is maintained although the URL keeps on changing. Unlike the traditional web technology, SPA technology is faster and easy to develop as well.

In the conventional web technology, as soon as a client requests a webpage, the server sends the resource. However, when again the client requests for another page, the server responds again with sending the requested resource. The problem with this technology is that it requires a lot of time.

Question: What is the code for creating a decorator?
Answer: We create a decorator called Dummy:

     function Dummy(target) {
        dummy.log('This decorator is Dummy', target);
     }

Question: What is the process called by which TypeScript code is converted into JavaScript code?
Answer: It is called Transpiling. Even though TypeScript is used for writing code in Angular applications, it gets internally transpiled into equivalent JavaScript.

Question: What is ViewEncapsulation and how many ways are there do to do it in Angular?
Answer: To put simply, ViewEncapsulation determines whether the styles defined in a particular component will affect the entire application or not. Angular supports 3 types of ViewEncapsulation:

  • Emulated – Styles used in other HTML spread to the component
  • Native – Styles used in other HTML doesn’t spread to the component
  • None – Styles defined in a component are visible to all components of the application

Question: Why prioritize TypeScript over JavaScript in Angular?
Answer: TypeScript is developed by Microsoft and it is a superset of JavaScript. The issue with JS is that it isn’t a true OOP language. As the JS code doesn’t follow the Prototype Pattern, the bigger the size of the code the messier it gets. Hence, it leads to difficulties in maintainability as well as reusability. To offset this, TypeScript follows a strict OOP approach.

Additional Tips to Win the Interview!
You need to be confident while giving the interview. Also, try avoiding hogwash in case you’re asked a question that you don’t know about. A simple no is better than giving some random non-answer and adding unnecessary details. Candidates that are straightforward and honest are preferred over those pretending to be know-it-alls!

Further, don’t disburse your personal details until asked for. The interviewer is more interested in knowing you as a technical person. So, all the very best! Do let us know the Angular questions you faced in the interview that are not covered here so that we can add those here for the benefit of the Angular community.

Related Posts

Your email address will not be published. Required fields are marked *

*

38 Comments, RSS

  1. Avatar

    Maxine Payne December 19, 2018 @ 10:40 am

    What is the difference between Angular and jQuery?

    • Avatar

      Ivette Carrion January 4, 2019 @ 3:55 am

      Both the Angular and jQuery works at different levels.
      Angular – Angular is a powerful JavaScript framework used to create internet applications. Angular JS applications are cross browser compliant. Angular gives you various concepts and structures that can apply to the projects like directives and controllers.
      jQuery –jQuery is a JavaScript library which is fast and concise. jQuery make it easy to DOM manipulation, animation, event handling. jQuery is lightweight library and supports latest technology. jQuery itself used in multiple ways to do the same thing as Angular.

    • Avatar

      Imtiyaz April 8, 2019 @ 1:43 pm

      Jquery is Just a library it can be helpful only at script side .Angular is framework can be develop application using javascript ,css ,html etc.

  2. Avatar

    Daisy Turner December 19, 2018 @ 10:41 am

    Which filter will be executed one or more times during the each $Digest cycle?

    • Avatar

      Shantel Croteau January 4, 2019 @ 3:56 am

      The stateful filter will be executed one or more times during the each $Digest cycle whenever needs. However you need to write a stateful filter, you have to use this as $stateful, this means that it will be executed one or more times during the each $digest cycle.

  3. Avatar

    Earl Robertson December 19, 2018 @ 10:41 am

    Are Angular and AngularJS the same?

    • Avatar

      Mauricio Zielinski January 4, 2019 @ 3:57 am

      Both are same and the versions of Angular. Angular is based on TypeScript and Angular JS is based on JavaScript. Angular can be learned without knowing Angular JS. Angular JS is the version less than 2 and from Angular version 2 it is known as Angular. Angular JS is developed by the search engine giant Google.

      • Avatar

        Alan April 18, 2019 @ 5:50 am

        Indeed they are not the same. Google is the owner of the Angular entire project, but I can say they are 95% different one against the other.

  4. Avatar

    Herman Lamb December 19, 2018 @ 10:47 am

    Which is easy to learn, AngularJS or Angular 2 or Angular 4?

    • Avatar

      Dorinda Angel January 4, 2019 @ 3:57 am

      Angular JS is basic for all Angular versions. Angular 2 and Angular 4 are the latest frameworks to learn. Angular 4 is the newest one, which has many new modules and documentations are not descriptive enough. Although, Angular 4 is the latest one and developers are moving towards it than Angular 2 and Angular JS.

  5. Avatar

    Virgil Beck December 19, 2018 @ 10:47 am

    Which version of angular should I learn in 2019?

    • Avatar

      Ambrose Lindstrom January 4, 2019 @ 3:58 am

      Learn the latest version of Angular in 2019. Right now Angular 5 and Angular 6 are running. Angular JS is the different than other versions of Angular. Angular 2 and Angular 4 are most preferable for the enterprise applications in companies. Angular 5 and Angular 6 release recently and have backward compatibility with the previous versions Angular 2 and Angular 4. Angular 4 is faster and smaller than Angular 2.

  6. Avatar

    Josephine Kim December 19, 2018 @ 10:50 am

    Which Javascript framework should I go for React or Angular?

  7. Avatar

    Michele Morton December 19, 2018 @ 10:54 am

    What are the pros and cons of angular+ionic vs angular+bootstrap?

    • Avatar

      Kieth Temple January 4, 2019 @ 3:59 am

      The Angular+Ionic is used when we require for Hybrid Application development, whereas angular+bootstrap is used for web application development.
      Bootstrap UI elements can be customized but its execution is slow as compared to Ionic. Iconic elements are a close copy of UI of Android and iOS. Iconic gives better webview support for Android and iOS.

  8. Avatar

    Aubrey Cannon December 19, 2018 @ 10:55 am

    Do AngularJS provide reusable components?

    • Avatar

      Doloris Utley January 4, 2019 @ 4:00 am

      Yes, Angular JS enables developers to create reusable components. These components can be used within the whole application. Angular JS even provide their own custom components also. Angular JS comes with basic built-in directives. These directives can be applies as an attribute, class, element, and even as component also.

  9. Avatar

    Leo Benson December 19, 2018 @ 10:55 am

    What technique AngularJS uses for two way binding?

    • Avatar

      Dominque Sommers January 4, 2019 @ 4:01 am

      Automatic synchronization of data between the model and view components is known as the data binding in Angular JS. Angular JS creates a two way binding between the select element and the $ctrl.orderProp model. $ctrl.orderProp is then used as the input in the next for the orderBy filter.

  10. Avatar

    Toby Bass December 19, 2018 @ 10:58 am

    Do you know scope in AngularJS?

    • Avatar

      Jeraldine Settle January 4, 2019 @ 4:01 am

      $scope is a built-in object in AngularJS. $scope contains application data and methods. Whatever function you apply in View, that is accessed in controller using scope only. You can create properties to a $scope object inside a controller function and assign a value or function to it. The view can display $scope data using an expression, ng-bind directive or ng-model.

  11. Avatar

    Glen Paul December 19, 2018 @ 11:00 am

    What is default scope in a AngularJS directive?

    • Avatar

      Valentin Flynn January 4, 2019 @ 4:02 am

      In AngularJS, by default directives do not create new scope or their own scope, instead they use their parent scope, which is usually a controller (within the scope of which the directive is defined). AngularJS allows us that default scope can be changed using the scope field of the Data Definition Object (DDO). The default scope of directives can be changes by passing a configuration object known as directive definition object.

  12. Avatar

    Marty Spencer December 19, 2018 @ 11:00 am

    What is Link function in AngularJS directive?

    • Avatar

      Corey August January 4, 2019 @ 4:03 am

      Link function for the directives in AngularJS is AngularJS Directive’s link. We can define directive’s API & functions using link function that can then be used by directive to perform some business logic. For registering DOM listeners as well as updating the DOM, the link function is responsible. Parameters which are passed into the link function is function link (scope, element, attrs). Where scope is an Angular scope object, element is the jqLite-wrapped element that this directive matches and attrs is an object with the normalized attribute names and their corresponding values.

  13. Avatar

    William Hughes December 19, 2018 @ 11:01 am

    Can an HTML page have multiple NG App directive?

    • Avatar

      Serita Keel January 4, 2019 @ 4:04 am

      NO, The NG App directive is used to auto-bootstrap an AngularJS application. According to AngularJS Documentation, only one AngularJS application can be auto-bootstrapped per HTML document. Only one ng-app directive will be automatically instantiated and initialized by the Angular framework, while it is technically possible to have multiple applications per page. The reason for this is that only one AngularJS application can be automatically bootstrapped per HTML document.

  14. Avatar

    Mabel Banks December 19, 2018 @ 11:01 am

    Is AngularJS MVVM or MVC?

    • Avatar

      Anissa Whited January 4, 2019 @ 4:04 am

      AngularJS is fastest JavaScript framework. AngularJS supports both MVC (Model View Controller) and MVVM (Model View View Model) design patterns that are essential to build modern websites. The AngularJS framework allows us data binding, form validation, directives, communication with server, controller and so on. MVC defines the way that objects communicate with each other. MVVM used to represent an abstract view of the user interface.

  15. Avatar

    Nichole Fleming December 19, 2018 @ 11:02 am

    What are the features of AngularJS?

    • Avatar

      Arline Crain January 4, 2019 @ 4:05 am

      AngularJS is fastest growing and popular JavaScript framework and this is obviously for its features. AngularJS features includes MVC framework, User interface with HTML, Less code need to write, Filters, POJO (Plain Old JavaScript Objects) model, Unit testing, Context aware communications, DOM manipulation, Service providers, Behavior with Directives etc. Also, cross browser complaint application can be built using AngularJS.

  16. Avatar

    Kathryn Newton December 19, 2018 @ 11:04 am

    What are the differences between bootstrap and angular.js?

    • Avatar

      Joesph Draper January 4, 2019 @ 4:06 am

      AngularJS was developed by Google for front end development, which provides a set of components help to structure the application. Bootstrap was developed by Twitter with very common components like CSS, JavaScript, styles etc. enables the developer to develop fast.
      AngularJS provides AngularUI bootstrap, Angular foundation, Ionic framework, and Mobile Angular UI. Bootstrap provides structure layouts, CSS, and styles.
      Bootstrap can’t help in making a Single Page Application, AngularJS can help you a lot in doing so.
      These differences are very less to count. There are many more differences list available for both bootstrap and angular.js.

  17. Avatar

    priyanka yuvraj chaudhari February 19, 2019 @ 6:14 pm

    difference between template driven forms and reactive forms?
    how to override custom components?

    • Avatar

      Saddam Hussain April 5, 2019 @ 6:47 pm

      Template Driven Forms Features
      Easy to use
      Suitable for simple scenarios and fails for complex scenarios
      Similar to AngularJS
      Two way data binding(using [(NgModel)] syntax)
      Minimal component code
      Automatic track of the form and its data(handled by Angular)
      Unit testing is another challenge
      Reactive Forms Features

      More flexible, but needs a lot of practice
      Handles any complex scenarios
      No data binding is done (immutable data model preferred by most developers)
      More component code and less HTML markup
      Reactive transformations can be made possible such as
      Handling a event based on a debounce time
      Handling events when the components are distinct until changed
      Adding elements dynamically
      Easier unit testing

  18. Avatar

    Rajendra March 19, 2019 @ 10:45 pm

    Hi,

    I need Angular project like IMDB.com which can have only 1 producer for a Movie & many Actors & show card view.search box can able to find with Movie name,Producer Name,Actors Name,Year of release

  19. Avatar

    Tom April 24, 2019 @ 4:00 am

    Thanks a lot, it was very helpfull