Angular Interview Questions and Answers

Following are the basic and most important angular interview questions and answers in short (we are uploading more questions please stay tuned)                                                              

1. what is SPA?
Ans: SPA stands for single page application and as the name suggests, this is an application where web pages are dynamically rewritten with the new data from the server, instead of the traditional way of loading new pages.
In single page application, all basic necessary data is loaded at the time of loading the client-side application and other data is added and removed dynamically based on request or whenever needed.

2. Advantages and Disadvantages of SPA?
Ans: SPA is very good for responsive web applications no need to load the page for every request. But javascript must be enabled and must need to implement security mechanisms because of cross-site scripting.

3. What Is Angular?
Ans: Angular is a client-side framework to design and develop a single page web application.



4. What are the building blocks of Angular?
Ans: Following is the list of basic building blocks of Angular
         1.      Modules
         2.      Components
         3.      Templates
         4.      Data binding
         5.      Metadata
         6.      Dependency injection
         7.      Services
         8.      Directives

5. What is Module in Angular?
Ans:  ngModule is the container or mechanism to group the relevant angular blocks, here block means components, directives, services, pipes, etc. As the name suggests Modules gives a modular programming approach to the angular, we can group related things and by importing this module anywhere we can reuse the functionality.
E.g.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

@NgModule({

imports: [ BrowserModule ],

providers: [ Logger ],

declarations: [ AppComponent ],

exports: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

imports – we can import other modules
providers – a provider of services
declarations – declaration of own components, directives, pipes
exports – export to outer world so another module can import
bootstrap – used only in root module to bootstrap application so can host other blocks

6. What is Component in Angular?
Ans: the component is the basic building block of the angular and it comprises of three-part those are Template, TypeScript, and Stylesheet, etc.
It is a logical piece of code where actual web development logic is written.

7. What is Service in Angular?
Ans: Service is used to manage the data in the angular application, component never deal directly with data, the component uses service to give and take the data no matter from the server or for internal communication.
Service is an injectable class, and this is a singleton object and its dependency Injection can be managed by angular dependency injection.

8. What is Pipe in Angular?
Ans: The pipe is a very nice feature of angular, it is used to transform values from one form to another more convenient form. There are a lot of pipes provided by angular we can use directly.
E.g.
Following are the few ways to use Date pipe
     1.      <span> Birth Date</span><span> {{birthdate | date}} </span>
     2.      <span> Birth Date</span><span> {{birthdate | date:’fullDate’}} </span>
We can create custom pipe as well. Basically, it is class with a pipe decorator who implements PipeTransform interface. PipeTransform interface has a transform method that accepts a value, we can perform an operation on that value and can return the new value.
E.g.

@Pipe({

name: 'usercustpipe'

})

export class UserCustPipe implements PipeTransform {

transform(value: number, ano?: number): number {

return yourOpr(value);

}

}

9. What are the Directives in Angular?
Ans: A directive is the core part of angular, Event components are the directives with templates. Directives are used to improve the usability of HTML by adding new syntax. there few categories of the directives.
       Component – it is a directive with a template
       Attribute directive – it is used to stylize the DOM element dynamically
                                           ngStyle
                                           ngClass
       Structural Directive – It is used for the manipulation of DOM elements
                                           ngIf
                                           ngFor
                                           ngSwitch
       Custom Directive – user can create their own directives
               @Directive({

               selector: '[appExample]',

        })

        export class ExampleDirective {

constructor(elementRef: ElementRef, renderer: Renderer2) {

 renderer.setStyle(elementRef.nativeElement, 'backgroundColor', '#fff')

               }

        }

10. What is routing in Angular?
Ans: As we know angular is single page application but in real life, we must have multiple pages to lower the complexity of an application and to have a modular design of an application. To achieve this we have multiple components in an angular application and it will act as pages, and with help of routing, we can switch or navigate from one page to another.

We can have a routing file like the following.

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HeroesComponent } from './heroes/heroes.component'; const routes: Routes = [ { path: 'firstpage', component: FirstPageComponent },

{ path: 'secondtpage', component: SecondPageComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

11. What is a guard in Angular?
Ans: While routing between components angular provided way for conditional routing. Users can apply a condition to load-unload the routes and that is guards. There are four types of guards in angular.
            a.      canActivate – used to control the activation of the route.
            b.      canDeactivate – used to control the deactivation of the route.
            c.      canActivateChild – used to control the activation of children's route.
            d.      canLoad – used to control the loading of the route.