Angular Interview Questions

Transcription

https://mustmoveon.comAngular Interview QuestionsAngular is one of the most popular framework for building mobile & web application.Angular web framework is written in Type Script and is developed by Google. It has becomeone of the widely used framework and hence there is a demand. This has opened up lot ofopportunities in this area. Hence below are almost 100 Angular Interview Questions whichwill help you prepare for the interview.Q 1: Does NgModules have types? If yes, what are they?Ans. Yes, NgModules also have following types.1.2.3.4.5.Features ModuleRouting ModuleService ModuleWidget ModuleShared ModuleQ 2: How does angular performs multiple operations in single pipe?Ans: Angular can perform multiple operations with single expression. It is called chainingpipe. Sometimes we need to perform multiple operations on single input. That can be donewith adding multiple pipes on the input.Q 3: How to define transpilling? Is it related to angular?Ans: It is the process of converting the typescript into javascript (using Traceur, a JScompiler). Though typescript is used to write code in the Angular applications, the code isinternally transpiled into javascript. This is very helpful in code writing for developer. It’sintroduced with angular.Q 4: How to start an angular application ?.Ans: main.ts is the entry point of your application, compiles the application with just-in-timeand bootstrap the application.The Bootstrap is the root AppComponent that Angular creates

https://mustmoveon.comand inserts into the “index.html” host web page.The bootstrapping process creates thecomponents listed in the bootstrap array and inserts each one into the browser (DOM).Q 5: How to start an angular application?Ans: main.ts is the entry point of your application, compiles the application with just-in-timeand bootstrap the application.The Bootstrap is the root AppComponent that Angular createsand inserts into the “index.html” host web page.The bootstrapping process creates thecomponents listed in the bootstrap array and inserts each one into the browser (DOM).Q 6: Is there any difference between angularJs and Javascript expressions?Ans: Yes, there are differences. Although angular is also a framework built on javascript, stillthere are differences. Like, angular expressions can be written in HTML but not with js.Loops,Iteration and conditional statements can be used in js but not in angular. Js doesn’tsupport filters.Q 7: Is there any difference between ng routing and UI routing?Ans: The ng routing is deep linking services and directives for angular applications whereasthe UI routing is a 3rd party module routing and is very powerful. It does everything an ngrouter does as well as has many other extra functions.Q 8: What is changed with angular 7 for angular/core?Ans: Unlike the previous versions of Angular, the 7th major release comes with splitting in@angular/core. This is done in order to reduce the size of the same. Typically, not each andevery module is required by an Angular developer. Therefore, in Angular 7 each split of the@angular/core will have no more than 418 modules.Q 9: What is SPA?Ans: SPA is Single Page Applications. They are web applications that use only one HTMLpage. As the user interacts with the page, new content is dynamically updated on that masterpage. Navigation between pages happens without refreshing the whole page. Angular usesAJAX and to dynamically update HTML elements. Angular Routing can be used to makeSPAs. The result is an application that feels more like a desktop app rather than a webpage.

https://mustmoveon.comQ 10: How Constructor is different than ngOnInit?Ans: The Constructor is a default method of the class that is executed when the class isinstantiated and ensures proper initialization of fields in the class and its subclasses. ngOnInitis a life cycle hook called by Angular to indicate that Angular is done creating thecomponent. We have to import OnInit in order to use like this (actually implementing OnInitis not mandatory but considered good practice).Q 11: How to handle Events in Angular?Ans: Any activity (button click, mouse click, mouse hover, mouse move, etc) of a user on afrontend/web screen is termed as an event. Such events are passed from the view (.HTML)page to a typescript component (.ts).Q 12: What is @Component in the metadata?Ans: This indicates that particular class is a component. It can be used write anything aboutparticular functionality. It also has the ability to render the view and take action for anythingdone on UI. It can also read the data from services.Q 13: What is templateUrl in the metadata?Ans: This is the address for the HTML linked to the component. If we have small portion oftags then it can be directly placed component but in case we want to put it in a separate htmlfile then templateUrl is used to pass the address of that file.Q 14: What is DI in angular?Ans: DI stands for Dependency Injection. It is a powerful pattern for managing codedependencies. DI is a way to create objects that depend upon other objects. Angular has itsown DI framework pattern, and you really can't build an Angular application withoutDependency injection (DI).Q 15: What is @angular/upgrade?Ans: @angular/upgrade: This is the ngUpgrade library, which allows us to migrate ourAngularJS application to Angular.

