angularjs interview questions and answers

AngularJS Interview Questions and Answers

by GangBoard Admin, October 30, 2018

In case you’re searching for AngularJS Interview Questions and answers for Experienced or Freshers, you are at the correct place. There is parcel of chances from many presumed organizations on the planet. The AngularJS advertise is relied upon to develop to more than $5 billion by 2020, from just $180 million, as per AngularJS industry gauges. In this way, despite everything you have the chance to push forward in your vocation in AngularJS Development. Gangboard offers Advanced AngularJS Interview Questions and answers that assist you in splitting your AngularJS interview and procure dream vocation as AngularJS Developer.

Best AngularJS Interview Questions and Answers

Do you believe that you have the right stuff to be a section in the advancement of future AngularJS, the GangBoard is here to control you to sustain your vocation. Various fortune 1000 organizations around the world are utilizing the innovation of AngularJS to meet the necessities of their customers. AngularJS is being utilized as a part of numerous businesses. To have a great development in AngularJS work, our page furnishes you with nitty-gritty data as AngularJS prospective employee meeting questions and answers. AngularJS Interview Questions and answers are prepared by 10+ years experienced industry experts. AngularJS Interview Questions and answers are very useful to the Fresher or Experienced person who is looking for the new challenging job from the reputed company. Our AngularJS Questions and answers are very simple and have more examples for your better understanding.

By this AngularJS Interview Questions and answers, many students are got placed in many reputed companies with high package salary. So utilize our AngularJS Interview Questions and answers to grow in your career.

Q1) How do you add form validation to a form built with FormBuilder?

Ans:this.username = new FormControl(‘user’, Validators.required);

Q2) What’s the difference between dirty, touched, and pristine on a form element?


  • dirty – interacted to control
  • touched – focus to control
  • prestine – not interacted to control

Q3) How can you access validation errors in the template to display error messages?


*ngIf=”name.invalid && (name.dirty || name.touched)”


Q4) What is async validation and how is it done?

Ans: async will check for duplicate entry. its done using HTTP service and bind control with map

Q5) What is the purpose of NgModule?

Ans: to export component, service, directives, and pipes to other modules inside an application

Q6) How do you decide to create a new NgModule?

Ans: when there is a common usage of a feature in an application.

Q7) What are the attributes that you can define in an NgModule annotation?

Ans: declare module and import components and services

Q8) What is the difference between a module’s forRoot() and forChild() methods and why do you need it?


forRoot() = service register to entire application

forChild() = service register to particular child component

Q9) What would you have in a shared module?

Ans: core independent directives, pipes, and components

Q10) What would you not put shared module?

Ans: dependent directives, pipes, and components

Q11) What module would you put a singleton service whose instance will be shared throughout the application (e.g. ExceptionService andLoggerService)?



Q12) What is the purpose of exports in a NgModule?

Ans: to expose them to the imported module

Q13) What is the difference between exports and declarations in NgModule?


export visible to other imported module

a declaration will make component visible inside the module

Q14) Why is it bad if SharedModule provides a service to a lazily loaded module?

Ans: dependency to other non-lazy modules

Q15) What is the use case of services?

Ans: to share data across components

Q16) How are the services injected to your application?

Ans: constructor(private myService:MyService){}

Q17) How do you unit test a service with a dependency?


Using TestBed


providers: [AuthService]


Q18) Why is it a bad idea to create a new service in a component like the one below?

Ans: bad question – no sample provided

Q19) What is the possible order of lifecycle hooks.


  • ngOnChanges()
  • ngOnInit()
  • ngAfterViewInit()
  • ngOnDestroy()

Q20) When will ngOnInit be called?

Ans: after angular displays first bound properties

Q21) How would you make use of ngOnInit()?

Ans: set default values from observable services

Q22) What would you consider a thing you should be careful doing on ngOnInit()?

Ans: not understandable

Q23) What is the difference between ngOnInit() and constructor() of a component?


  • constructor – injecting services and declaration
  • ngOnInit – to assign values and use services

Q24) What is a good use case for ngOnChanges()?

Ans: respond when data inbound to component

Q25) What is the difference between an observable and a promise?


  • observable are cancelable and use subscribe
  • promise are non-cancelable and always returns

Q26) What is the difference between an observable and a subject


A RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers. While plain Observables are unicast

(each subscribed Observer owns an independent execution of the Observable), Subjects are multicast.

A Subject is like an Observable, but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners.

Q27) What are some of the angular apis that are using observables?

Ans: Angular HTTP uses observables

Q28) How would you cache an observable data?


We need the following things to implement caching in observables:

  • An injectable cache service
  • Ability to set an expiration for each item.
  • An Observable based service
  • Ability to track on the fly requests so duplicate requests are never made.

Q29) How would you implement a multiple API calls that need to happen in order using rxjs?


Method 1:

