Angular Interview Questions and Answers | Angular 8 Interview Preparation | Edureka Rewind

hi guys my name is Arya and in this video we are going to be looking at a few angular interview questions that you might face yourself in an angular interview so we are going to have 50 questions 15 of them are going to be fairly easy 15 are going to be of an intermediate level and then the last 10 are just going to be some miscellaneous questions that you might meet randomly okay so let's get started so the first question is what is angular this is a very basic question that might be or may not be asked to you in an angular interview depending on what level of experience you have so let's get on with it so angular is a front-end development framework front-end development refers to anything that a website has that you can see so developing any button the whole design aspect is basically front-end development and angular is a framework that helps you in such development above that angular is maintained and developed by Google so it's a front-end development framework that is made by Google and it's still developed by and it's still maintained by Google above that angular is a typescript based framework typescript is a superset of JavaScript so angular can also be called a javascript-based framework NASA's JavaScript is so commonly used online it is a very good thing that angular is Javascript based above that angular is used for creating spas or single page applications some good examples of single page applications are Gmail Google Maps Facebook and GitHub moving on to our next question of the day and that is what is the difference between angularjs and angular the difference between angularjs and angular are quite a few firstly let's talk about architecture so angularjs supports the MVC design model while angular uses components and directors on the side of language angularjs is using JavaScript while angular uses typescript for expressions and syntax we can say that specific NG directives is required for image and property and of an event on the other hand angular uses the parentheses and the square brackets for event and property binding respectively on the topic of mobile support angularjs doesn't provide any mobile support while angular has tons of mobile support for routing angularjs uses the dollar route provider.wan method and is used for routing configs and for angular we are looking at the routes config and it is used for routing configurations another major difference between angularjs and angular is that angularjs has no support for the concept of dependency injection while angular supports hierarchical dependency injection with a unidirectional tree based change detection on the topic structure angularjs is considerably less manageable than angular because of angular simplified structure that makes development and maintenance of large applications much much easier then on the topic of speed angularjs with its two-way data binding and development efforts are quite quite fast but angularjs since it is an upgrade has much more faster features on the topic of support angularjs has no support or no new updates as it is deprecated on the other hand angular has support and frequent new updates almost every six months you get a new version of angular moving on to the next question is what are the various features of angular so the various features of angular can be charted down in these few points that we have here so the first one is accessibility of applications angular allows creating accessible applications using Aria enabled components built-in a11y test infrastructure and developer guides then the next feature is the angular CLI now angular provides support for command line interface tools these tools can be used for adding components testing instant deploying Etc then is animation support so angular's intuitive API allows the creation of high performance complex animation timelines with very little code cross-platform app development so angular can be used for building an efficient powerful desktop native and Progressive web apps angular provides support for building NATO mobile applications using Cordova ionic or native script angular uses creating high performance offline and zero-step installation Progressive web apps using modern web platform capabilities the popular JavaScript framework can also be used for building desktop apps for Linux Mac OS and windows the fifth point is code generation so angular is able to convert templates into highly optimized code for modern JavaScript virtual machines the next point is code splitting so with the new component router angular apps load quickly the component router offers automatic code splitting so that only the code required to render The View that is requested by a user is loaded the next point is synergy with popular code editors and Ides which is always a plus so angular offers code completion instant error Etc with popular source code editors and Ides the second last point is of templates so angular allows creating UI views with a simple and Powerful template syntax and the last is testing so angular lets you carry out frequent unit tests using Karma the protractor allows running faster scenario tests in a stable way the next question that you might face yourself in an angular interview is that could you explain services in angular so Singleton objects in angular that gets instantiated only once during the lifetime of an application are called services and angular service contains methods that maintain the data throughout the life of an application the primary intent of an angular service is to organize as well as share business logic models or data and functions with various components of an angular application now the functions offered by an angular service can be invoked from any angular component such as a controller or directive now moving on to the next question and that is what are the advantages of using angular well following are the various advantages of using angular the first is the ability to add a custom directive exceptional Community Support facilitates client and server communication features strong features such as admission and event handlers follows the MVC pattern architecture offers support for static template and angular template supports for two-way data binding supports for dependency injection restful services and validation now since we have a question on the advantages it would make sense only to have a question on the disadvantages and that is what are the disadvantages of using angular and these are the disadvantages so complex sbas can be inconvenient and laggy to use due to their size Dynamic applications do not always perform well and learning angular requires a decent time and effort now the next question is one that can change with the versions of Anglo So currently we're on version 8 so the interviewer might ask you what's new in angular 8 just to test your knowledge on whether you're up to date or not so in angular 8 the new things are the IV engine which is the next Generation compilation and rendering pipeline which reduces the bundle size loads faster and in slower networks and is simply easy to use the next new update is the Basel engine so Google open source the software responsible for building most of their projects under the name Basel Basel is a powerful tool which keeps track of other dependencies between different packages and build targets the coolest feature of Basil is that it has a smart algorithm for determining the build dependencies so basically it is a tool that is to help webpack but not replace it another most important thing that is there in angular 8 is differential loading so differential loading is a process by which the browser chooses between modern or Legacy JavaScript based on its own capabilities we now take advantage of this default by performing a modern build and a legacy build of your application and when users load your application they'll automatically get the bundle they need moving on to our next question is what is string interpolation so for string interpolation I'm just going to show it to you instead of reading out an answer so first let me explain what string interpolation is so also referred to as a mustache syntax string interpolation and angular refers to a special type of syntax that makes use of template expression in order to display the component data these template expressions are enclosed within double curly braces I'll just show that to you what I mean the JavaScript expressions are to be executed by angular are added between curly braces and corresponding output is embedded into the HTML code typically these expressions are updated and registered like watches as a part of a digest cycle so let me just show it to you how that looks let's open up vs code so now that we have open up vs code let me show you so this out here is string interpolation we're interpolating the word click so clicks go through the number of Clicks in a counter if you want to know what this is about you can go ahead and check out my angular tutorial where we go through several assignments after each section of learning this is one of the assignments and I have enough faith in that that you will have fun solving these assignments okay so this is what string interpolation is now let's get back to our interview questions without wasting much time and the next question of the day is explain authentication and authorization so the user login credentials are passed to an authenticate API which is present on the server post server validation of the credentials a JWT or a Json web token is returned the JWT has information or attributes regarding the current user the user is then identified of the given JWT and this is called Authentication now post logging in successfully different users have a different level of access while some may access everything access where others might be restricted to only some resources and the level of access is authorization now moving on we have another question and that is explain scope hierarchy in angular so angular organizes the scope with the dollar scope object into a hierarchy that is typically used by views this is known as scope hierarchy in angular it has a root scope that can further contain one or several Scopes called child Scopes in a scope hierarchy each view has its own scope hence the variable set by a views view controller will remain hidden to other view controllers so the next question is how to generate a class using the CLI so I'll just show you the command to generate a class using the CLI all you have to do is open up your command prompt go to the folder that you want to create your class in and all you have to say NG generate class and the name of the class so we can call this class dummy and this will generate a class for you I'm not going to execute this command because it'll just end up wasting our time so we just go ahead to the next question and that is what are templates and angular so templates in angular are written with HTML that contains angular specific elements and attributes these templates are combined with information coming from the model in controller which are further rendered to provide the dynamic view to the user moving on to question number 13 and that is annotations versus decorators so what is the difference between an annotation and a decorator in angular so in angular annotations are only metadata sets of the class using the reflect metadata Library they are used to create an annotation array on the other hand decorators are the design patterns that are used for separating decorations or modifications of a class without actually altering the original source code so that was annotations and decorators moving on to the next question and that is what is a directive in angular so directives are markers on the Dom elements that tell angularjs to attach a specific behavior to that Dom element or even transfer the Dom element and its children in short it extends the HTML most of the directives in angularjs are starting with NG hyphen where NG stands for angular angularjs includes various built-in directives in addition to this you can create custom directives for your own application moving on to the next question is explain the types of directors so there are three kinds of directives in angular components that's competent directives with a template structural directives so they change the Dom layout by adding and removing Dom elements and then there are attribute directors so these chains appearance or behavior of an element component or another directive so components are the most common of the three directives you saw a component for the first time in the getting started tutorial and you can check out this tutorial by going through my angular 8 tutorial another one is structural directives that change the structure of the view a good example of structural director is NG if and ng4 you can learn about them in my angular tutorial too another one is attribute directives and these are used as attributes of elements the built-in NG style directive in a template syntax guide for example can change the several element Styles at the same time okay moving on to our next question and this Begins the mark of the intermediate level of questions and that is what is data binding and its different types in angular data binding is one of the most powerful and important features that allow you to define the communication between the components and the document object model it basically simplifies the process of defining interactive applications without having to worry about pushing and pulling data between your view or template and confident in angular there are four forms of data binding the first one is string interpolation the second one is property binding the third one is event winding and the fourth one is two-way data binding now what are the differences between angular and jQuery is our next question so these are the differences between jQuery and angular so jQuery supports Dom manipulation which is similar to angular jQuery also has no restful API while angular supports restful API jQuery has animation support while angular has animation support too jQuery has no deep linking routing animation while angular has support for deep linking routing jQuery has no form of validation while angular supports all sorts of forms of validation jQuery has no two-way data binding angular supports two-way data binding jQuery supports ax while angular also supports ax these are a few similarities and dissimilarities between jQuery and angular that you can pitch and your angular interview now moving on to question number 18 and that is what are the building blocks of an angular application so there are essentially nine billing blocks of an angular application and these are as follows the first one is a component a component controls one or more views each view is some specific section of the screen every angular application has at least one component known as a root component it is bootstrapped inside the main module known as the root module a component contains application logic defined inside a class this class is responsible for interacting with the view via an API of properties and methods the second is data binding the mechanism by which parts of a template coordinate with the parts of the component is known as data binding in order to let angular know how to connect both sides that is templates and it's component The Binding markup is added to the template HTML the third is dependency injection angular makes use of dependency injection to provide required dependencies to new components typically dependency is required by a component are Services a component construct a parameter tells angular about the services that a component requires so a dependency injection offers a way to supply fully formed dependencies required by a new instance of a class the fourth is directors the template used by angular are dynamic in nature directives are responsible for instructing angler about how to transform the Dom when rendering a template actually components are directives with a template other types of directives are attributes and structural directives the first building block is of metadata so in order to let angler know how to process a class metadata is attached to the class for doing so decorators are used the sixth one is modules also known as NG modules a module is an organized block of code with a specific set of capabilities it has a specific application domain or a workflow like components any angular application has at least one module this is known as the root module typically an angular application has several modules the seven building block is routing and angular router is responsible for interpreting a browser URL as an instruction to navigate to a client generated view the router is bound to links on a page to tell angular to navigate the application view when a user clicks on it the eighth part is Services a very broad category a service can be anything ranging from a value and function to a feature that is required by an angular application technically a service is a class with a well-defined purpose the last billing block is that of a template each confidence view is associated with its companion template a template in angular is a form of HTML tag that lets angular know that how it is meant to render the component our next question is explain the differences between angular expressions and JavaScript expressions so angular Expressions can contain literals operators and variables while JavaScript Expressions can contain literals operators and variables too angular Expressions can be written inside HTML tags while JavaScript Expressions cannot be written inside HTML tags angular does not support conditional loops and exceptions and in JavaScript they do support conditional loops and exceptions angular support has filters while JavaScript has no support for filters another question that you might face yourself in an angular based interview is what is the difference between a service function and a factory function so used for business layer of the application the service function operates as a Constructor function the function is invoked at runtime using the new keyword although the factory function Works in pretty much the same way as a service function does the former is more flexible and Powerful in actual the factory functions are design patterns that help in creating objects our next question for the day is what is aoot or ahead of time compilation so aot stands for angular ahead of time compiler it is used for pre-compiling the application components along with their templates during the build process angular applications which are compiled with aot have a smaller launching time also components of these applications can execute immediately without needing any client-side compilation templates in these applications are embedded as Source within their components it reduces the need for downloading the angular compiler which in turn saves you from a cumbersome task aot compiler can discard the unused directives which are further thrown out using a tree shaking tool our next question is what is angular material so angular material is a UI component Library angular material helps in creating attractive consistent and find a fully functional web pages as well as web applications it does so well following modern web principles including browser portability and graceful degradation our next question is explain the digest cycle in angular so the process of monitoring the watch list in order to track changes in the value of the watch variable is termed the digest cycle in angular the previous and present versions of the scope model values are compared in each digest cycle although the digest cycle process gets triggered implicitly it is possible to start manually by using the apply function our next question for the day is explain the various types of filters in angular so these are the various types of filters that you might find in an angular application the first is currency which formats number to a currency format the second state which formats a date to a specified format then is the filter one and this selects a subset of items from an array then it's Json to format an object to a Json string then is limit to limit an array string into a specified number of elements or characters then is lowercase to format a string to lowercase then is number the format a number to a string then is ordered by that orders an array by an expression and then is uppercase which formats a string to uppercase our next question is what is NG on in it and how to define it so angion in it is a life cycle hook that is called after angular has finished initializing all data bound properties of a directive and it is defined as ngon in it and then you just open and close the brackets and then you can just say void if you want our next question for the day is what is an spa or single page application and can you contrast Spa technology with traditional web technology so in the spa technology only a single page which is index HTML as maintained through the URL keeps changing unlike the traditional web technology Spa technology is faster and easy to develop as well in the conventional web technology as soon as a client requests a web page the server sends the resource however when again the client requests for another page the server responds again with sending the requested resource the problem with this technology is that it requires a lot of time the next question is what are angular modules so all the angular apps are modular and follow a modularity system known as NG modules these are the containers which hold a cohesive block of code dedicated specifically to an application domain a workflow or some closely related set of capabilities these modules generally contain components service providers and other code files whose scope is defined by containing NG modules with modules makes the code becoming more maintainable testable and readable also all the dependencies of your application are generally defined in modules only so this is what a module looks like this is your module file as you guys can see it has everything that you need out there and this is your app.module.ts which has your declaration your Imports and providers and bootstrap components our next question for today is on which type of components can we create a custom directive so the following types of components are used to create a custom director so angular provides supports to create custom directives on the following first is the element directive so directive activates when a matching element is encountered another one is attribute so directive activates when a matching attribute is encountered then is a CSS based directive which activates when a matching CSS style is encountered and another one is a comment based directive and this directive activates when a matching comment is encountered our next question is what are angular animations so angular's animation system is built on CSS functionality in order to animate any property that browser considers animatable these properties include positions sizes transforms colors borders Etc the angular module for animations are located in the angular animation and angular slash platform browser and these dependencies are automatically added to your project when you create a project using the angular CLI our next question is what is one-way data binding and two-way data binding and differentiate between them so in one way data binding the view or the UI does not update automatically whenever the data model changes you need to manually write custom code in order to update it every time the view changes whereas in two way data binding the view or the UI part is updated implicitly as soon as the data model changes it is a synchronization process unlike one-way data binding our next question is what are the life cycle hooks for components and directors so an angular component has a discrete life cycle which contains different phases as it transits through birth till death in order to gain better control of these phases we can hook into them using the following so the first is Constructors it is invoked when a component or directive is created by calling new on the class then is NG on changes it is invoked Whenever there is a change or update in any of the input properties of the component then there is NG on init it is invoked every time a given component is initialized this Hook is only once called in its lifetime after the first NG on changes then is Angie do check it is invoked whenever the change detector of the given component is called this allows you to implement your own change detection algorithm for the provided component then there is NG on destroy it is invoked right before the component is destroyed by angular you can use this hook in order to unsubscribe observables and detach event handlers for avoiding any kind of memory leaks our next question number 32 is what is view encapsulation and how many ways are there to do it in angular to put it simply view encapsulation determines whether the style defined in a particular confidence will affect the entire application or not angular supports three types of view encapsulation the first is emulated that is styles used in other HTML spread to the confidence then there is native that the styles used in other HTML doesn't spread to the component and then there is none that is style defined in the component are visible to all components of the application our next question is the Dom versus the bom so the Dom stands for document object model while the bom stands for browser object model so the Dom represents a content of a web page while the browser works on the level above the web page to include browser attributes the third is all the objects are arranged in the screen structure while in a bom all Global JavaScript object variables and functions become members of the window object and in a Dom w3c recommend standard specification and in the bom it is an access and manipulate browser windows our next question is what are template expressions a template expression produces a value similar to any JavaScript expression angular executes the expression and assigns it to a property of a binding Target the Target might be an HTML element a component or a directive in the property binding a template expression appears in quotes to the right of the symbol AS in property and in interpolation syntax the template expression is surrounded by double curly braces and this is an example so the example out here is username so out here the expression is username and it is surrounded in double curly braces now the next question is what are template statements now a template statement responds to an event raised by a binding Target such as an element component or directive the template statement appears in quotes to the right of the symbol like event equals to statement so the example out here is edit profile is a template statement our next question is what are pipes a pipe takes in data as input and transforms it to a desired output for example let us take a pipe transformation to a component towards the property into a human friendly date using data pipe our next question is what is a parameterized pipe now a pipe can accept any number of optional parameters to fine-tune its output the parameterized pipe can be created by declaring the pipe name with a colon and then parameters value if the pipe accepts multiple parameters we have to separate the values with colons our next question is what is the difference between pure and impure pipes a pure pipe is only called when angular detects a change in the value of the parameters passed to a pipe for example any changes to a primitive input value that is a string number Boolean or a symbol or a changed object reference and an impure pipe is called for every change detection cycle no matter whether the value of parameter changes that is an impure pipe is called often as well as every keystroke or Mouse move our next question is pretty important and that is what is rxgs so rxjs is a library for composing asynchronous and callback based code in a functional reactive style using observables many apis such as HTTP client produce and consume rxjs observables and also use operators for processing observables our next question is what are events in angular so events in angular are specific directives that help in customizing the behavior of various term events few of the angular events are NG click NG copy and gcat NG double flick NG keydown NG key press NG key up NG massdown NG Mouse enter NG Mouse leave NG Mouse move NG Mouse over NG Mouse up and NG blur our next question is what is the difference between promise and observables so as soon as a promise is made the execution takes place however this is not the case with observables because they are lazy this means that nothing happens until a subscription is made while promises handle a single event observable is a stream that allows passing of more than one event the Callback is made for each event is an observable another question related to rxjs that might be asked to you is what are the utility functions provided by rxjs so the rxjs library also provides below utility functions for creating and working with observables so these are converting existing code for asynchronous operations into observables iterating through the value in a stream mapping values to different types filtering streams and last but not the least composing multiple streams our next question is explain how customer elements work internally so these are the steps in order for custom elements functionality the first is app registers custom element with browser so use the custom create element function to convert a component into a class that can be registered with browser as a custom element app adds custom elements to the Dom and the add custom element just like built-in HTML elements directly into the Dom the third step is browser instantiates compost based class so the browser creates an instance of the registered class and adds it to the Dom and the last part is instance provides content with data binding and change detection so the content within the template is rendered using the components and the Dom data our next question is what are Global angular apis so the angular Global API is a combination of global JavaScript functions for performing various common tasks like comparing objects iterating objects and converting data there are some common Global angular functions or apis like angular.lowercase which converts a string to lowercase angular dot uppercase which converts the string to uppercase angular dot a string that returns true if the current reference is a string then angular dot is number that returns true if the current reference is a number our next question is related to routing and this is what are router events so during each navigation the router image navigation events through the router.events property allowing you to track the life cycle of the route the sequence of router events is as below the first is navigation start then is Route config load start route config load and routes recognized guards check start child activation start activation start guards check and resolve start resolve end activation end child activation n navigation end navigation cancel navigation arrow and scroll our next question of the day is what are the advantages with aot so these are the benefits that aot come with first one is faster rendering the browser downloads a pre-compiled version of the application so it can render the application immediately without compiling the app fewer asynchronous requests it inlines internal HTML template and CSS style sheets within the application JavaScript which eliminates separate AAC request then a smaller angular framework download size that it doesn't require downloading the angular compiler hence it dramatically reduces application payload detect template errors earlier so detects and reports templates binding errors during the build step itself then there is better security and it compiles HTML templates and confidence into JavaScript so there won't be any injection attacks question number 47 is what are the restrictions of metadata so in Anglo you must write metadata with the following General constraints the first is write expression syntax within the supported range of JavaScript features the second is the compiler can only reference symbols which are exported the third is only called the function supported by the compiler and the fourth one is decorated and data bound class members must be public question number 48 is what are the limitations with the web worker so you need to remember two important things when using web worker in angular projects the first one is some environment or platform like angular slash platform server used in the server side rendering doesn't support web worker in this case you need to provide a fallback mechanism to perform the computation to work in this environment the second is running angular in webworker using angular platform webworker is not yet supported by the angular CLI our second last question of the day is explain NG app directive in angular so ngap directive is used to Define angular applications which let us use the auto bootstrap in an angular application it represents the root element of any angular application and a generally declared HTML or body tag any number of NG app directives can be defined within an HTML document but just a single angular application can be officially bootstrapped implicitly rest of the application must be manually bootstrapped so for example we have the first name in a div out here and we have the full name and that is how you bootstrap stuff our last question of the day is how can you hide an HTML element just by a button click in angular now an HTML element can be easily hidden using the NG hide directive in conjunction along with a controller to hide an element on button click so all you have to do is create a button that says hide element and in the controller you have to write a function which is this is dot hide which is false and then you just convert that to true and this can be done with the NG dot hide directive while it is bound to the is hide variable so that's it for today guys I hope you had fun learning about all sorts of angular questions that you might face in an interview I hope you guys tune in for further angular interview questions and videos that's it for me for today goodbye

Channel: edureka!

Views: 3,818

Keywords: yt:cc=on, Angular Interview Questions and Answers, angular 8 interview questions, angular interview questions, angular coding interview questions, Angular 8 Interview Question and Answers, angular interview, angular questions, angular basic interview questions, angular interview questions and answers for experienced, angularjs interview questions and answers, Angular 8, edureka, angular edureka, edureka angularjs

Id: bwRfGlpd1vo

Length: 38min 52sec (2332 seconds)

Published: Tue Mar 21 2023