150+ TOP AngularJS Interview Questions and Answers [UPDATED]

  • Question: What Is Angular Js?

    Answer :

    Angular JS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain. 
    Following are the features of Angular JS framework.
    1.Angular JS is a powerful JavaScript based development framework to create RICH Internet Application (RIA).
    2.Angular JS provides developers options to write client side application (using JavaScript) in a clean MVC (Model View Controller) way.
    3.Application written in Angular JS is cross-browser compliant. Angular JS automatically handles JavaScript code suitable for each browser.
    4.Angular JS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

  • Question: What Is Data Binding In Angular Js?

    Answer :

    Data binding is the automatic synchronization of data between model and view components. ng-model directive is used in data binding.

  • Question: Explain Ng-hide Directive?

    Answer :

    ng-hide directive hides a given control.
    In below example, we’ve added ng-hide attribute to a HTML button and pass it a model. Then we’ve attached the model to a checkbox and can see the variation.

    <input type = “checkbox” ng-model = “showHide2”>Hide Button
    <button ng-hide = “showHide2”>Click Me!</button>

  • Question: What Is Deep Linking In Angular Js?

    Answer :

    Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

  • Question: Explain Angular Js Boot Process.

    Answer :

    When the page is loaded in the browser, following things happen:
    · HTML document is loaded into the browser, and evaluated by the browser. Angular JS JavaScript file is loaded; the angular global object is created. Next, JavaScript which registers controller functions is executed.
    · Next Angular JS scans through the HTML to look for Angular JS apps and views. Once view is located, it connects that view to the corresponding controller function.
    · Next, Angular JS executes the controller functions. It then renders the views with data from the model populated by the controller. The page gets ready.

  • Question: What Are The Advantages Of Angular Js?

    Answer :

    Advantages of Angular JS:
    1.Angular JS provides capability to create Single Page Application in a very clean and maintainable way.
    2.Angular JS provides data binding capability to HTML thus giving user a rich and responsive experience.
    3.Angular JS code is unit testable.
    4.Angular JS uses dependency injection and make use of separation of concerns.
    5.Angular JS provides reusable components.
    6.With Angular JS, developer writes less code and gets more functionality.
    7.In Angular JS, views are pure html pages, and controllers written in JavaScript do the business processing.
    8.Angular JS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.

  • Question: Which Components Can Be Injected As A Dependency In Angular Js?

    Answer :

    Angular JS provides a supreme Dependency Injection mechanism. It provides following core components which can be injected into each other as dependencies.
    1.value
    2.factory
    3.service
    4.provider
    5.constant

  • Question: Explain Ng-show Directive?

    Answer :

    ng-show directive shows a given control.
    In below example, we’ve added ng-show attribute to a HTML button and pass it a model. Then we’ve attached the model to a checkbox and can see the variation.

    <input type = “checkbox” ng-model = “showHide1”>Show Button
    <button ng-show = “showHide1”>Click Me!</button>

  • Question: What Are The Filters In Angular Js?

    Answer :

    Filters select a subset of items from an array and return a new array. Filters are used to show filtered items from a list of items based on defined criteria.

  • Question: Explain Ng-disabled Directive?

    Answer :

    ng-disabled directive disables a given control.
    In below example, we’ve added ng-disabled attribute to a HTML button and pass it a model. Then we’ve attached the model to an checkbox and can see the variation.
    <input type = “checkbox” ng-model = “enableDisableButton”>Disable Button
    <button ng-disabled = “enableDisableButton”>Click Me!</button>

  • Question: On Which Types Of Component Can We Create A Custom Directive?

    Answer :

    Angular JS provides support to create custom directives for following type of elements.
    Element directives − Directive activates when a matching element is encountered.
    Attribute − Directive activates when a matching attribute is encountered.
    CSS − Directive activates when a matching css style is encountered.
    Comment − Directive activates when a matching comment is encountered.

  • Question: Explain Templates In Angular Js.

    Answer :

    Templates are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using “partials”.

  • Question: What Are The Differences Between Service And Factory Methods?

    Answer :

    factory method is used to define a factory which can later be used to create services as and when required whereas service method is used to create a service whose purpose is to do some defined task.

  • Question: Explain Order By Filter?

    Answer :

    orderby filter orders the array based on provided criteria.
    In below example, to order subjects by marks, we’ve used orderBy marks.
    Subject:

    <ul>
    <li ng-repeat = “subject in student.subjects | orderBy:’marks’”>
    {{ subject.name + ‘, marks:’ + subject.marks }}
    </li>
    </ul>

  • Question: What Is Routing In Angular Js?

    Answer :

    It is concept of switching views. Angular JS based controller decides which view to render based on the business logic.

  • Question: Explain Ng-model Directive?

    Answer :

    ng-model directive binds the values of AngularJS application data to HTML input controls. It creates a model variable which can be used with the html page and within the container control( for example, div) having ng-app directive.

  • Question: What Are Angular Js Expressions?

    Answer :

    Expressions are used to bind application data to html. Expressions are written inside double braces like {{ expression}}. Expressions behave in same way as ng-bind directives. AngularJS application expressions are pure JavaScript expressions and outputs the data where they are used.

  • Question: Explain Currency Filter?

    Answer :

    Currency filter formats text in a currency format.
    In below example, we’ve added currency filter to an expression returning number using pipe character. Here we’ve added currency filter to print fees using currency format.

    Enter fees: <input type = “text” ng-model = “student.fees”>
    fees: {{student.fees | currency}}

  • Question: Explain Ng-app Directive?

    Answer :

    ng-app directive defines and links an AngularJS application to HTML. It also indicate the start of the application.

  • Question: What Is Scope In Angular Js?

    Answer :

    Scopes are objects that refer to the model. They act as glue between controller and view.

  • Question: Which Are The Core Directives Of Angular Js?

    Answer :

    Following are the three core directives of AngularJS.
    ng-app − This directive defines and links an AngularJS application to HTML.
    ng-model − This directive binds the values of AngularJS application data to HTML input controls.
    ng-bind − This directive binds the AngularJS Application data to HTML tags.

  • Question: What Is $rootscope?

    Answer :

    Scope is a special JavaScript object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object. $rootScope is the parent of all of the scope variables.

  • Question: What Is Constant?

    Answer :

    constants are used to pass values at config phase considering the fact that value cannot be used to be passed during config phase.
    mainApp.constant(“configParam”, “constant value”);

  • Question: Explain Uppercase Filter?

    Answer :

    Uppercase filter converts a text to upper case text.
    In below example, we’ve added uppercase filter to an expression using pipe character. Here we’ve added uppercase filter to print student name in all capital letters.

     Enter first name:<input type = “text” ng–model = “student.firstName”>                        
                 Enter last name: <input type = “text” ng–model = “student.lastName”>                    
                 Name in Upper Case: {{student.fullName() | uppercase}}

  • Question: What Is Use Of $routeprovider In Angular Js?

    Answer :

    $routeProvider is the key service which set the configuration of urls, maps them with the corresponding html page or ng-template, and attaches a controller with the same.

  • Question: Is Angular Js Extensible?

    Answer :

    Yes! In AngularJS we can create custom directive to extend AngularJS existing functionalities.
    Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using “directive” function. A custom directive simply replaces the element for which it is activated.
    AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive.

  • Question: Explain Ng-bind Directive ?

    Answer :

    ng-bind directive binds the AngularJS Application data to HTML tags. ng-bind updates the model created by ng-model directive to be displayed in the html tag whenever user input something in the control or updates the html control’s data when model data is updated by controller.

  • Question: What Is Service Method?

    Answer :

    Using service method, we define a service and then assign method to it. We’ve also injected an already available service to it.

    mainApp.service(‘CalcService’, function(MathService)
    {
        this.square = function(a) { 
            return MathService.multiply(a,a); 
        }
    });

  • Question: What Are The Controllers In Angular Js?

    Answer :

    Controllers are JavaScript functions that are bound to a particular scope. They are the prime actors in Angular JS framework and carry functions to operate on data and decide which view is to be updated to show the updated model based data.

  • Question: How To Implement Internationalization In Angular Js?

    Answer :

    Angular JS supports inbuilt internationalization for three types of filters currency, date and numbers. We only need to incorporate corresponding js according to locale of the country. By default it handles the locale of the browser. For example, to use Danish locale, use following script

  • Question: How To Validate Data In Angular Js?

    Answer :

    AngularJS enriches form filling and validation. We can use $dirty and $invalid flags to do the validations in seamless way. Use novalidate with a form declaration to disable any browser specific validation.
    Following can be used to track error.
    $dirty − states that value has been changed.
    $invalid − states that value entered is invalid.
    $error − states the exact error.

  • Question: What Are The Services In Angular Js?

    Answer :

    Angular JS come with several built-in services. For example $http service is used to make XMLHttpRequests (Ajax calls). Services are singleton objects which are instantiated only once in app.

  • Question: How To Make An Ajax Call Using Angular Js?

    Answer :

    AngularJS provides $http control which works as a service to make ajax call to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $http can be used to get the data from server in the following manner:
    function studentController($scope, $http) {
        var url = “data.txt”;
        $http.get(url).success( function(response) {
            $scope.students = response; 
        });
    }

  • Question: What Is Factory Method?

    Answer :

    Using factory method, we first define a factory and then assign method to it.
    var mainApp = angular.module(“mainApp”, []);
    mainApp.factory(‘MathService’, function() { 
        var factory = {}; 
        factory.multiply = function(a, b) {
            return a * b 
        }
        return factory;
    });

  • Question: How Angular.module Works?

    Answer :

    angular.module is used to create AngularJS modules along with its dependent modules.
    Consider the following example:
    var mainApp = angular.module(“mainApp”, []);
    Here we’ve declared an application mainApp module using angular.module function. We’ve passed an empty array to it. This array generally contains dependent modules declared earlier.

  • Question: Explain Ng-controller Directive ?

    Answer :

    Ng-controller directive tells AngularJS what controller to use with this view. AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.

  • Question: Explain Ng-init Directive ?

    Answer :

    ng-init directive initializes an AngularJS Application data. It is used to put values to the variables to be used in the application.

  • Question: Explain Ng-repeat Directive ?

    Answer :

    ng-repeat directive repeats html elements for each item in a collection.

  • Question: What Is Internationalization?

    Answer :

    Internationalization is a way to show locale specific information on a website. For example, display content of a website in English language in United States and in Danish in France.

  • Question: Explain Directives In Angular Js.

    Answer :

    Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. Angular JS has built-in directives (ng-bind, ng-model, etc) to perform most of the task that developers have to do.

  • Question: Explain Ng-click Directive?

    Answer :

    ng-click directive represents a AngularJS click event.
    In below example, we’ve added ng-click attribute to a HTML button and added an expression to updated a model. Then we can see the variation.

    <p>Total click: {{ clickCounter }}</p></td>
    <button ng-click = “clickCounter = clickCounter + 1”>Click Me!</button>

  • Question: What Is A Service?

    Answer :

    Services are JavaScript functions and are responsible to do specific tasks only. Each service is responsible for a specific task for example, $http is used to make ajax call to get the server data. $route is used to define the routing information and so on. Inbuilt services are always prefixed with $ symbol.

  • Question: Explain Filter Filter?

    Answer :

    filter filter is used to filter the array to a subset of it based on provided criteria.
    In below example, to display only required subjects, we’ve used subjectName as filter.

    Enter subject: <input type = “text” ng-model = “subjectName”>
    Subject:
    <ul>
    <li ng-repeat = “subject in student.subjects | filter: subjectName”>
    {{ subject.name + ‘, marks:’ + subject.marks }}
    </li>
    </ul>

  • Question: How Angular Js Integrates With Html?

    Answer :

    AngularJS being a pure javaScript based library integrates easily with HTML.
    Step 1 − Include angularjs javascript libray in the html page
    <head> src = “http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”> </head>
    Step 2 − Point to AngularJS app
    Next we tell what part of the HTML contains the AngularJS app. This done by adding the ng-app attribute to the root HTML element of the AngularJS app. You can either add it to html element or body element as shown below:
    <body ng-app = “myapp”> </body>

  • AngularJS Questions and Answers for Interview

    Preparing for AngularJS job interview and whether you’re experienced or fresher & don’t know what kind of questions will be asked in AngularJS interview, then go through the above 150+ Top AngularJS Interview Questions and Answers to crack your job interview.

    50+ TOP Angular 7 Interview Questions and Answers [UPDATED]

  • Question: What Are The Core Dependencies Of Angular 7?

    Answer :

    Core Dependencies:

    There are two types of core dependencies: RxJS and TypeScript.

    RxJS 6.3:

    RxJS version 6.3 is used by Angular 7. It has no changes in the version from Angular 6

    TypeScript 3.1:

    TypeScript version 3.1 is used by Angular 7. It is the upgrade from the version2.9 of Angular 6.

  • Question: What Is Do Bootstrap (ng Do Bootstrap ) In Angular 7?

    Answer :

    Do Bootstrap Interface :

    Angular 7 added a new life-cycle hook that is called ng Do Bootstrap and an interface that is called Do Bootstrap.

    Example:

    //ng Do Bootstrap – Life-Cycle Hook Interface

    classApp Module implements Do Bootstrap {

     ng Do Bootstrap(appRef: ApplicationRef) {

    appRef.bootstrap(AppComponent);

      }

    }

  • Question: How To Update Angular 6 To Angular 7?

    Answer :

    For updating Angular 6 to Angular 7,

    you should use a command:

    ng update @angular/cli @angular/core

  • Question: Explain Bazel?

    Answer :

    Bazel is a test tool just like the Make, Maven and Gradle and it is an open-source build. Bazel utilizes the readable and high-level build language. It handles the project in a great number of languages and builds the product for a large number of platforms. Moreover, it supports multiple users and large codebases over several repositories.

  • Question: How To Generate A Class In Angular 7 Using Cli ?

    Answer :

    Create a class using below code:

    ng generate class [options]
    ng g class [options]
    Whose name refers the name of a class.
    Options refer to the project name, spec value in Boolean or type of a file.

  • Question: How Can You Create A Decorator In Angular?

    Answer :

    There are two ways to register decorators in Angular.

    These are:

    • $provide.decorator 
    • module.decorator
  • Question: What Is Angular?

    Answer :

    • Angular is a most popular web development framework for developing mobile apps as well as desktop applications.
    • Angular framework is also utilized in the cross platform mobile development called IONIC and so it is not limited to web apps only.
    • Angular is an open source framework written and maintained by angular team at Google and the Father of Angular is Misko Hevery.
    • Angular is written in TypeScript and so it comes with all the capabilities that typescript offers.
  • Question: What Is The Difference Between Structural And Attribute Directives In Angular?

    Answer :

    Structural directives:

    These are used to alter the DOM layout by removing and adding DOM elements. It is far better in changing the structure of the view. Examples of Structural directives are NgFor and Ngif.

    Attribute Directives:

    These are being used as characteristics of elements. For example, a directive such as built-in NgStyle in the template Syntax guide is an attribute directive.

  • Question: What Is Xmb Placeholders?

    Answer :

    The placeholders have one example tag () and a text node. The text node will be used as the original value from the placeholder, while the example will represent a dummy value.

  • Question: What Is Key Value Pipe In Angular 7?

    Answer :

     Key Value Pipe:

    Change you object into an array of key value pairs that output array will be ordered by keys.

     By default it will be by Unicode point value.

    Syntax:

     {{your input expression | key value [:compareFn] }}

  • Question: What’s New In Angular 7?

    Answer :

    The major release and expanding to the entire platform including-

    •   Core framework,
    •   Angular Material,
    •   CLI
  • Question: What Is Urlsegment Interface In Angular 7?

    Answer :

    UrlSegment Interface :

    UrlSegment interface represents a single URL segment and the constructor, properties, and methods look like below UrlSegment class i.e.

    class UrlSegment {

    constructor(path: string, parameters: {…})

    path: string

    parameters: {…}

    toString(): string

    }

     The UrlSegment is a part of a URL between the two slashes and it contains a path and matrix parameters associated with the segment.

  • Question: What Is Xmb?

    Answer :

    The XMB is basically a key value pairs with no deeper structure. It does have a mechanism for named placeholders, with descriptions and examples. The  messages for any given other language must be correspond 1:1.

  • Question: What Is Architecture Overview Of Angular?

    Answer :

    Angular Architecture Overview :

    Angular is a most popular web development framework for developing mobile apps as well as desktop applications.

    Angular framework is also utilized in the cross platform mobile development called IONIC and so it is not limited to web apps only.

    Angular is an open source framework written and maintained by angular team at Google and the Father of Angular is Misko Hevery.

    The bootstrapping process creates the components listed in the bootstrap array and inserts each one into the browser (DOM)

     you can identify the seven main building blocks of an Angular Application.

    1. Component
    2. Templates
    3. Metadata
    4. Data Binding
    5. Directives
    6. Services
    7. Dependency Injection

     The basic building blocks of an Angular application are NgModules, which provide a compilation context for components.

     Angular app is defined by a set of NgModules and it always has at least a root module that enables bootstrapping, and many more feature modules.

    1. Components define Template views
    2. Components use services

    The Angular Module (NgModules) helps us to organize an application into connected blocks of functionality.

    The NgModule properties for the minimum “AppModule” generated by the CLI which are follow as –

     Declarations — Use to declare the application components.

     Imports —Every application must import BrowserModule to run the app in a browser.

     Providers — There are none to start.

     Bootstrap — This is a root AppComponent that Angular creates and inserts into the index.html host web page.

  • Question: What Is Ivy Rendering Engine In Angular 7?

    Answer :

    Ivy Rendering Engine :

    The Ivy rendering engine is a new backwards-compatible Angular renderer main focused on the following.

    • Speed Improvements
    • Size Reduction
    • Increased Flexibility

    The template functions for creating dynamically views are no longer nested functions inside each other.

    Now we use for loops that are nested inside other loops.

    Example:

    functionAppComponent(rf: RenderFlags, ctx: AppComponent) {

    functionulTemplateFun(rf1: RenderFlags, ctx0: any) {

    functionliTemplateFun(rf1: RenderFlags, ctx1: any) {…}

      }

    }

  • Question: What Is Angular Compatibility Compiler (ngcc) In Angular 7?

    Answer :

    The ngcc Angular node_module compatibility compiler :

    • The ngcc is a tool which “upgrades” node_module compiled with non-ivy ngc into ivy compliant format.
    •  This compiler will convert node_modules compiled with Angular Compatibility Compiler (ngcc), into node_modules which appear to have been compiled with TSC compiler transformer (ngtsc) and this compiler conversions will allow such “legacy” packages to be used by the Ivy rendering engine.
    •  TSC transformer which removes and converts @Pipe, @Component, @Directive and @NgModule to the corresponding definePipe, defineComponent, defineDirective and defineInjector. 
  • Question: How Can You Handle Events In Angular 7?

    Answer :

    There are various methods to handle events in Angular 7.

    These are:

    1. Binding to user input events: You are able to use the Angular event binding to answer to DOM event. User input triggers so many DOM events. It is a very effective method to get the input from the user.

    For example:

    <button (click)=”onClickMe()”>Click me!</button>

    2. Get user input from the event object: DOM carries a cargo of the information that possibly is valuable for the components. Here is an example to show you the keyup event of an input box to obtain the user’s input after every stroke

    Example:

    src/app/keyup.components.ts (template v.1) 

    content_copy 

    template: ` 

    <input (keyup)=”onKey($event)”> 

    <p>{{values}} </p>

    3. Key event filtering: Every keystroke is heard by the (keyup) event handler. The enter keys matter the most as it provides the sign of the user that he has done with the typing. The most efficient method of eliminating the noise is to look after every $event.keyCode and the action is taken only when the enter key is pressed.

  • Angular 7 Questions and Answers for Interview

    Preparing for Angular 7 job interview and whether you’re experienced or fresher & don’t know what kind of questions will be asked in Angular 7 interview, then go through the above 50+ Top Angular 7 Interview Questions and Answers to crack your job interview.

    50+ TOP Angular 6 Interview Questions and Answers [UPDATED]

  • Question: Why You Use Browsermodule, Commonmodule, Formsmodule, Routermodule, And Httpclientmodule?

    Answer :

    BrowserModule – The browser module is imported from @angular/platform-browser and it is used when you want to run your application in a browser.

    CommonModule – The common module is imported from @angular/common and it is used when you want to use directives – NgIf, NgFor and so on.

    FormsModule – The forms module is imported from @angular/forms and it is used when you build template driven forms.

    RouterModule – The router module is imported from @angular/router and is used for routing RouterLink, forRoot, and forChild.

    HttpClientModule –The HttpClientModule is imported from @angular/common/http and it used to initiate HTTP request and responses in angular apps. The HttpClient is more modern and easy to use the alternative of HTTP.

  • Question: What Types Of Ngmodules?

    Answer :

    There are four types of NgModules –

    • Features Module
    • Routing Module
    • Service Module
    • Widget Module
    • Shared Module
  • Question: What Is Chaining Pipe?

    Answer :

    The chaining Pipe is used to perform the multiple operations within the single expression. This chaining operation will be chained using the pipe (I).

    In the following example, to display the birthday in the upper case- will need to use the inbuilt date-pipe and upper-case-pipe.

    In the following example –

    {{ birthday | date | uppercase}}

  • Question: What Is Pure Pipe?

    Answer :

    Angular executes a pure pipe only when it detects a pure change to the input value. A pure change can be primitive or non-primitive.

    Primitive data are only single values, they have not special capabilities and the non-primitive data types are used to store the group of values.

    @Pipe({

      name: ‘currency’

    })

  • Question: What’s New In Angular 6? What Are Improvements In Angular 6?

    Answer :

    The Angular Team are working on lots of bug fixes, new features and added/update/remove/ re-introduce/ and many more things.

    Let’s start to explore all changes of Angular 6 step by step:

    Added ng update – This CLI commands will update your angular project dependencies to their latest versions. The ng update is normal package manager tools to identify and update other dependencies.

  • Question: What Is A Cookie?

    Answer :

    A cookie is a small piece of data sent from a website and stored on the user’s machine by the user’s web browsers while the user is browsing.

  • Question: What Is Impure Pipe?

    Answer :

    Angular executes an impure pipe during every component change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move.

    If you want to make a pipe impure that time you will allow the setting pure flag to false.

    @Pipe({

      name: ‘currency’,

      pure:false

    })

  • Question: What Is Parameterizing Pipe?

    Answer :

    A pipe can accept any number of optional parameters to achieve output. The parameter value can be any valid template expressions. To add optional parameters follow the pipe name with a colon (:). Its looks like- currency: ‘INR’

    In the following example –

    <h2>The birthday is – {{ birthday | date:”MM/dd/yy” }} </h2>

    <!– Output – The birthday is – 10/03/1984 –>

  • Question: What Are Components In Angular?

    Answer :

    The Concepts of Angular Components  –

    Components are the most basic building block of a UI in Angular applications and it controls views (HTML/CSS). They also communicate with other components and services to bring functionality to your applications.

    Technically components are basically TypeScript classes that interact with the HTML files of the components, which get displayed on the browsers.

    The component is the core functionality of Angular applications but you need to know to pass the data into the components to configure them.

  • Question: What Are The Ngmodule Metadata Properties?

    Answer :

    The NgModule decorator identifies AppModule as a NgModule class.

    The NgModule takes a metadata object that tells Angular how to compile and launch the application.

    The NgModule importance metadata properties are as follows –

    • providers
    • declarations
    • imports
    • exports
    • entryComponents
    • bootstrap
    • schemas
    • id
  • Angular 6 Questions and Answers for Interview

    Preparing for Angular 6 job interview and whether you’re experienced or fresher & don’t know what kind of questions will be asked in Angular 6 interview, then go through the above 50+ Top Angular 6 Interview Questions and Answers to crack your job interview.

    50+ TOP Angular 5 Interview Questions and Answers [UPDATED]

  • Question: Explain Npm?

    Answer :

    NPM stands for node package manager. It is used for installing dependencies for javascript packages.

  • Question: How To Create A New Project In Angular Js Using Cli?

    Answer :

    After installing Angular CLI run ng new project-name command to create a new Angular project.

  • Question: List The Types Of Data Binding Supported By Angular 5?

    Answer :

    Angular 5 supports four types of Data Binding They are

    1. String Interpolation
    2. Property Binding
    3. Event Binding
    4. Two-way-binding
  • Question: What Are Decorators?

    Answer :

    Decorators are functions that adds metadata to class members and functions. It was proposed in ES2016 and implemented in Typescript.

  • Question: What Is Transpiling?

    Answer :

    Transpiling is a process of converting code from one language to another. In Angular, Traceur compiler is used for converting TypeScript to JavaScript so that browsers can understand.

  • Question: Explain Ngmodule?

    Answer :

    NgModule is a decorator function in Angular that takes a single metadata object whose properties describe the module.

  • Question: What Is Angular Cli? List The Command To Install Angular Cli?

    Answer :

    Angular CLI is Command Line Interface for Angular that runs Webpack.You can use npm install -g @angular/cli command to install angular CLI.

  • Question: Explain $event In Angular 5?

    Answer :

    In Angular 5 $event is a reserved keyword that represents the data emitted by an event (event data).

    It is commonly used as a parameter for event based methods.

  • Question: Explain Component Life Cycle In Angular?

    Answer :

    • In Angular component life cycle in Angular goes through following stages.
    • Create
    • Render
    • Create and render children
    • Check for bound data changes and re-render
    • Destroy
  • Question: What Is *ngfor Directive Used For?

    Answer :

    ngFor directive is used for Iterating over a list of items and for Generating a new DOM element for each one.

  • Question: How To Run Angular5 Application Locally During Development?

    Answer :

    ng serve command is used to run Angular5 application locally during development.To start development server on specific port ng serve -p aPortNumber command is used.

  • Question: Explain Webpack?

    Answer :

    Webpack is module bundler Bundler for Angular2 or above. It bundles, minified and transpiler an Angular application.

  • Question: How Do We Import A Module In Angular 5?

    Answer :

    Simply use below syntax to import a module in Angular 5.

    import { ModuleName } from ‘someWhere’;

  • Question: What Do Double Curly Brackets Are Used In Angular 5?

    Answer :

    double curly brackets are used form data interpolation in Angular 5.

  • Question: What An Angular 5 Component Made Of? How Do You Generate A New Component?

    Answer :

    Angular2 component is made of a Component decorator and a component definition of a class. ng generate component componentname command is used to generate a component in Angular2.

  • Angular 5 Questions and Answers for Interview

    Preparing for Angular 5 job interview and whether you’re experienced or fresher & don’t know what kind of questions will be asked in Angular 5 interview, then go through the above 50+ Top Angular 5 Interview Questions and Answers to crack your job interview.

    100+ TOP Angular 4 Interview Questions and Answers [UPDATED]

  • Question: What Are Angular 4?

    Answer :

    On 13 December 2016 Angular 4 was announced, skipping 3 to avoid confusion due to the misalignment of the router package’s version which was already distributed as v3.3.0. The final version was released on March 23, 2017. Angular 4 is backward compatible with Angular 2.

    Angular version 4.3 is a minor release, meaning that it contains no breaking changes and that it is a drop-in replacement for 4.x.x.

  • Question: What Is Angular Js?

    Answer :

    AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML syntax to express your application’s components clearly and succinctly. AngularJS data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

    AngularJS is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is an exercise in.

  • Question: What Classes Should I Add To Module’s Declarations?

    Answer :

    We can add the declarable classes like components, directives and pipes in the module’s declarations list and we can add only – components, directives and pipes classes in the @NgModule.

  • Question: What Do You Understand By Isolated Unit Tests?

    Answer :

    As the name implies, unit test is all about testing individual units of code. In order to answer some questions, isolating the unit of code under test is really important. When we do this, we are not forced into creating related pieces such as DOM elements for sorting. With the help of isolated unit tests, it becomes easier to implement everything. To simulate the requests, dependency injections are also provided. The individual sort function can be tested in isolation. And not only the sort function, any function can be tested in isolation.

  • Question: What Do I Have To Do To Trick The Browser Into Doing What I Want?

    Answer :

    The impedance mismatch between dynamic applications and static documents is often solved with:

    A library – a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit. E.g., jQuery.

    Frameworks – a particular implementation of a web application, where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific. 

    E.g., durandal, ember, etc.

    AngularJS takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs. AngularJS teaches the browser new syntax through a construct we call directives.

    Examples include:

    • Data binding, as in {{}}.
    • DOM control structures for repeating, showing and hiding DOM fragments.
    • Support for forms and form validation.
    • Attaching new behavior to DOM elements, such as DOM event handling.
    • Grouping of HTML into reusable components.
  • Question: Explain Ngfor Directive With An Example?

    Answer :

    The ngFor directive instantiates a template for every element of the given iterator. The different local variables of the ngFor directive can be used in iterations. The ngFor directive can even be used with the HTML elements. It also performs various changes in DOM. Several exported values can be aliased to local variables with the help of ngFor directive. It allows us to build data presentation lists and tables in our HTML templates.

    Here’s an example of ngFor directive with the help of HTML:

    <tr *ngFor=”hero of heroes”>

    <td>({hero.name})</td></tr>

  • Question: Explain Component Decorators In Angular 4?

    Answer :

    A decorator is the core concept when developing an angular framework with version 2 and above. It may become a core language feature for JavaScript soon. In angular 4, decorators are used extensively and are also used to compile a code.

    There are 4 different types of decorators:

    1. Class decorators
    2. Property decorators
    3. Method decorators
    4. Parameter decorators

    A decorator is a function that is invoked with a prefix “@” symbol and is immediately followed by a class, parameter, method, or property. A decorator returns the same thing which was given as an input but in an augmented form.

  • Question: Why Angular 4? What’s New In Angular 4?

    Answer :

    • It Makes work easier compared with angular 2 and other models.
    • Writing code is lots of cleaner and lesser.
    • It Improve the execution performance for Data binding and so on.
    • It has included Animations features.
    • In Angular 4, no need to apply observable methods because Angular analyses every page’s DOM and it is automatically modifies to page’s DOM.
    • It is also supported by Visual Studio, IntelliJ, And NET IDES and so on.
    • Migration is really very soft and cleaner.
    • And So On…

    Angular 2 apps will work using Angular 4 without changing anything. Angular 4 offers lots-of enhancements i.e.

    1. Smaller & Faster Apps
    2. View Engine Size Reduce
    3. Animation Package
    4. NgIf and ngFor Improvement
    5. Overriding Template
    6. NgIf with Else
    7. Use of AS keyword
    8. Pipes
    9. HTTP Request Simplified
    10. Apps Testing Simplified
    11. Introduce Meta Tags
    12. Added some Forms Validator Attributes
    13. Added Compare Select Options
    14. Enhancement in Router
    15. Added Optional Parameter
    16. Improvement Internationalization
    17. Meaningful errors handling methodology
    18. Animations
  • Question: What Is The For Root Method?

    Answer :

    The for Root is a static method and it’s very easy for developers to configure the modules and the best example is – RouterModule.for Root.

    The Router Module also offers a for Child. It’s also a static method and use to configure the routes of lazy-loaded modules. The for Root and for Child are the traditional names for methods that configure services in root.

  • Question: Explain The Component Directory Structure Of Angular 4?

    Answer :

    Here are the elements which are present in the component directory structure anf modules: –

    Module.ts- in this, the angular module is declared. @NgModule decorator is used which initializes the different aspects of angular applications. AppComponent is also declared in it.

    Components.ts– it simply defines the components in angular and this is the place where the app-root sector is also defined. A title attribute is also declared in the component.

    Component.html– it is the template file of the application which represents the visual parts of our components.

  • Question: What Is The Difference Between `{‘ngfor’}` And `{`ngforof`}` In Angular 2?

    Answer :

    Angular 2 – ngFor vs. ngFor:

    1. The [ngFor] is not a type safe.
    2. The [NgForOf] is a type Safe.
    3. The [NgFor] directive instantiates a template once per item from iterate.
    4. The [ngFor] and [ngForOf] are actually the selectors of the [NgForOf] directive and it is not two distinct things.
    5. The [ngFor] will be works like as collections.
    6. The [ngForOf] will be works like as generics.
  • Question: Write The Cli Command To Generate A Component In Angular 4?

    Answer :

    Components are just simple classes which are declared as components with the help of component decorators.

    It becomes easy to create an application which already works, with the help of angular CLI commands. “Ng generate” is used to generate components, routes, services, and pipes. Simple test shells are also created with the help of this CLI command. For generating a component in angular4 with the help of CLI command.

    you need to follow the following syntax

    • ng generate component component name;

    It generates the component and adds the component to module declarations.

  • Question: What Do You Understand By Services With Reference To Angular Js?

    Answer :

    Services in angular js are used to organize and share code across your application. These are the suitable objects which are wired together with the help of dependency injection. The angular js services are lazily instantiated. The service is only instantiated by angular js only when the application component depends on it. In angular js, new services can be made or can even be used in other built-in services. Over 30 built-in services are present in angular js.

  • Question: What Is Angular?

    Answer :

    Angular (commonly referred to as “Angular 2+” or “Angular 2“):

    Is a TypeScript-based open-source front-end web application platform bed by the Angular Team at Google and by a community of individuals and corporations to address all of the parts of the developer’s workflow while building complex web application. Angular is a complete rewrite from the same team that built AngularJS.

    Angular is a framework for building client applications in HTML and either JavaScript or a language like TypeScript that compiles to JavaScript. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.

  • Question: What Happen When I Import The Same Module Twice In Angular 4?

    Answer :

    • No problem! We can import the same module twice but Angular does not like modules with circular references.
    • So do not let Module “X” import Module “Y” which already imports Module “X”.
    • When four modules all import Module “X”, Angular estimate Module “X” once, the first time face it and does not do again. Actually, the modules help us to organize an application into associative blocks of functionality.
  • Question: What Are The Features Of Angular 4.3?

    Answer :

    Features in Angular version 4.3 are:

    • Introducing Http Client, a smaller, easier to use, and more powerful library for making HTTP Requests.
    • New router life cycle events for Guards and Resolvers. Four new events: GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd join the existing set of life cycle event such as NavigationStart.
    • Conditionally disable.
  • Question: What Is The Use Of Interceptors In Angular 4?

    Answer :

    The Interceptors is a common used to set default headers for all responses.

  • Question: How Are Jwts Used To Authenticate Angular 4 Applications?

    Answer :

    In Annular, the following Steps are used to building authentication and authorization for RESTful APIs and applications. It might help you

    1. The users send their credentials to the server which is verified by the database credentials. If everything is verified successfully, the JWT is sent back to them.
    2. The JWT is saved in the user’s browser in local storage or in a cookie and so on.
    3. The presence of a JWT saved in the browser is used as an indicator that a user is currently logged in.
    4. The expiry time of JWT is continually checked to maintain an authenticated state in the Angular applications.
    5. The client side routes are protected and access by authenticated users only.
    6. When user sends the XHR requests for APIs, the JWT gets sent an Authorization header using your cookies or Bearer.
    7. When XHR requests coming on the server, before send back the responses it’s validated first with configured app’s secret keys. If everything is looking good then returns successfully responses other send the back to the bad request.

    There are several open source libraries are available for angular which are helps with JWTs and has the ability to Decode the JWT, Authorization header to XHR requests and so on.

  • Question: What Classes Should I Not Add To Module’s Declarations?

    Answer :

    We do not declare – Module, Service, objects, strings, numbers, functions, entity models, configurations, business logic, and helper classes in the module’s declarations.

  • Question: What’s New In Angular 4? And What Are The Improvements In Angular 4?

    Answer :

    Angular 4 contains some additional Enhancement and Improvement.

    Consider the following enhancements:

    1. Smaller & Faster Apps
    2. View Engine Size Reduce
    3. Animation Package
    4. NgIf and ngFor Improvement
    5. Template
    6. Ng If with Else
    7. Use of AS keyword
    8. Pipes
    9. HTTP Request Simplified
    10. Apps Testing Simplified
    11. Introduce Meta Tags
    12. Added some Forms Validator Attributes
    13. Added Compare Select Options
    14. Enhancement in Router
    15. Added Optional Parameter
    16. Improvement Internationalization
  • Question: Write The Difference Between Directive And Component In Angular Js?

    Answer :

    In angular js, there are differences between the meta-data annotations. Some of the differences are:

    • A directive is used to add behavior to an existing element. Whereas, a component is used to create a component with attached behavior.
    • “@directive” is used to create a directive. Whereas, “@component” is used to create a component.
    • A directive is used to attach different behaviors to an existing DOM element. Whereas, with the help of component, we can break our application into smaller components.
    • A directive is used to create reusable behavior. Whereas, a component is used to create reusable components.
    • A directive does not require a view. Whereas, a component needs a view via @view.
  • Question: What Is Json Web Token?

    Answer :

    JSON Web Token (JWT) is an open standard which used for securely transmitting information between parties as a JSON object.

    The JWTs can be signed with

    1. HMAC algorithm
    2. RSA algorithm
  • Question: What Is The Json Web Token Structure?

    Answer :

    The JSON Web Tokens consist of three parts separated by dots (.), which are:

    1. Header
    2. Payload
    3. Signature
  • Question: How To Get And Log An Error In Angular 4?

    Answer :

    Two types of error:

    1. If the backend returned an unsuccessful response like – 404, 500 and so on.
    2. If something goes wrong in the client side like -network error etc.

    In the both cases – We are using Http Error Response and return the useful information on what went wrong in this call!

  • Question: Explain Ngif Directive ?

    Answer :

    The ngIf is a built-in template directive which is used to add or remove some parts of DOM. This addition or removal depends on the expression being true or false.

    If the expression is evaluated to false, then the ngIf directive removes the HTML element. If the expression is evaluated to be true, then the element gets added to the DOM.

    Syntax:- 

    *ngIf=”<condition>”

  • Question: How To Set Http Request Header In Angular 4 And Angular 2?

    Answer :

    The HTTP Interceptors are used to Set Http Headers Request in Angular 4 using the import from “@angular/common/http”. The HTTP Interceptors are available in Angular 4.x versions.

    The HTTP Interceptors are not supported in Angular 2. We are creating the Http Client Injectable class to achieve this. You can see the below examples for set http headers request with and without HTTP interceptors.

  • Question: What Is A Routing In Angular Js?

    Answer :

    NgRoute module is used when you want to navigate through different pages of your application but you also want your application to be a single page application. This ngRoute module navigates through different pages of your application without reloading the entire application. The angular js route module should be included to make your application ready for routing. The ngRoute is added as a dependency in the application. The routing engine captures the specific url requested by the user and renders the view based on the defined routing rules.

  • Question: When Should You Use Json Web Tokens?

    Answer :

    There are some scenarios where we can used JSON Web Tokens –

    1. Authentication
    2. Information Exchange
  • Question: Explain Property Binding Or One Way Binding In Angular Js?

    Answer :

    Basically property binding means passing data from the component class and setting the value of a given element in the view. It is a one way binding in which the data is passed from component to the class. It allows us to control the element property values from component to class. Property binding in angular can take place by three ways:

    Interpolation can be used to define a value, as long as the value being defined is a string.

    Wrapping brackets around the element property and binding it to the component property is the most common type of property binding.

    The third way is by adding “bind” before the element property.

  • Question: What Are The Differences Between Angular And Angular Js?

    Answer :

    Angular was a ground-up rewrite of AngularJS and has many unique features.

    • Angular does not have a concept of “scope” or controllers; instead it uses a hierarchy of components as its main architectural concept
    • Angular has a different expression syntax, focusing on “[ ]” for property binding, and “( )” for event binding
    • Mobile development – desktop development is much easier when mobile performance issues are handled first
    • Modularity – much core functionality has moved to modules, producing a lighter, faster core
    • Modern browsers only – reducing the need for browser compatibility workarounds
    • Angular recommends the use of Microsoft’s Typescript language, which introduces the following features:
    • Class-based Object Oriented Programming
    • Static Typing
    • Generics

    Typescript a superset of ECMAScript 6 (ES6), and is backwards compatible with ECMAScript 5 (i.e.: JavaScript).

    Angular also includes the benefits of ES6:

    • Lambdas
    • Iterators
    • For/Of loops
    • Python-style generators
    • Reflection
    • Improved dependency injection– bindings make it possible for dependencies to be named
    • Dynamic loading
    • Asynchronous template compilation
    • Simpler Routing
    • Replacing controllers and $scope with components and directives – a component is a directive with a template.
    • Reactive programming support using RxJS.
  • Angular 4 Questions and Answers for Interview

    Preparing for Angular 4 job interview and whether you’re experienced or fresher & don’t know what kind of questions will be asked in Angular 4 interview, then go through the above 100+ Top Angular 4 Interview Questions and Answers to crack your job interview.

    150+ TOP Angular 2 Interview Questions and Answers [UPDATED]

  • Question: Difference Between Constructor And Ngoninit?

    Answer :

    Differences – Constructor Vs. ngOnInit

    Angular 2 Constructors:-

    1. The constructor is a default method runs when component is being constructed.
    2. The constructor is a typescript feature and it is used only for a class instantiations and nothing to do with Angular 2.
    3. The constructor called first time before the ngOnInit().

    Angular 2 ngOnInit:-

    1. The ngOnInit event is an Angular 2 life-cycle event method that is called after the first ngOnChanges and the ngOnInit method is use to parameters defined with @Input otherwise the constructor is OK.
    2. The ngOnInit is called after the constructor and ngOnInit is called after the first ngOnChanges.
    3. The ngOnChanges is called when an input or output binding value changes.
  • Question: What Is @ngmodule?

    Answer :

    @NgModule is a decorator function. A decorator function allows users to mark something as Angular 2 thing (could be a module or component or something else) and it enables you to provide additional data that determines how this Angular 2 thing will be processed, instantiated and used at the runtime. So, whenever user writes @NgModule, it tells the Angular 2 module, what’s going to be included and used in and using this module.

  • Question: What Is Traceur Compiler ?

    Answer :

    Traceur is a JavaScript.next-to-JavaScript-of-today compiler that allows you to use features from the future today. Traceur supports ES6 as well as some experimental ES.next features. Traceur’s goal is to inform the design of new JavaScript features which are only valuable if they allow you to write better code.

  • Question: What Is Typescript ?

    Answer :

    TypeScript is a typed super set of JavaScript which has been built and maintained by Microsoft and chosen by the AngularJS team for development.

  • Question: What Are Event Emitters And How It Works In Angular 2?

    Answer :

    Angular 2 doesn’t have bi-directional digest cycle, unlike angular 1. In angular 2, any change occurred in the component always gets propagated from the current component to all its children in hierarchy. If the change from one component needs to be reflected to any of its parent component in hierarchy, we can emit the event by using Event Emitter api.

    In short, EventEmitter is class defined in @angular/core module which can be used by components and directives to emit custom events.

    @output() somethingChanged = new EventEmitter();

    We use somethingChanged.emit(value) method to emit the event. This is usually done in setter when the value is being changed in the class.

    This event emit can be subscribed by any component of the module by using subscribe method.

    myObj.somethingChanged.subscribe(val) => this.myLocalMethod(val));

  • Question: How Would You Define Custom Typings To Avoid Editor Warnings?

    Answer :

    Well, in most of the cases, the 3rd party library comes with its own .d.ts file for its type definition. In some cases, we need to extend the existing type by providing some more properties to it or if we need to define additional types to avoid Typescript warning.

    If we need to extend the type definition for external library, as a good practice, we should not touch the node_modules or existing typings folder. We can create a new folder, say “custom-typings” and keep all customized type definition in that.

    To define typings for application (JavaScript/Typescript) objects, we should define interfaces and entity classes in models folder in the respective module of the application.

    For those cases, we can define or extend the types by creating our own “.d.ts” file.

  • Question: What Are The Security Threats Should We Be Aware Of In Angular 2 Application?

    Answer :

    Just like any other client side or web application, angular 2 application should also follow some of the basic guidelines to mitigate the security risks. Some of them are:

    • Avoid using/injecting dynamic Html content to your component.
    • If using external Html, that is coming from database or somewhere outside the application, sanitize it.
    • Try not to put external urls in the application unless it is trusted. Avoid url re-direction unless it is trusted.
    • Consider using AOT compilation or offline compilation.
    • Try to prevent XSRF attack by restricting the api and use of the app for known or secure environment/browsers.
  • Question: What Is Aot Compilation?

    Answer :

    AOT compilation stands for Ahead Of Time compilation, in which the angular compiler compiles the angular components and templates to native JavaScript and HTML during the build time. The compiled Html and JavaScript is deployed to the web server so that the compilation and render time can be saved by the browser.

  • Question: How Routing Works In Angular 2.?

    Answer :

    Routing is a mechanism which enables user to navigate between views/components. Angular 2 simplifies the routing and provide flexibility to configure and define at module level (Lazy loading). 

    The angular application has single instance of the Router service and whenever URL changes, corresponding Route is matched from the routing configuration array. On successful match, it applies redirects and the router builds a tree of ActivatedRoute objects and contains the current state of the router. Before redirection, the router will check whether new state is permitted by running guards (CanActivate). Route Guards is simply an interface method that router runs to check the route authorization. After guard runs, it will resolve the route data and activate the router state by instantiation the required components into <router-outlet> </router-outlet>. 

  • Question: What Is @inputs In Angular 2?

    Answer :

    @Input allows you to pass data into your controller and templates through html and defining custom properties. This allows you to easily reuse components and have them display different values for each instance of the renderer.

  • Question: What Are The New Features Of Angular2?

    Answer :

    Angular 2 is written entirely in Typescript and meets the ECMAScript 6 specification :

    • Component-Based- Angular 2 is entirely component based. Controllers and $scope are no longer used. They have been replaced by components and directives.
    • Directives- The specification for directives is considerably simplified, although they are still subject to change. With the @Directive annotation, a directive can be declared.
    • Dependency Injection– Because of the improved dependency injection model in Angular2 there are more opportunities for component / object-based work.
    • Use of TypeScript-TypeScript is a typed super set of JavaScript which has been built and maintained by Microsoft and chosen by the AngularJS team for development. The presence of types makes the code written in TypeScript less prone to run-time errors. In recent times, the support for ES6 has been greatly improved and a few features from ES7 have been added as well.
    • Generics- TypeScript has generics which can be used in the frontend.
    • Lambdas with TypeScript- In TypeScript, lambdas are available.
    • Forms and Validations- Forms and validations are an important aspect of frontend development. Within Angular 2 the Form Builder and Control Group are defined.
  • Question: What Is The Need For Typescript In Angular2?

    Answer :

    Understanding the need for TypeScript file in Angular2 applications :  JavaScript rules in Web development. Its the most popular language for developing web application UI. For may application developers having exposure in languages like Java and C#, creating the front end of a Web application in JavaScript is a very cumbersome process. For example if the user wants to create a class Employee in JavaScript. There is no class keyword in JavaScript so the code will be as follows-

    <html>
    <head>
    </head>
    <body>
    <script>
    function Employee()
    {
    this.name=””;
    this.id=””;
    this.Validate=function()
    {
    alert(“Validate”);
    }
    }
    </script>
    </body>
    </html>
    Same can be written using TypeScript as follows-

    class Employee
    {
    public name : string = “”;
    public id : string = “”;
    Validate()
    {
    alert(“validate”);
    }
    }

    This Customer.ts will compile to the above JavaScript code.

    So TypeScript provides the following advantages over JavaScript-

    • Structure the code- There were many different coding styles for JavaScript. This leads to unstructured code. With TypeScript we create structured code.
    • Use object-oriented programming paradigms and techniques-  There is lack of object-oriented design paradigms and techniques in JavaScript. This is not the case in TypeScript. It makes use of Objected Oriented features like Polymorphism, Inheritance etc.
    • Standard Coding guidelines- There is no Type checking in JavaScript. The code style needs to be defined. Hard to enforce style guide. TypeScript overcomes this issue with features like Code Analysis and Navigation, Documentation, Intellisense etc.
  • Question: What Are The Advantages And Disadvantages Of Aot Compilation?

    Answer :

    Advantages : 

    • Faster download: Since the app is already compiled, many of the angular compiler related libraries are not required to be bundled, the app bundle size get reduced. So, the app can be downloaded faster.
    • Lesser No. of Http Requests: If the app is not bundled to support lazy loading (or whatever reasons), for each associated html and css, there is a separate request goes to the server. The pre-compiled application in-lines all templates and styles with components, so the number of Http requests to the server would be lesser.
    • Faster Rendering: If the app is not AOT compiled, the compilation process happens in the browser once the application is fully loaded. This has a wait time for all necessary component to be downloaded, and then the time taken by the compiler to compile the app. With AOT compilation, this is optimized.
    • Detect error at build time: Since compilation happens beforehand, many compile time error can be detected, providing a better degree of stability of application.

    Disadvantages

    • Works only with HTML and CSS, other file types need a previous build step.
    • No watch mode yet, must be done manually (bin/ngc-watch.js) and compiles all the files.
    • Need to maintain AOT version of bootstrap file (might not be required while using tools like cli).
    • Needs cleanup step before compiling.
  • Question: What Is An Angular 2 Component?

    Answer :

    Each component is comprised of a template, which is the HTML for the user interface. Add to that a class for the code associated with a view. The class contains the properties and methods, which perform actions for the view,A component also has metadata, which provides additional information about the component to Angular.

  • Question: How Can We Setting Up Our Development Environment For Angular 2?

    Answer :

    Setting up our development environment for Angular 2 requires two basic steps:

    1. Install npm, or node package manager.
    2. Set up the Angular 2 application.
  • Question: What Are The Advantages Of Using Angular 2 Over Angular 1?

    Answer :

    Angular 2 is a platform not only a language:

    • Better Speed and Performance: No $Scope in Angular 2, AOT
    • Simpler Dependency Injection
    • Modular, cross platform
    • Benefits of ES6 and Typescript.
    • Flexible Routing with Lazy Loading Features
    • Easier to Learn
  • Question: What Is The Need Of Angular2?

    Answer :

    Angular 2 is not just a typical upgrade but a totally new development. The whole framework is rewritten from the ground. Angular 2 got rid of many things like $scope, controllers, DDO, jqLite, angular.module etc.

    It uses components for almost everything. Imagine that even the whole app is now a component. Also it takes advantage of ES6 / TypeScript syntax. Developing Angular 2 apps in TypeScript has made it even more powerful.

    Apart from that, many things have evolved and re-designed like the template engine and many more.

  • Question: What Are Differences Between Components And Directives?

    Answer :

    Components : 

    • For register component we use @Component meta-data annotation.
    • Component is a directive which use shadow DOM to create encapsulate visual behavior called components.Components are typically used to create UI widgets.
    • Component is used to break up the application into smaller components.
    • Only one component can be present per DOM element.
    • @View decorator or templateurl template are mandatory in the component.

    Directives :

    • For register directives we use @Directive meta-data annotation.
    • Directives is used to add behavior to an existing DOM element.
    • Directive is use to design re-usable components.
    • Many directive can be used in a per DOM element.
    • Directive don’t have View.
  • Question: What Is The Use Of Codelyzer In Angular 2 Application.?

    Answer :

    All enterprise applications follows a set of coding conventions and guidelines to maintain code in better way. Codelyzer is an open source tool to run and check whether the pre-defined coding guidelines has been followed or not. Codelyzer does only static code analysis for angular and typescript project.

    Codelyzer runs on top of tslint and its coding conventions are usually defined in tslint.json file. Codelyzer can be run via angular cli or npm directly. Editors like Visual Studio Code and Atom also supports codelyzer just by doing a basic settings.

    To set up the codelyzer in Visual Studio code, we can go to File -> Preferences -> User Settings and add the path for tslint rules.

    Hide   Copy Code

    {
      “tslint.rulesDirectory”: “./node_modules/codelyzer”,
      “typescript.tsdk”: “node_modules/typescript/lib”
    }
    To run from cli: ng lint. 
    To run from npm: npm run lint

  • Question: What Is Primeng? How Can It Be Used With Angular2?

    Answer :

    PrimeNG is a collection of rich UI components for Angular 2. PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces. All widgets are open source and free to use under Apache License 2.0, a commercial friendly license. PrimeNG is developed by PrimeTek Informatics, a company with years of expertise in developing open source UI components. AngularJS makes it possible to use predefined components for development like tables etc. This helps developers save time and efforts. Using PrimeNG developers can create awesome applications in no time

  • Question: What Is Shadow Dom? How Is It Helping Angular 2 To Perform Better?

    Answer :

    Shadow DOM is a part of the HTML spec which allows developers to encapsulate their HTML markup, CSS styles and JavaScript. Shadow DOM, along with a few other technologies, gives developers the ability to build their own 1st class tags, web components and APIs just like the <audio> tag. Collectively, these new tags and APIs are referred to as Web Components. Shadow DOM provides better separation of concern along with lesser conflict of styles and scripts with other HTML DOM elements.

    Since shadow DOM are static in nature, it’s a good candidate to be cached as it is not accessible to developer. The cached DOM would be rendered faster in the browser providing better performance. Moreover, shadow DOM can be managed comparatively well while detecting the change in angular 2 application and re-paint of view can be managed efficiently.

  • Question: How Can We Setting Up Angular 2 Application?

    Answer :

    • Create an application folder.
    • Create the tsconfig file(To configure the TypeScript compiler).
    • Create the package.json file(To define the libraries and scripts we need).
    • Create the typings.json file(That specifies a missing TypeScript type definition file).
    • Install the libraries and typing files.
    • Create the host Web page.(Normally index.html).
    • Create the main.ts file(To bootstrap the Angular application with the root component).
  • Question: What Is @outputs In Angular?

    Answer :

    Components push out events using a combination of an @Output and an EventEmitter. This allows a clean separation between reusable Components and application logic.

  • Question: What Is Npm?

    Answer :

    Npm, or node package manager: is a command line utility that interacts with a repository of open source projects, Become the package manager for JavaScript. Using npm we can install libraries, packages, and applications, along with their dependencies.

  • Question: What Is Component In Angularjs 2 ?

    Answer :

    In Angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

  • Question: What Is The Languages That You Can Use To Build Angular2 Application?

    Answer :

    ECMAScript, or ES.

    • ES 3 is supported by older browsers.
    • ES 5 is the version currently supported by most modern browsers.
    • The ES 6 specification was recently approved and renamed ES 2015(Most browsers don’t yet support ES 2015).
  • Question: What Is Ecmascript ?

    Answer :

    ECMAScript is a subset of JavaScript. JavaScript is basically ECMAScript at its core but builds upon it. Languages such as ActionScript, JavaScript, JScript all use ECMAScript as its core. As a comparison, AS/JS/JScript are 3 different cars, but they all use the same engine… each of their exteriors is different though, and there have been several modifications done to each to make it unique. Angular2 supports ES6 and higher versions.

  • Question: We Already Use Angular 1, Why Do We Need An Angular 2?

    Answer :

    Angular 2 is built for speed : 

    • It has faster initial loads.
    • faster change detection.
    • improved rendering times.
    • Angular 2 is modern.
    • It takes advantage of features provided in the latest JavaScript standards and beyond(Such as classes, modules, and decorators)
    • It leverages web component technologies for building reusable user interface widgets.
    • It supports both Greenfield and Legacy browsers, Edge, Chrome, Firefox and Internet Explorer back to IE9.
    • It has fewer built-in directives to learn simpler binding.
    • Enhances our productivity to improve our day-to-day workflow.
  • Question: What Are The Core Differences Between Observables And Promises?

    Answer :

    Promises vs Observables :

    Promises:

    • returns a single value.
    • not cancellable.

    Observables:

    • works with multiple values over time.
    • cancellable.
    • supports map, filter, reduce and similar operators.
    • proposed feature for ES 2016.
    • use Reactive Extensions (RxJS).
    • an array whose items arrive asynchronously over time.
  • Question: How Would You Optimize The Angular 2 Application For Better Performance?

    Answer :

    ell, optimization depends on the type and size of application and many other factors. But in general, I would consider the following points while optimizing the angular 2 app:

    • Consider AOT compilation.
    • Make sure the application is bundled, uglified, and tree shaking is done.
    • Make sure the application doesn’t have un-necessary import statements.
    • Make sure that any 3rd party library, which is not used, is removed from the application.
    • Have all dependencies and dev-dependencies are clearly separated.
    • I would consider lazy loading instead of fully bundled app if the app size is more.
  • Angular 2 Questions and Answers for Interview

    Preparing for Angular 2 job interview and whether you’re experienced or fresher & don’t know what kind of questions will be asked in Angular 2 interview, then go through the above 150+ Top Angular 2 Interview Questions and Answers to crack your job interview.