this.http.get(‘/api/url’).subscribe(data => {

this.http.get(/api/url/data).subscribe(data1 => {

// code goes here



Method 2:

Using “MergeMap”


mergeMap(character => this.http.get(character.homeworld))


Q30) What is the difference between switch map, concatMap, and mergeMap?


switchMap: unsubscribing from the last mapped observable, when the new one arrives.

concatMap: Queuing up every new Observable, and subscribing to a new observable only when the last observable completed.

mergeMap: deciding not to do anything, basically, we just keep subscribing to every new observable that we return from the map.

Q31) How would you make sure an API call that needs to be called only once but with multiple conditions. Example: if you need to get some data in multiple routes but, once you get it, you can reuse it in the routes that need it, therefore no need to make another call to your backend APIs.

Ans: I can store data in a  singleton service, which its object is created once and it won’t get destroyed throughout the application. So even routes get changes the data will be available in other routes

Q32) If you need to respond to two different Observable/Subject with one callback function, how would you do it?(ex: if you need to change the url through route parameters and with prev/next buttons).

Ans: I can create page change Subject and I can emit when route parameters change or next/prev button change.

Q33) What is the difference between scan() vs reduce() ?


Scan: apply a function to each item emitted by an Observable, sequentially, and emit each successive value

Reduce: apply a function to each item emitted by an Observable, sequentially, and emit the final value

Q34) What is a pure pipe?

Ans: A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe

Q35) What is an async pipe?


The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted.

When a new value is emitted, the async pipe marks the component to be checked for changes.

When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

Q36) What kind of data can be used with an async pipe?

Ans: Promise, Observable

Q37) How does async pipe prevent memory leeks?

Ans: When a component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

Q38) What is the difference between pure and impure pipes

Ans: A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe. An impure pipe is called for every change detection cycle no matter whether the value or parameters changes.

Q39) What is the minimum definition of a component?

Ans: A component is class that is used to building block in Angular

Q40) What is the difference between a component and a directive?

Ans: Components are their own HTML and Style(View), Directive is just behavior to extend the elements of the component.

Q41) How do components communicate with each other


Three-way to communicate components:

  • Passing the of one component to another component
  • passing value through parent component
  • passing through service

Q42) How do you create two-way data binding in Angular?


combines the input and output binding into a single notation using the ngModel directive.

Eg: <input [(ngModel)]=”name” >  {{name}}

Q43) How would you create a component to display error messages throughout your application?

Ans: Set the error message equal to an angular variable and then check if that variable exists to decide whether to display value or Error.

Q44) What does a lean component mean to you?

Ans: The lean component we use for only display the data only.

Q45) When do you use template-driven vs model-driven forms? Why

Ans: Template driven are simple forms which do not involve complicated logic code. Model-driven are more advanced and it customization the functionality and flexibility.

Q46) How do you submit a form?

Ans: using ngSubmit()

Q47) What’s the difference between NgForm, FormGroup, and FormControl? How do they work together?

Ans: ngForm:- When we import the Form module, NgForm automatically attaches to the tags, it always works from behind.

Q48) What’s the advantage of using FormBuilder?

Ans: FormBuilder reduces creating instances of a FormControl, FormGroup, or FormArray. It reduces the amount of boilerplate needed to build complex forms.

Q49) What is the difference between RouterModule.forRoot() vs RouterModule.forChild()? Why is it important?


RouterModule.forRoot is a static method and it helps to configure the modules.

RouterModule.forChild() is a static method used to configure the routes of lazy-loaded modules.

Q50) Can you explain the difference between ActivatedRoute and RouterState?

Ans: ActivatedRoute can be reused, and it will give all property and objects.

RouterState doesn’t create a new activated route.

Q51) How do you debug router?


Can be activated by passing a flag when it’s added to the app routes.



imports: [ RouterModule.forRoot(routes, { enableTracing: true }) ],

exports: [ RouterModule ]


export class AppRoutingModule {}

Q52) Why do we need route guards?

Ans: route guards are interfaces which can tell the router to allow or not the navigation to a requested route.

Q53) What is a RouterOutlet?

Ans: RouterOutlet use to bind the components when navigation is called.

Q54) How do you mock a service to inject in a unit test?

Ans: by using $provide.

Q55) How do you mock a module in a unit test?

Ans: Mock functions are also known as “spies” because they let you spy on the behavior of a function that is called indirectly by some other code.

Q56) What is the difference between an Interface and a Class?


An interface is a contract.

Abstract classes look a lot like interfaces, but they have something more.

Q57) First line below gives a compile error, the second line doesn’t. Why?

Ans: it will give like one by one line, after excuting the first line then it will response getting wrong

Q58) Tell the building blocks of the angle.

Ans: The angular application is made using the following:

  • Blocks
  • Component
  • Template
  • Orders
  • Data Nemo
  • Services
  • Pro injection
  • Lane

Q59) What is transparency in angle?

Ans: Transparency is the process of converting JavaScript types (using Tracer, a JS compiler). While the character types are used to write code in encryption applications, the code is replaced in JavaScript.

Q60) Distinction between angles and orders in angle

Ans: Elements are broken into small parts; At the same time, the DOM element adds guides.

Q61) Angle life cycle hooks


  • ngOnChanges ()
  • ngOnInit ()
  • ngDoCheck ()
  • ngAfterContentInit ()
  • ngAfterContentChecked ()
  • ngAfterViewInit ()
  • ngAfterViewChecked ()
  • ngOnDestroy ()

Q62) What is the input and @release application?

Ans: When it comes to contacting the angular components in parent-child relationships; We use the @intertainment in the baby sitcom for the child as part of the child and the child being used as a part of the child as part of the child that is part of the child.