https://mustmoveon.comQ 16: What are the steps to configure an angular application?Ans: To set up an Angular App we must follow certain steps as mentioned below:1. module will be created at first.2. A controller will be assigned to the module.3. The module will be linked with the HTML template(i.e. UI or View) with anangular app(ng-app).4. The HTML template will be linked with the controller(i.e JS) with an ngcontroller directive.Q 17: What is @angular/compiler?Ans: This is Angular's template compiler. It takes the templates and converts them into thecode that makes your application run and render. You almost never need to actually interactwith it.Q 18: What are angular expressions?Ans: Angular js Expression is JavaScript alike code snippets used to bind expression data inview or HTML. Angular expressions are written inside two curly braces.{{x y}}Q 19: What is End-to-end testing in angular applications?Ans: End-to-end (e2e) testing involves testing an application from start to finish to determinewhether all the components are working properly. It catches issues within an applicationrelated to integration and flow.Q 20: What is @angular/core package used for?Ans: @angular/core: is the critical runtime parts of Angular needed by every application. Ithas things like the metadata decorators (e.g. Component, Injectable), all the dependencyinjection stuff, and the component life-cycle hooks like OnInit.Q 21: What is data binding and how many ways are there in angular to do it?

https://mustmoveon.comAns: Data binding is assigning the values to variables. It happens between the HTML(template) and typescript (component). Data binding can be done in 3 ways:(i) Property Binding (ii) Event Binding (iii) Two-Way Data Binding.Q 22: What is angular complier and why we need it?Ans: The Angular compiler converts our applications code (TypeScript) into JavaScript code HTML before browser downloads and runs that code. It converts whole code into 3 to 4files which we use to render the page in browser. Launching typescript code directly inbrowser is not possible.Q 23: What is ngOnChanges and when should we use it?Ans: Responds when angular sets its data-bound property which receives the current andprevious object values. It can be used whenever there is a requirement to take any action onobject value change.Q 24: How to transfer data between components?Ans: First, we have to create a service. Service is used to share the data between componentsin Angular in a very easy and fast way. Service can share the data at component as well asmodule level. Angular application makes call to webservices through angular service andstore the data.Q 25: How does parent and child interact in angular?Ans: When passing data from Parent to Child component, you can use the @Input decoratorin the Child component. When passing data from Child to Parent component, you can use the@Output decorator in the Child component.Q 26: What are directives and when to use it?Ans: Directives are special markers on a DOM element that tell the html compiler to attach aspecified behavior to the DOM element. Directives start with ng-prefix. Some of the built-indirectives include ngInit, ngApp, ngRepeat, ngModel, ngBind and ngClass.

https://mustmoveon.comQ 27: What is a cookie and how to use it in angular?Ans: A cookie is a small piece of data sent from a website and stored on the user's machineby the user's web browsers while the user is browsing. In angular also we can read/write theinformation from cookie. It is done with the help of javascript methods.Q 28: What is AOT in angular?Ans: Ahead-of-Time (AOT) – It is one of the angular compilers and compiles our app atbuild-time (compiles while running). As it complies the application ahead of time so it makesthe application loading little faster and increases the build time. It is good for applicationwhere requirement is to load the first page sooner.Q 29: What is the sequence of angular hooks lifecycle?Ans:OnChange() - OnInit() - DoCheck() - AfterContentInit() - AfterContentChecked() - AfterViewInit() - AfterViewChecked() - OnDestroy().Q 30: What is @angular/platform-browser used for?Ans: This is everything dom and browser related, especially pieces that help render the dom.This is the package that includes bootstrapStatic, which is the method that we use forbootstrapping our applications for production builds.Q 31: What does ngOnDestroy used for?Ans: It cleanup just before Angular destroys the directive/component. Unsubscribeobservables and detach event handlers to avoid memory leaks. If there is a requirement toperform any operation just before the component is destroyed then this method is the bestplace to do it.Q 32: What Is HttpClient in Angular?Ans: HttpClient is performing HTTP requests and responses.Most of all web applications communicate with backend services over the HTTP protocoland all modern browsers support two different APIs for making HTTP requests i.e.

