Angular Interview Questions

Add Your Angular Question
  • 1 What is Angular v8?

    Angular is one of the foremost app-designing Javascript framework for creating sophisticated single page apps.

    The latest stable version of Angular is version 8 released on May 23rd, 2019. Angular 8 support the advance features including CLI
    (Command Line Interface), Angular material, Typescript 3.4, Web Workers, Lazy Loading, StackBlitz integrated IDE and Native Script for building native mobile apps, Firebase Integration, Preview Ivy and many more.

  • 2 What is the key difference between Angular v1.x and Angular v2-v8?

    To avoid confusion, I will use the name AngularJs for the version Angular v1.x and Angular for the versions v2-v8.

    Angular is a completely rewritten framework. Basically, it is not an upgrade of AngularJs because the architecture is totally changed. We are going to compare both on the different parameters.

    Architectural

    AngularJs : AngularJs architecture is based on the MVC (Model-View-Controller) design.

    • Model- The model expresses the app behavior and manages its data related logic.

    • View- The view generates the output based on the data logic in the model.

    • Controller- The controller accepts the external inputs and convert it to commands and sends to the model for desired output.

    Angular: In Angular framework, $scope and controllers replaced by directives and components. Components are basically directives with a template which are responsible for dealing with the application logic on the page (A directive is basically a function which executes whenever the angular compiler finds it in the DOM. There are two types of directives available in Angular.

    These are structural directives and attribute directives). I will explain the directives further.

    Language

     

    AngularJS: AngularJS is mainly programmed in JavaScript.

     

    Angular: Angular uses the Typescript language developed by Microsoft. Typescript is a superset of ECMAScript 6 (ES6). So it consists of powerful features including type checking, object-oriented, type declarations, and the benefits of ES6, like iterators and lambdas etc.

    Expression

    AngularJS: You just have to remember the correct ng directive in order to bind any image/property or an event with AngulaJS.

    Angular: In Angular binding you just have to remember "[]" for property binding and "()" for event binding.

    Mobile Application Support

    AngularJS: AngularJS in not compatible with Mobile applications. AngularJS was not built with mobile support in mind so it doesn't feature mobile support.

    Angular:  Angular (v2-v8) features mobile support.

  • 3 What is AOT (Ahead-of-Time)?

    An angular application mainly consists of components and templates which can
    not be understood by the browser directly. To make it compatible with the browser
    The angular application requires a compilation process to compile the application before
    they can run on the browser. AOT compiler converts the application's code containing
    HTML and typescript into efficient JavaScript code while building the process. The
    browser platform downloads and runs the JavaScript code. This also improves the app
    run time performance by taking consideration of JavaScript VM's feature.
    Advantage of using AOT Compiler:
    ● Faster rendering with AOT as the browser gets the per-compiled
    the application.
    version of
    ● Smaller Angular framework download size.
    ● There is no need to download the Angular compiler as the app is already
    compiled.
    ● AOT compiler detects the template error earlier. So there will be less
    chances of app breakdown.
    ● Better security. There will be no templates to read and no risky client-side HTML

    after compilation so there will be less changes for injection attacks.
    include the --aot option with the ng build or ng serve command, for AOT compilation:
    ng build --aot

    ng serve –aot

  • 4 How to declare components in Angular?

    Components are the basic building block in an angular application. It contains a
    selector, template style and other properties which are used to specify the metadata in
    order to process the component. Angular has an extremely well defined component life
    cycle. Components are simply directives associated with a direct template. A
    component will always belong to NgModule in order to be used by other components or
    applications.

    @component ({selector: 'great', template: 'hello {{name}}!'})
    Class greet{
    Name: string = 'world';
    }

    To generate a component please find the cli command below,
    ng generate component component-name

  • 5 Why Do we need to use ngOninit, if we already have Constructor?

    If you are a beginner, then working with ngOninit and Constructor will might be
    confusing for you.
    ● A constructor is a method used to initialize class members. It is a feature of
    object-oriented design concept.
    ● When angular is done with initializing the component then ngOnInit() is called.
    We need to import OnInit from @angular/core in order to use ngOnInit();

  • 6 What is Lazy Loading in Angular?

    Lazy loading is a design pattern, which helps us to download the web pages in small
    bundles instead of downloading everything in a big bundle. Lazy loading helps to keep
    the bundle size smaller, which helps in decreasing the page loading time.


    {path: ‘user’, loadChildren: ‘./users/user.module#UserModule’}


    In the latest version of Angular (v8), the dynamic import is introduced in the router
    configuration. It means we need to use the import statement for lazy loading the module.

    {path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m =>
    m.UserModule)};

  • 7 What is the key difference between Lazy Loading and Eager Loading in Angular?

    ● In Lazy Loading routing configuration, related child objects are not loaded with its
    parent object. They will be loaded once it is requested by the application. We can
    use it by loadChildren property in router configuration.
    ● In Eager Loading concept, related child objects are loaded with its parent object
    automatically. All the data is retrieved in a single
    query, which can be cached to improve the application performance.

  • 8 What is RouterOutlet in Angular?

    RouterOutlet is an Angular directive that works as a placeholder in order to load the
    different components dynamically based on the current browser's URL. Any component,
    which is matched by the routing configuration will be rendered as a sibling of the Router
    outlet.
    <router-outlet></router-outlet>
    We can use the router-outlet directive in the navigation section and the activated component
    will be rendered inside the router-outlet to load its content.
    <router-outlet name='left'></router-outlet>
    <router-outlet name='right'></router-outlet>

  • 9 What are the modern browser supported by Angular(v2-v8)?

    ● Safari●
    ● IE Mobile
    ● Google Chrome
    ● Firefox
    ● Edge
    ● IE for versions 9-11

  • 10 What is the key difference between Promise and Observable Angular?

    Promise and Observable, both are used for handling the HTTP asynchronous request in
    Angular. Both the methods, get and post of HTTP return observable and we can convert
    it to promise using the toPromise() method.
    ● A promise can handle a single event only when an asynchronous operation is
    successful or fail. Whereas, observable is able to handle HTTP asynchronous
    requests in a more powerful way.
    ● A promise emits only single value. We can’t call resolve twice and get different
    values, once a promise is resolved.. Whereas, observable can emit multiple
    values.By calling next() we can subscribe to the new values.
    ● A promise executes at the moment it is defined. But an observable can only be
    executed by calling subscribe().
    ● A promise can not be canceled. But an observable can be canceled by calling
    unsubscribe().

  • 11 Explain pipes in Angular?

    Pipes in Angular are used to format data before rendering the view. Pipes were called filters in AngularJS. Pipe operator “|” is used to transform the data into the desired format. It usually takes string, integer, date and array as input separated with pipe
    operator “|” to be converted into the desired format and render the same in the browser.

    Types of built-in pipes in Angular,
    ● Lowercase (​ Text | lowercase​ )
    ● Uppercase (​ Text | uppercase​ )
    ● Titlecase (​ Text | titlecase​ )
    ● Slice (​ Text | slice:3​ )
    ● Json Pipe (​ Text | json​ )

    ● Number Pipe (​ value | number:'1.2.2'​ )
    ● Percent Pipe (value | percent)
    ● Currency Pipe (​ value | currency:'GBP'​ )
    ● Date Pipe (date | date:'short')

  • 12 .Explain route guards in Angular?

    Route guards are used to restrict the accessibility of a specifically requested route. It tells the router whether or not it should allow navigation for that particularly requested route. The class implementing guard interface returns boolean values true or false. There are different types of guards in Angular given below, CanActivate: ​It checks if a user is allowed to visit a specific route

    CanActivateChild:​ It checks if a user is allowed to visit a specific children route

    CanDeactivate:​ It checks if a user can exit a specific route

     Resolve:​ Before activating the route, it performs route data retrieval

    CanLoad:​ It check to see if a user can route to a lazy loaded module 

  • 13 .Explain decorators in Angular and how do you create a decorator?

    Decorators are design patterns invoke with a prefixed @ symbol used in separate modification or decoration of class without making any changes in the source code. This is also referred to as a function used to modify a class, method, property and parameters of any method. 

    @readonly

    class Person {    

       ​name: string;  

      ​isAdmin: boolean;    

      ​constructor(name:string, admin: boolean) {    

        ​this.name = name;         ​this.isAdmin = admin;

        ​} } 

    As you can see the class decorator @readonly passed a reference to the constructor function.  
     

  • 14 Explain the safe navigation operator in Angular?

    The safe navigation operator is also known as Elvis Operator is generally used to prevent the error while accessing the property of a null object. Find below the example of elvis operator. 
    {{user?.name}} 
    In case the user object doesn't exist, it will not throw any error in the console. It will show the output, only if the name is not null or undefined. 

  • 15 Explain @Input and @Output functionality in Angular?

    @Input and @Output is a mechanism to send/receive data from one component to another component. As the name suggests, @Input is used to receive the data, whereas @Output used to send the data with the help of EventEmitter Objects.

    Just take the example of example.component.ts

    @Component({ 

     selector: 'hello',

      template: ` <h3 (click)="onClick.emit('Yes')"> ...</h3> `

     })

     export class ExampleComponent {  

     @Input() myContacts: string

       @Output() onClick = new EventEmitter()

     }

  • 16 Explain the concept of Data Binding in Angular?

    Data binding is the mechanism to communicate between the component's typescript code and UI template (View) which the user sees. It just keeps the changes in the component variables and Template in sync. 
     
    There are two types of Data Binding concepts available. 
    ● One-Way data binding 
    The flow of change in one-way data binding is unidirectional. It means only the template is in sync with component's variable. Please take a look at the example below, 

    @Component({

      selector: 'app-root',

      template: `  <div><p>{{name}} works!! <app-todo [item]='name'></app-todo></p></div>`,

      style: [] })

    export class AppComponent { 

     name = 'app';   changeName() {       this.name = 'Angular app' 

     }}

    The component variable name is bound with the template. If the value of the name is changed by the changeName method, then the DOM will be updated and it'll reflect the new value.  
    ● Two-way data binding 
    In Two-way data binding, both the component variable and template are sync with each other. the flow of change is bidirectional. This can be acheived by using the 
    Banana-inside-box "[()]" concept. With the help of this, component variable will be able to change the data in template and template will also be able to change the data bound class property. 

    @Component({

      selector: 'app-root',

      template: `<div><p><input [(ngModel)]="msg" /><b>{{msg}}</b></p></div> `, 

     style: []

     })

    export class AppComponent {  

    msg = 'My Message'   changeMsg()

    {     this.msg = 'Message Changed'

    }}

    Two-way data binding is mostly used in forms while dealing with user inputs. in the above example if value in input box is changed then, the class variable will be updated and if component class variable is changed then the template HTML will be updated with the latest value.

  • 17 What is Formgroup and FormControl in Angular?

    FormGroup is used to define forms in Angular. It is one of the three fundamental building blocks used to define Angular forms. FormGroup tracks the value and valid state of form control. A FormGroup creates an object with each control name as object key and the value of each child form control as the object values.  Entire FormGroup becomes invalid if any one of the form controls is not valid. Please take a look at the example below, 

    => example.component.html  
    <form [formGroup]="userForm" (ngSubmit)="onFormSubmit()"> 
      Name: <input formControlName="name"  placeholder="Enter Name"> 
      Age: <input formControlName="age"  placeholder="Enter Age"> 
      <button type="submit">Submit</button>  
    </form>  
    => example.component.ts 
    userForm = new FormGroup({ 
         name: new FormControl(), 
         age: new FormControl('20') 
    }); 
    onFormSubmit(): void { 
        console.log('Name:' + this.userForm.get('name').value); 
    }  
     

  • 18 What is Dependency injection in Angular?

    Dependencies are generally an object or a service which a class needs to perform its function. 
    Dependency injection (DI) is a core concept and an important application design pattern in Angular. It is an ability to add the functionality of components at runtime from external sources rather than creating them itself. It allows a class to receive dependencies from another class.  
    => example.service.ts 
    import { Injectable } from '@angular/core'; 
    @Injectable() 
    export class ExampleService { 
      getExample() { 
        console.log("Dependency Injection Example"); 
      }} 
    => app.component.ts 
    import { Component } from '@angular/core'; 
    import { PopcornService } from './popcorn.service'; 
    @Component({ 
      selector: 'app-root', 
      templateUrl: './app.component.html', 
      styleUrls: ['./app.component.css'], 
      providers: [ExampleService] 
    }) 
    export class AppComponent { 
      constructor(private example: ExampleService) {} 
      getIt() { 
        this.example.getExample(); 
      }} 

  • 19 19.Explain the use of .subscribe() in Angular?

    This method comes from Rxjs library in Angular. This is a way used by angular components to retrieve the data that is sent to an observable. This is similar to subscribing to a newsletter. After subscribing to the newsletter, they will send it to your home, every time there is a new newsletter published. So this way, every time there is 
    new data, the method inside subscribe gets called. This process will continue till the time you unsubscribe it. 
    let subscription = magazineStore.getMagazines().subscribe( (newMagazine)=>{      console.log('newMagazine',newMagazine);

    });  
    In case you want to unsubscribe it,  
    subscription.unsubscribe(); 
     

  • 20 .What is the key difference between attribute directive and structural directive in Angular?

    Attribute Directive: 
    ● Attribute directives are used as a characteristic of element that changes the behaviour or appearance of an DOM element, component or any other directive.  ● Multiple attribute directives are allowed on one host element. ● Example: ngClass and ngStyle are Angular's built-in attribute directives 
    Structural Directive: 
    ● We can use Structural Directive to modify the DOM structure by adding and removing manipulating DOM elements. It is responsible for HTML layout.  ● Multiple structural directives are not allowed on one host element.  ● Example: *ngIf and *ngFor 

The angular interview questions let you know from the basics to advanced level, which helpful to get stronger in the programming platform. The main aim of offering interview questions and answers specifically targeted the fresher to enter into the top companies. Now, those who utilize the interview questions surely realize the importance and benefits. Whatever, you have already little bit experienced try out web developer interview questions and answers for freshers give the satisfaction. You can learn what the feasible questions are asked in the interviews before you attend any of the interviews. We guide you to move into the right way and make future day’s unlimited pleasure after you placed in the best job. The php developer interview questions and answers are available now and waiting for you to make use of it. So, why you are waiting for spend your valuable time with us and make the dream true. Already, many candidates who are new in the programming stay connected with us and make learning easier. We give the best solutions for all queries related to the job and programming at anytime and from anywhere. Nowadays, the majority of the candidates have been putting their efforts to get the job, but only few of them get succeed and remaining still searching and waiting for the right time. Those who engaged in the php and web developing field don’t worry get ready to make use of offering assistance. Our team of experts provides the Basic php interview questions and answers for freshers to make their effort enhance the confident to get the preferred job. You can simply start the preparation as well spending time useful to attend further interviews without hassle.

Please rotate your device

We don't support landscape mode on your device. Please rotate to portrait mode for the best view of our site