Q63) What does a router do?

Ans: We will use the router when we want the path to an element. Syntax: this.router.navigate ([‘/ component_name’]);

Q64) What command is used to create a service and service in angle?

Ans: It helps us to repeat the code. By creating a service, you can use the same code from different components. The command here is to create a service in the angle, the gg service user (created a user service when using this command).

Q65) What is the reliability injection in angle?

Ans: When a component is dependent on another component, the function is turned on / off when the functionality is turned on.

Q66) What is the angle rounding?

Ans: Going to other pages using links can lead to a user.

Q67) How will events be handled at angles?

Ans: Frontend / web screen is called an event for any user of a user (clicking the button, mouse click, mouse hover, mouse move, etc).

Q68) What is a Router Outlet?

Ans: Router Outlet is a replacement for templates that organize elements. In other words, represent or provide elements in a template in a given location.

Q69) Explain the String Interpolation

Ans: When used with the HTML tag, the parentheses {{}} package represent data from a component. For example, an HTML page containing <h1> {{variableName}} </ h1>, where ‘variableName’ actually refers to its value in the templatecript (component) chart; That is, HTML. This whole idea is called string interpolation.

Q70) How is data binding done in many ways?

Ans: Data linking between HTML (template) and typescript (component) Data can be done in 3 ways:

  • property bonding
  • event binding
  • two way data binding.

Q71) What do you say in angular terms?

Ans: There are a number of elements in a web page in the angle. There is a module based on a component, in which the information is displayed in the HTML, and some logs typically written in the typewriter.

Q72) ngModel and how do we represent it?

Ans: ngModel is a command used in the text area. These two way data binding. ngModel [[]]

Q73) What makes an appointment in chain 4?

Ans: This is an algorithm. Whenever a subscription method is called, an independent execution will be executed.

Q74) Distinguishing between fascination and promises.

Ans: Observables lazy, which means nothing happens until a subscription is made. Promises are interesting; As soon as it makes a promise, the execution takes place. Noticeable is a stream of zero or overwhelming events and every event is invited. At the same time, the truth conducts a concert.

Q75) What is Pipes?

Ans: This feature is used to change the output of the template; The string is shifted in size and is shown in the template. This can change the date format accordingly.

Q76) Difference between ng-class and ng-style.

Ans: In the Ng-class, the CSS class loading is possible; Whereas in ng-style we can set the CSS style.

Q77) How to update or update angle cli version?

Ans: To upgrade the application installed on your application, you will need to enable the following commands:

  • npm un install -g angular-cli
  • npm error cache clean or npm cache (npm> 5 if)
  • npm install -g @ angular / cli @ upgrade version

Q78) Some inbound pipes are available in angle

Ans: Below is a list of some bytes in the angle

  • DatePipe
  • CurrencyPipe
  • AsyncPipe
  • DecimalPipe
  • TitleCasePipe
  • JsonPipe
  • SlicePipe
  • PercentPipe
  • UpperCasePipe
  • LowerCasePipe

Q79) What are the rxjs in angle?

Ans: Reactive programming is a coherent programming priority related to the spread of data unity and transformation. RxJS (Reactive Extensions for JavaScript) makes it easy to simulate sync or request-based code.

Q80) What is httpclient in angle

Ans: HttpClient in @ angle / common / http is a simple client HTTP API for angle applications in the XMLHttpRequest interface released by browsers. … it depends on the memory-web-app in the voicemail, which is to change the HttpBackend for the HttpClient module.

Q81) What are the 5 decorators on the angle?

Ans: Designers are a new feature of TypeScript and are used throughout the angle code, but they have nothing to be afraid of. Designing with decorative designers and customizing our classes in the design class. Meta-Data, Properties or Functions are the actions that are used to add the material they are attached to.

Q82) What is the element in AngularJS?

Ans: AngularJS Guidelines. HTML attributes have been extended with prefix AngularJS commands. Ng-utility will launch an AngularJS application. The value of HTML-controls (input, select, text form) binds the value of the ng-model ordering data.

Q83) What is the use of decorative designers?

Ans: Decorators. Designers are proposed for a future version of JavaScript, but the angle group actually uses them and are included in the TitzScript package. Ornamental designers act as a highlighted @ symbol, and immediately a class, parameter, pattern or property.

Q84) What is the pro injection in angle?

Ans: Pro injection (DI) is a software design method that depends on how the components depend. AngularJS Engineer is responsible for creating sub-component components, solving their functions, providing them with other components as requested.

Q85)What is AngularJS routing?

Ans: We can create Single Page Application (SPA) with AngularJS. This is a web app, which is a single HTML page loaded and dynamic updates of the page that the user has in contact with the user on the web page. AngularJS supports SPA Routing module ngRoute. This routing module is based on the URL.

Q86) What is bootstrapping in angle?

Ans: There is nothing but the bootstrapping angle app in AngularJS. AngularJS has two ways of bootstrapping. … When you add ng-utility instruction on the root of your application, the <html> tag or <body> tag will be the angle to boot your app automatically.

Q87) What angle is the bond?

Ans: AngularJS is an automated synchronization of data between data-bound model and display elements in applications. I consider the modeling process for AngularJS data-binding as a single-source-theory in your application. There is always a definite plan for this scenario.