https://mustmoveon.com1. XMLHttpRequest interface2. fetch() APIsQ 33: How do Observables differ from Promises?Ans: As soon as a promise is made, the execution takes place. However, this is not the casewith observables because they are lazy. This means that nothing happens until a subscriptionis made. While promises handle a single event, observable is a stream that allows passing ofmore than one event. A callback is made for each event in an observable.Q 34: What is JIT in angular?Ans: Just-in-Time (JIT) – it is one of the angular compilers. It compiles our app in thebrowser at runtime (compiles before running). It reduces build time but increases the time ofapplication loading. This is good for small applications but for big applications it mayincreases the load time.Q 35: What Is Parameterizing Pipe?Ans: A pipe can accept any number of optional parameters to achieve output. The parametervalue can be any valid template expressions. To add optional parameters, follow the pipename with a colon (:). Its looks like- currency: USD.Q 36: What is ng-If directive and what is the use of it?Ans: ng-if directive is used as if clause which removes the HTML element if the expressionbecomes false.Syntax element ng-if ”expression” /element Q 37: What is routing and how angular routes between components?Ans: An Angular router is responsible for interpreting a browser URL as an instruction tonavigate to a client-generated view. The router is bound to links on a page to tell Angular tonavigate the application view when a user clicks on it. @angular/router package has theinformation about the routing.

https://mustmoveon.comQ 38: What Is PathLocationStrategy?Ans: A LocationStrategy is used to configure the location service that represents its state inthe path of the browser's URL and the PathLocationStrategy is a default routingstrategy.When you are using the PathLocationStrategy, you must provide APP BASE HREFin the module or base element in the app document.Q 39: What is @Input in angular and how it works?Ans: @Input decorator binds a property within one component (child component) to receivea value from another component (parent component). This is one-way communication fromparent to child. The component property should be annotated with a @Input decorator to actas input property. A component can receive a value from another component usingcomponent property binding.It can be annotated at any type of property such as number,string, array or user-defined class. To use an alias for the binding property name we need toassign an alias name as.@Input(alias)Q 40: What is the purpose of using package.json in the angular project?Ans: With package.json, it is easy to manage the dependencies of the project. If we are usingtypescript in the angular project then we can mention the typescript package and version oftypescript in package.json.Q 41: What is @angular/common?Ans: These are the commonly needed services, pipes, and directives for Angular. Thispackage also contains the new HttpClient as of version 4.3, so we no longer need@angular/common.Q 42: What is ViewEncapsulation?Ans: ViewEncapsulation determines whether the styles defined in a particular componentwill affect the entire application or not. It has 3 types. Emulated – Styles used in other HTML spread to the component.Native – Styles used in other HTML doesn’t spread to the component.None – Styles defined in a component are visible to all components of theapplication.

https://mustmoveon.comQ 43: What is ng-show directive?Ans: ng-show directive is used to show the HTML element if the expression becomes true.And if the expression becomes false then the HTML element will be hi

opportunities in this area. Hence below are almost 100 Angular Interview Questions which will help you prepare for the interview. Q 1: Does NgModules have types? If yes, what are they? Ans. Yes, NgModules also have following types. 1. Features Module 2. Routing Module 3. Service Module 4.