Q88) Does AngularJS Provide Reusable Components?

Ans: Developers help developers develop reusable components that can be used in full use and provide their own custom components. Can be used as an order, attribute, class and as a comment. AngularJS comes with many basic built-in orders.

Q89) What are angled templates?

Ans: In AngularJS, templates are written with HTML, which contains AngularJS-based elements and attributes. AngularJS template combines the information from the model and the controller to provide dynamic display that will view a browser.

Q90) What is a structure order in angle 2?

Ans: Structured commands are used to handle the DOM in the angle. The configuration mechanisms are responsible for the HTML system. By adding, removing or manipulating the LMN in the angle, they form or redesign the DOM structure. This configuration command is used for a host element with the help of other commands. The Command Element and its commands are then ordered to commands. Structural Guidelines can easily be identified. This is a component or an element instant delay. It can be applied cosmetically or manually manages the time of exports of components. Structural Guidelines are built for a template. Two common configuration commands are “ngIf” and “ngFor”. The procedure in the configuration process will change.

Q91) What is the AOT package?

Ans: AOT time is ahead. It compiles the vertical blocks and templates when creating JavaScript and HTML.

Q92) What are the angles @ the directions?

Ans: RouteParams are used to use a given URL based on path URLs, and they become custom parameters for that route.

Q93) Angle hidden property description?


The hidden property in the angle is a special case.

The property is very powerful and is used to bind any property of the elements.

It is considered a close relative of ngshow and nghide.

This sets the display property “display: none”.

Q94) Explain the host decorator in angular 2.

Ans: Hoster designers in angular 2 connect the properties of elements with UI element values. @HostBinding () Title = ‘Our Title’ (whatever the title) is attributed to a component class definition with @HostBinding.

Q95) Which module needs 2 volumes for each use?

Ans: AppModule is required for each angle.

Q96) Angle samples and ES models are the same?

Ans: No, both are different.

Q97) What is Npm?

Ans: NPM, or Node Package Manager: A command line utility to communicate with the open source schemes is a package manager for JavaScript. Using Npm we can install libraries, packages, and applications with their dependencies.

Q98) What is Xmb?

Ans: XMB is essentially important value pairs without any deeper structure. With descriptions and examples, there is a mechanism for named boxes. 1: 1 for messages in any other language.

Q99) What are the Xmb boxes?

Ans: An example of the boxes is the tag () and a text node. The text node is used as an original value from the placeholder, for example a fake value.

Q100) What’s new in angle 7?

Ans: Main release and full platform expansion-

Core structure,

Angle material,


Q101) Explain the Passover

Ans: Base is a test tool like Mass, Maven and Grade, an open source development. Bajal uses language that is readable and high build. It handles the program in many languages and creates a large number of sites. In addition, it supports many users and larger watches in many repositories.

Q102) How to Create a Class in the Angle Using Glee?

Ans: Create a class using the code below:

Creating class [options]

ng class [options]

Whose name refers to a class name.

Options Boolean or a file type scheme name, spec value.

Q103) How do you create a decorator in the angle?

Ans: There are two ways to record designers in angles.

These are:

  • $ provide.decorator
  • module.decorator

Q104) What is the difference between the structure and teaching guidelines in the angle?


Structural Instructions:

These are used to modify the DOM system by removing and adding DOM components. It is best to change the structure of vision. Examples of configuration guidelines are NgFor and Ngif.

Teaching Orders:

They are used as components of components. For example, the command configured in the NgStyle command in the Technology Syntax Guide is a command line.

Q105) What Are Media Metadata Properties?


NgModule Decorator AppModule is an NgModule class identifier.

NgModule takes a metadata object, and it tells you how to compile and start the application.

Q106) What kind of relief is there?


Four Types of NgModules

  • Features module
  • Replacement module
  • Service block
  • Widget block
  • Shared volume

Q107) Uses of Polyfills.ts ?

Ans: Easy compability with all browser

Q108) Where we use ng new and why?

Ans: Default creates the folder and files in the project

Q109) Uses of Typescript 3.1?

Ans: Trypescript is the conversion of the javascript. Superscript of java. Angular 7 support the typescript 3.1. browser knows only the javascipt. So typescript changed into javascript while running in the browser.

Q110) Scss abbversation and uses?


  • Sassy CSS
  • superset of CSS3’s syntax.
  • Sass to make working with CSS easier.

Q111) What is reflect-metadata?

Ans: It will allow you to store data about an object without creating an attribute on that object.

Q112) What is the latest version of angular?

Ans: Angular 8

Q113) Http client:

Ans: HTTP Client API was introduced to deprecate the HTTP library.

Q114) New feature of cdk:

Ans: Virtual scrolling and drag and drop

Q115) Virtual scrolling used for?

Ans: User can scroll list of page faster than before

Q116) Why drag and drop functionality make default in angular 7?

Ans: Because , now a days drag and drop functionality is using commonly for all page. So angular 7 gives includes the feature default.

Q117) Why we migrating to angular 6 to angular 7

Ans: Additional feature like virtual scrolling and drag and drop functionality is included in the angular 7.

Q118) Syntax for migration?

Ans: Ng update @angular/cli @angular/core.

Q119) How to update the dragdrop module in cmd

Ans: Npm install @angular/cdk@latest

Q120) Why we are using unlink?

Ans: Unlink is used to remove the link between the two functionality in angular.

Q121) How to import the drag and drop module?

Ans: Import {DragDropModule} from ‘@angular/cdk/drag-drop’

Q122) How to used the drag and drop functionality in html?

Ans: cdkDropListDropped)=”onDrop($event)”

Q123) why we include boostrap in angular?

Ans: Because angular support all the responsive format

Q124) default create file in app component

Ans: html,ts,.css,spec.ts,module.ts,routing.ts

Q125) uses of spec.ts?

Ans: ts is used for test cases.

Q126) How many files create, while using the generating commands?

Ans: files in default

Q127) why route is introduced in angular?

Ans: Because almost the page is connected to another page. So when click a functionality in the screen. It is redirected to another page.

Q128) When constructor is invoked in angular?

Ans: When ts file invoked in the angular , constructor invoked on that time.

Q129) what is observable?

Ans: observables as an interface to handle a variety of common asynchronous operations.

Q130) what is binding and types?

Ans: Binding is the process of getting the data and combine.


  • data binding
  • event binding

Q131) What is pipe and uses?

Ans: Pipe is used for set the different format in user definition. Ex date: we can set dd/mm/yy or dd:mm:yyy.

Q132) What are the types of pipe?

Ans: 8 type of pipe in angular

Q133) why we are using material?

Ans: Material are using because of the design and style in angular application

Q134) Only root module is enough or do you go for specific modules for specific functionalities? And what is the approach?

Ans: Need to use feature modules for different functionalities. It is not good practice to overload root module. The feature modules have to be exported and imported in root module.

Q135) If you want to display data in % format, how do you it?


  • Can be done using in-built pipe – percent
  • a = .78;
  • {{ a | percent }}

Q136) List built-in pipes


  • Uppercase
  • Lowercase
  • Titlecase
  • Currency
  • Date
  • Percent
  • Slice
  • Decimal
  • Json

Q137) What is the significance of Zone in Angular?

Ans: Zone notifies angular about change detection

Q138) How do you create custom pipe?

Ans: Custom pipe can be created by implementing interface – PipeTransform and defining the transform() method.

Q139) What is shadow DOM?


  • It provides encapsulation for DOM trees and styles
  • It hides DOM logic behind other elements and also confines styles only to that component
  • When we integrate, there is a chance that data and style may be applied to entire application. So, shadow DOM encapsulates data and styles for each component so that it doesn’t flow through entire application

Q140) Error handling in angular


  • catchError() function contains a link to the error handler function
  • in error handler, we send the error to console

Q141) How do you decide whether a user can be navigated to a particular page or no?


  • Can be done using route guards
  • If route guard returns true, navigation continues, else, it stops
  • CanActive is the guard which is used

Q142) What is lazy loading and how do you achieve it?


  • Modules are loaded only when requested by the user instead of loading all the modules on load which reduces performance
  • It is like loading module only on demand
  • Speeds up the application initial load time
  • It can be achieved through routing

Q143) If you want to send an optional parameter in a route, how do you achieve it?


  • Using query params
  • getAdverts()


this.router.navigate([‘/adverts’], { queryParams: { advertId: ‘201’ } });


Q144) Which lifecycle hook is called before ngOnInit?

Ans: ngOnChanges() is the lifecycle hook which called first of all

Q145) Constructor is called first or ngOnInit?

Ans: Constructor is called first

Q146)What are the new features in Angular 6?


Uses RxJS6

Import {Observable} from ‘rxjs’;

Import {map} from ‘rxjs/operators’

  • json instead of angular-cli.json
  • @Injectable({providedIn: ‘root’})

To add service as global

  • Operators are renamed

Do() -> tap()

Catch() -> catchError()

Finally() -> finalize()

Switch() – switchAll()

Throw() – throwError()

Q147) When do you use ngClass?

Ans: When we want to add or remove class dynamically based on some condition

Q148) Can we use more than one structural directive on a single element? If no, what is the approach?

Ans: No, need to use <ng-container> to include one of the structural directive

Q149) How do you create a component without including spec class using angular cli?


Need to use this command

ng generate component component-name –spec=false

Q150) How do you create a model using angular cli?


  • Using the following command
  • ng generate class class-name –type=model

Q151) Can we have multiple router outlets? If yes, what is the approach?


  • Yes, need to use names for router outlet
  • The router outlet name has to be specified in router

Q152) What are the advantages of typescript?


  • OOPs concepts like generics, interfaces and types which make easier to catch incorrect data types passed to variables
  • ES 6 features – class keyword, arrow functions
  • It is easier for developers experienced in java, .net

Q153) If you do not give selector to a component, will it work? What are the mandatory properties of components?


  • No, selector is mandatory
  • And template/templateUrl is also mandatory

Q154) What is the purpose of using package.json in the angular project?


  • identifies npm package dependencies
  • contains command scripts to run the appln and run tests
  • contains dependencies n devDependencies

Q155) What is the difference between Components and Directives?


  • Components break the application into smaller parts i.e., they are building blocks of angular application
  • Directives add behavior to the existing DOM element

Q156) Can we achieve constructor over-loading in typescript?

Ans: No, constructor overloading cannot be achieved in TypeScript

Q157) What is transpiling? Why is it necessary?


  • Converting TypeScript to JavaScript using JS compiler
  • It is required coz browser understands only JavaScript

Q158) If you provide a service in two components’ “providers” section of @Component decorator, how many instances of service will get created?

Ans: One instance because Service is a singleton object

Q159) Which module has to be included to use [(ngModel)]?

Ans: FormsModule has to be included because ngModel is built-in directive in FormsModule

Q160) Which module has to be included to use Reactive forms?

Ans: ReactiveFormsModule has to be imported

Q161) Which module has to be included to use Reactive forms?

Ans: FormsModule has to be imported

Q162) Which module has to be included in Feature modules?

Ans: CommonModule has to be imported

Q163) List different ng commands


  • Ng new
  • Ng generate
  • Ng serve
  • Ng test
  • Ng build

Q164) Where do you unsubscribe?

Ans: In ngOnDestroy lifecycle hook

Q165) Is it possible to unsubscribe using Promises?

Ans: No, Promises cannot be unsubscribed. Observables can be unsubscribed

Q166) Name component-only hooks


  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked

Q167) When is ngOnchanges() invoked?

Ans: called when angular sets or resets data-bound input

Q168) What is angular CLI?

Ans: Tool used to initialize, develop and maintain angular applications

Q169) What are the new features included in Angular 7?


  • Virtual Scrolling
  • Drag n drop
  • New life-cycle hook ngDoBootsrap is added

Q170) Which method of RouterModule has to be used for providing all routes in AppModule

Ans: forRoot() has to be used to add all routes in root module

Q171) How do you build an angular project?

Ans: Using ‘ng build’ command

Q172) Why do you need to write a separate service and why not make an API call in component itself?

Ans: It is a good practice to separate presentation of data from data access by encapsulating data access in a separate service and using that service in the component

Q173) When you call an http method of Service class in component, you will get error if?


  • If it is not subscribed
  • Once we call http request, it has to be subscribed

Q174) How do you represent two-way data binding?

Ans: Syntax of two-way data binding : [(ngModel)] =”name”

Q175) Where do you define global styles in an angular application?

Ans: Global styles can be defined in styles.css file

Q176) What are the different datatypes in TypeScript?


  • Boolean
  • Number
  • String
  • Any
  • Void

Q177) Which data-type is assigned when a variable is declared but no data-type is mentioned?

Ans: By default ‘any’ data-type is assigned

Q178) The structural directive *ngIf, hides or removes an element? What is its significance?


  • When the condition is false,*ngIf removes element from DOM, detachs component from change detection and destroys it
  • If the element is just hidden instead of removing, performance decreases and it will be a memory burden as well

Q179) How do you update your angular project to latest version?

Ans: Using ‘ng update’ command

Q180) How do you bypass corporate proxy to run ‘npm install’ commands?


  • Proxy settings have to be configured using the command:
  • npm config set https-proxy
  • npm config set proxy

Q181) How do you get angular material in your project?


  • Angular material and Angular CDK have to be installed using the command:
  • npm install –save @angular/material @angular/cdk

Q182) What is node_modules?


  • js creates node_modules folder
  • It contains all the modules listed in package.json

Q183) If you donot have a backend ready, how do you make an API call/ http request?

Ans: We have to mock the backend service i.e., have to create the mock json data and have to specify that path in API url

Q184) Which directive need to use for two way data binding in Angular Js?

Ans: Ng-Model

Q185) Which directive need to use for one way data binding in Angular Js?

Ans: Ng Bind

Q186) What is the difference between Ng-Show/Hide and Ng-If?

Ans: Ng-Show/Hide: It will always have a DOM Element but show /hide based on the conditions. Ng-IF : It will insert the DOM Element only if the condition gets satisfied.

Q187) What Angular.copy will do ?

Ans: It will create deep copy of the variable. It doesn’t point to the same memory reference of the original variable.

Q188) What we use to validate the form input?

Ans:cNg-Validate is used to validate text inputs like phone numbers , email , barcodes.

Q189) What is the migration change for Angular 1.4 -Angular 1.5 ?

Ans: Changed .directive to .component.

Q190) What is the exception handler used in Angular js?

Ans: Angular has build in Exception handler service called “$exception handler” which can easily be overwritten.

Q191) What are the build in directives available in Angular Js?

Ans: Ng-Bind , Ng-model, Ng-Class , Ng-If , Ng-pattern, Ng-Repeat.

Q192) How will you declare $watch?

By declaring it in template via expression.
By creating your own watches.
var watch = $scope.$watch(‘watchvariable’ ,function(){
alert(“watch Created”);

Q193)  what is the use of $apply?

Ans: $apply is used to trigger digest cycle explicitly and see the changes propagate normally.

Q194) what is @inject?

Ans: @inject is a manual mechanism of injecting a paramter.

Eg : import(inject) from ‘@angular/core’;
constructor(@inject(Angular) private Angular){};

Here we injected Angular as paramter.

Q195) what is rootscope?

Ans: $rootScope is the parent scope. This is available in the entire application.

Q196) How can we create AngularJS module?

Ans: angular.module()

Q197) Does Scope contains the model data in AngularJS.

Ans: True

Q198) what is ng-controller?

Ans: ng-controller directive creates a controller, gives it a scope and attaches a controller class to the view.

Q199) what is ng-app?

Ans: The ng-app directive is for bootstrapping your application. The element with ng-app is the root element. It wraps the other directives of your application.

Q200)  where we use ng-repeat directive?

Ans: To iterates over a collection of items and generate HTML from it.

Q201) which directive that can be used to include HTML fragments from other files into the view of HTML template?

Ans: ng-include.

Q202) what is the use of ng-change ?

Ans: Evaluates the given expression when the user changes the input to the new value.

Q203) what is ng-view in Angular JS?

Ans: App can have only one ng-view and its the placeholder for all routing.

Q204) What are the types to create custom directive?


Element directive
Attribute directive
CSS directive

Q205) Can we have nested controllers in AngularJS?

Ans: Yes, we can have nested controller.

Q206) Do AngularJS provide reusable components?

Ans: Yes.

Q207) what is the use of $timeout service?

Ans: It can be used to delay the firing of a command.

Q208) what is $provider?

Ans: It is responsible for telling Angular how to create new injectable things called services.

Q209) what are specialized objects in Angular Js?

Ans: Specialized objects are the framework objects like controllers, directives, and filters.

Q210) Which two phases angular application run?

Ans: Angular application runs in two phases – config phase and run phase.

Q211) what is config phase ?

Ans: The config phase is where one can setup the provider, directives, controllers, filters .

Name of the provider in the config phase would be name + Provider. If you create a provider as date , then it should be like dateprovider.

Q212) what is run phase?

The run phase is where Angular compiles your DOM and starts up your app. This is the phase where any service can be instantiated.

Q213) What is promise?

Promise are eventual function that tell what need to do when an operation succeeds or fails. Promise are created with $q service.

Q214) what is defer in promise?

Ans: Defer is a object that exposes promises.It has three methods.


Q215) What we use to transmit data between parent controller to child controller?

Ans: $broadcast

Q216) what is $emit?

Ans:$emit is used to transmit data between child to parent controller.

Q217) what is $on?

Ans: $on is used to handle events.

Q218) Why we use Angular?

Ans: It considered to be faster, lighter and easy to use.  thus making the bundles smaller. It used to create Single Page Application.

Q219) What Is Bootstrapping in Angular?

Ans: Bootstrap the app(like a booting process), using the root component from the specified NgModule.

 Q220) Explain NgModule?

Ans: It defines a module that contains components, directives, pipes, and providers. And Root Component(master page).

 Q221) List out the @NgModule Metadata Properties?

Ans: declarations, imports, exports, providers, entryComponents and bootstrap.

 Q222) How to convert TypeScript and HTML into JavaScript?

Ans: We using transpiler to convert Typescript/HTML into JS.

 Q223) Is it possible to have a multiple Module in our application?

Ans: Yes, FeatureModule(sub module) used to create and handle a multiple module.

 Q224) Explain about use of EventEmitter in Angular?

Ans: It allows one or more functions to be attached to events emitted by the object. When the EventEmitter object emits(trigger) an event, all of the functions attached to that specific event are called synchronously.

 Q225) What are Decorators?

Ans: It’s a design pattern that is used to separate modification of a class without modifying the original source code. In Angular, decorators intimate angular to how the class are perform (like a service, component, directive or pipes).

Q226) How to create a new project in angular using CLI Command?

Ans: ng new <Project-name>

Q227) Difference between Pure and Impure Pipe?


Pure Pipe:

  • It will execute when we change same param value or pipe argument.

Impure Pipe:

  • It will execute for each and every mouse and keyboard events.

Q228) Explain about Directive and Directive Types?


It used to make a DOM level changes dynamically. Types,

  • Component Directive,
  • Attribute Directive,
  • Structural Directive.

Q229) What Is Angular Services?


Services is a Injectable class. It used to create sharable functions, and object values and HTTP calls.

Q230) List out Lifecycle Hooks in Angular?


Angular Lifecycle hooks is a change detection process in component and directive.

  • ngOnChange
  • ngOnInit
  • ngDoCheck
  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked
  • ngOnDestroy

Q231)Explain about Data Binding in angular?


It’s used to communicate between Template into component dynamically. It worked based on Change event. We have two types of Data Bindings are,

  • One-way data binding
  • Two-way data binding

Q232)How to implement Form Validation in angular?


In angular we have two types of Form Creation/Validation process

  • Template Driven Forms
  • Reactive Forms

Q233)Define Dynamic Components?

Ans: It allow to load Component dynamically without user interrupt. Like a news feed or Ads.

 Q234) What Is Router outlet?

Ans: Router outlet create some space to bind navigated page in our application.

Tag: <router-outlet><router-outlet>

Q235)Is it possible to have a multiple router-outlet in the same template?

Ans: Yes, We can differentiate with name attribute.

Like  <router-outlet name=”privateOne”><router-outlet>

Q236)What happened when I should not add classes to module’s declarations in Angular?

Ans: It will throw runtime error, like that particular class didn’t defined in NgModule Schema.

Q237)How to implement Authentication and Authorization process in Angular?

Ans: In angular, we can implement Authentication and Authorization process using Routing.

Authentication/Authorization Router properties are:

canActive, canLoad, canDeActivate, canActivateChild.

Q238)What Is an Entry Component? When we use components to entry Components?

Ans: Whenever we need to load component based on user perspective like popup or dynamically means we need entry component.

Q239)What is AOT (Ahead-Of-Time) Compilation?

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

Q240)Define the ng-content Directive?

Ans: It is an Angular core directive, used to conventional HTML elements have some content between the tags.

Q241)Define Attribute directives

Ans: It’s a one of directive that can listen to and modify the behavior of other HTML elements, attributes, properties, and components.

Q242) In the below code snippet, what is the correct statement to be placed at line number 2 to create a component without any errors(both compile-time and run-time)?
import { Component } from ‘@angular/core’; export class AppComponent { }

Ans: @Component({ selector:my-app, templateUrl:’./app.component.html’})

Q243) Which of the following statement is used to bootstrap a root module called AppModule?

Ans: platformBrowserDynamic().bootstrapModule( AppModule)

Q244) Which of the following property of NgModule is used to declare components, directives and Pipe classes?

Ans: Declarations

Q245) In the below code snippet, what is the correct statement to be placed at line number 6 to display the numbers array as a list?

import { Component } from ‘@angular/core’; @Component({    selector: ‘my-app’,    template: `       <ul>    </ul>  `    })export class AppComponent {    numbers: any[] = [1,2,3];   }

Ans: <li *ngFor = &quot;let num of numbers*>{{ num }} </li>;

Q246) Sam has created a highlight directive as shown below. What color will be applied to the page if the user enters yellow in the input field?


import {Directive, ElementRef,Input} from ‘@angular/core’;




export class HighlightDirective{







 <label>Provide color to be applied on the page</label>

 <input type=’text’ [(ngModel)]=’colorName’>

 <div highlight>Hello </div>

Ans: yellow color will not be applied as there is no binding of model colorName and highlight

 Q247) What is the correct statement to be placed at line number 3 to disable the button?

@Component({    selector: ‘my-app’,            template: ‘<button ….>Click Here</button>’})

export class AppComponent {  exists: Boolean = true; }

Ans: [disabled]= “exists”

 Q248) What type of data binding is used in LoginComponent to bind username and password textboxes with username and password properties of Login class?

Ans: Two Way Data Binding

Q249) In a Library Management application, there is a requirement that all the books should have their price shown in US-dollar symbol where ‘books’ is an array containing ‘title’,’price’,’dateofpurchase’ as attributes. Which of the following is the correct statement to display the price of each book?

Ans: <p *ngFor = *let p of books*>{{ p.price | currency:”USD”:true }} </p>;

Q250) Find out the erroneous line in the below code snippet:

import { PipeTransform} from ‘@angular/core’;

export class LengthPipe implements PipeTransform {

length(value: string): string{

return “Length =”+value.length;



Ans: Line number 4

Q251) Sam has created a custom pipe called ‘MyPipe’ and he wants to use it within a module. In which of the following properties of module metadata, he should declare ‘Mypipe’?

Ans: Declarations

Q252) To which of the following properties, currency pipe is applied in angular application?

Ans: price, totalPrice, grandTotal

Q253) Sam created two components and his requirement is to share data between two components, how he can share data between two components?template?

Ans: Data sharing between two components is not possible in Angular

Q254) What is the main reason we should use ngOnInit hook?

Ans: To perform complex initializations shortly after construction

Q255) Sam has created a component and a stylesheet with name styles.css. He wants to bind his component with styles.css. Which of the following property of @Component decorator he should use to do the same?

Ans: styleUrls

 Q256) Sam wants to create a model driven form for which he should use one of the pre-defined class in the root module. Which class is used for the same?

Ans: ReactiveFormsModule

 Q257) What is the correct statement to bind required and maxlength validators to name field in a reactive form?

Ans: name: [null, [Validators.required, Validators.maxlength(10)]]

Q258) Sam is creating a form in Angular, in which he has a requirement that, when end user goes to any input field he wants to display a popup irrespective of user has typed anything or not, how he can achieve so?

Ans: He can use touched directive.

Q259) Sam is working on a large scale application where he has to create huge forms with lot of validation functionality in it. Which of the following is the best choice for him?

Ans: Model Driven Forms

Q260) custom validator called ‘LengthValidator’ to check the length of a field. Find out the correct statement to configure LengthValidator class in a root module?

Ans: declarations: [LengthValidator]

 Q261) Find the correct statement to be placed at line number 1 to create a custom validator class called EmailValidator to be used in a template driven form?



export class EmailValidator implements Validator {

 validate (control: FormControl){



Ans: @Directive({selector:’emailValidator’})

 Q262) When the css classes ng-valid and ng-invalid written in styles.css file will be applied to LoginComponent textboxes?

Ans: when validators applied to the text boxes fails

 Q263) Select the appropriate option to import the EmpService in the module class, so that it would be available to an entire application

Ans: providers: [EmpService]

 Q264) Find the correct statement to be placed at Line number 1 to create a custom service?

Ans: @Injectable()

No Comments

    Leave a Reply

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

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


    Looking for Training?

    Subscribe & Get latest Videos!

    Looking for Online Training