Name And Describe Different Phases Of The Angularjs Scope Lifecycle
The phases of AngularJS Scope lifecycle are as follows:
- Creation: The root scope is created during the application.
- Model mutation: Directives register watches on the scope that propagate model values to the DOM.
- Watcher registration: Mutations should only be made only within the scope.apply. This is done implicitly by AngularJS.
- Mutation observation: After apply, the digest cycle starts on the root scope, during which watched expressions are checked for any model mutation.
- Scope destruction: The scope creator will destroy unnecessary child scopes using the scope.destroy API. Memory used by the child scopes are then reclaimed by the garbage collector.
Explain The Difference Between Template Drivenforms And Reactive Forms In Angular
Template Driven Forms: These are model-driven forms where you write the logic, validations, controls, etc., in the template part of the code using directives. They are suitable for simple scenarios and uses two-way binding with syntax.
Reactive Form: is a model-driven approach for creating forms in a reactive style. These are built around observable streams, where form inputs and values are provided as streams of input values.
Again if you need a mental picture to help you have a clear idea about the difference between the two forms types:
The different types of commands would be:
- ng generate class my-new-class: add a class to your application
- ng generate component my-new-component: add a component to your application
- ng generate directive my-new-directive: add a directive to your application
- ng generate enum my-new-enum: add an enum to your application
- ng generate module my-new-module: add a module to your application
- ng generate pipe my-new-pipe: add a pipe to your application
- ng generate service my-new-service: add a service to your application
Running the Project: ng serve
What Are Modules In Angular
A module is a logical boundary of our application. It is used to encapsulate code dealing with a specific aspect of the application, such as routing, HTTP, validation, etc. The main reason why modules are used is to enhance application composability. For example, if we wish to implement validation logic using different libraries, then for the one we have already implemented, we can create a new validation module and replace the current one with the new one, and our application would work just the same. In Angular, we create a module using the NgModule decorator.
Don’t Miss: What To Say In A Thank You Email After Interview
What Are The Technologies Used In Angular
Angular is a modern frontend JavaScript framework developed by Google. Angular itself makes use of several technologies for several reasons to accomplish certain tasks easily as well as to allow developers to have a better experience while developing applications with it. Angular uses TypeScript, which is a superscript of JavaScript. So, any valid JavaScript is a valid TypeScript. However, TypeScript allows us to write JavaScript as a strongly typed language, and we can define our own types as well, which makes catching bugs much easier. It also uses RxJS, which allows developers to better deal with asynchronous operations.
Enroll in our UI UX course to master UI UX design from masters!
Angular Interview Questions With Answers
- How to answer basic questions around directives, CLI,Component , Modules, Decorator,Annotations, Types of Bindings and SPA.
- Tackling Advanced interview questions around routing,Lazy Loading, Services & Dependency Injection .
- To the point answers around ViewChild,ViewChildren,ContentChild , ContentChildren & Content projection.
- Giving crystal clear answers on constructor vs ngonInit and Angular component life cycle.
- Simple lucid answers to Http calls, Routing , Pipes ,Error handling questions and different ways of passing data and in what scenarios to use them.
- Tricky questions of RxJs like observable , observer , operators, promise vs rxjs, importance of subscribe and understanding push/pull/reactive/imperative.
You May Like: Best Way To Interview Someone
What Is The Difference Between Interpolated Content And The Content Assigned To The Innerhtml Property Of A Dom Element
Angular interpolation happens when in our template we type some JavaScript expression inside double curly braces }. This is used to add dynamic content to a web page. However, we can do the same by assigning some dynamic content to the innerHTML property of a DOM element. The difference between the two is that, in Angular, the compiler always escapes the interpolated content, i.e., HTML is not interpreted, and the browser displays the code as it is with brackets and symbols, rather than displaying the output of the interpreted HTML. However, in innerHTML, if the content is HTML, then it is interpreted as the HTML code.
What Do You Understand By The Router Imports
The Angular Router, representing a particular component view for a given URL, is not part of Angular Core. It is available in a library named @angular/router, and we have to import the required router components. This process is called router imports.
See the following example of how we can import them in the app module:
Also Check: How To Answer Conflict Resolution Interview Questions
What Are Filters In Angular Name A Few Of Them
Filters are used to format an expression and present it to the user. They can be used in view templates, controllers, or services. Some inbuilt filters are as follows.
- date – Format a date to a specified format.
- filter – Select a subset of items from an array.
- Json – Format an object to a JSON string.
- limitTo – Limits an array/string, into a specified number of elements/characters.
- lowercase – Format a string to lowercase.
What Are Class Decorators In Angular
Answer: The class decorator contains the metadata of the suitable class type. It appears just before the class definition and declares the class to be of a certain type. Some class decorators are:
I hope you found this article helpful and useful for you. Let me know in the comment section if you want me to write a more detailed article about some specific topics and concepts in Angular.
Read Also: Long Term Goals Examples For Interview
How Is Dependency Injection Done In Angular
View answer
Hide answer
In Angular, a class asks for services or objects when it is instantiated, which means if a class is invoked, it doesnt create any objects, rather it depends on an external source to instantiate objects, services, or parameters. In this process, an injectable service is created and registered. Injectors can be configured in three different ways,
- @Injectable decorator for the service.
- @NgModule for NgModule.
What Are The Steps To Use Animation Module
You need to follow below steps to implement animation in your angular project,
importfrom'@angular/core' importfrom'@angular/platform-browser' importfrom'@angular/platform-browser/animations' @NgModuleexportclassAppModule
importfrom'@angular/animations'
@Component
You May Like: What Do They Ask In Interviews
What Is The Purpose Of Ngfor Trackby
The main purpose of using *ngFor with trackBy option is performance optimization. Normally if you use NgFor with large data sets, a small change to one item by removing or adding an item, can trigger a cascade of DOM manipulations. In this case, Angular sees only a fresh list of new object references and to replace the old DOM elements with all new DOM elements. You can help Angular to track which items added or removed by providing a trackBy function which takes the index and the current item as arguments and needs to return the unique identifier for this item.
For example, lets set trackBy to the trackByTodos method
< div*ngFor="let todo of todos trackBy: trackByTodos"> }< /div>
and define the trackByTodos method,
trackByTodos: number
What Is The Purpose Of The Common Module In Angular
In Angular, the common module that is available in the package @angualr/common is a module that encapsulates all the commonly needed features of Angular, such as services, pipes, directives, etc. It contains some sub-modules as well such as the HttpClientModule, which is available in the @angular/common/http package. Because of the modular nature of Angular, its functionalities are stored in small self-contained modules, which can be imported and included in our projects if we need these functionalities.
Read the differences Angularjs, Angular 2 and Angular 4 in our comparative blog on Angularjs vs Angular 2 vs Angular 4!
Read Also: How To Do Great In A Job Interview
What Do You Understand By Angular Mvvm Architecture
The MVVM architecture or Model-View-ViewModel architecture is a software architectural pattern that provides a facility to developers to separate the development of the graphical user interface from the development of the business logic or back-end logic . By using this architecture, the view is not dependent on any specific model platform.
The Angular MVVM architecture consists of the following three parts:
Model: The Model consists of the structure of an entity and specifies the approach. In simple words, we can say that the model contains data of an object.
View: The View is the visual layer of the application. It specifies the structure, layout, and appearance of what a user sees on the screen. It displays the data inside the Model, represents the model, and receives the user’s interaction with the view in the form of mouse clicks, keyboard input, screen tap gestures, etc., and forwards these to the ViewModel via the data binding properties. In Angular terms, the View contains the HTML template of a component.
ViewModel: The ViewModel is an abstract layer of the application. It is used to handle the logic of the application. It also manages the data of a model and displays it in the view. View and ViewModel are connected with two-way data-binding. If you make any changes in the view, the ViewModel takes a note and changes the appropriate data inside the model.
What Do You Understand By Directives
Directives add behavior to an existing DOM element or an existing component instance. The basic difference between a component and a directive is that a component has a template, whereas an attribute or structural directive does not have a template and only one component can be instantiated per an element in a template.
We can differentiate between three types of directives:
- Components: These directives have a template.
- Structural directives: These directives change the DOM layout by adding and removing DOM elements.
- Attribute directives: These directives change the appearance or behavior of an element, component, or another directive.
Recommended Reading: Python Coding Challenges For Interviews
Explain The Main Difference Between Angularjs And Backbonejs
| AngularJS | Backbone.js |
| AngularJS is a JavaScript-based open-source framework which is designed to support dynamic web applications. | backbone.js is a framework which abstracts DOM into views and data into models and then binds both using events. |
| Its performance is good as it provides two-way data binding process | Backbone.js technology offers faster performance than AngularJS if the data sets are small |
| It works on MVS . | It works on MVP architecture. |
| AngularJS uses dynamic HTML attribute to make an easy to understand the application. | Backbone.js uses underscore templates to understand the application. |
| It has large community support. | Community support is restricted to the underscore template. |
What Is Index Property In Ngfor Directive
The index property of the NgFor directive is used to return the zero-based index of the item in each iteration. You can capture the index in a template input variable and use it in the template.
For example, you can capture the index in a variable named indexVar and displays it with the todo’s name using ngFor directive as below.
< div*ngFor="let todo of todos let i=index"> }-}< /div>
Also Check: Amazon Principal Technical Program Manager Interview Questions
Describe The Angularjs Boot Process
When a page is loaded into the browser, several things happen:
- HTML document file gets loaded, and evaluated by the browser. AngularJS JavaScript file gets loaded, and the angular global object is created. Next, JavaScript file which is responsible for registering the controller functions is executed.
- AngularJS scans through the HTML to find AngularJS apps and views. Once the view is found, it connects that particular view to the corresponding controller function.
- AngularJS executes the controller functions. It further renders the views with data from the model populated by the controller, and the page gets ready.
What Is Host Property In Css
The :host pseudo-class selector is used to target styles in the element that hosts the component. Since the host element is in a parent component’s template, you can’t reach the host element from inside the component by other means.For example, you can create a border for parent element as below,
//Other styles for app.component.css//...:host
Also Check: What Are Some Interview Questions And Answers
What Is The Use Of Filter In Angularjs
A filter is used to format the value of the expression to display the formatted output. AngularJS allows us to write our own filter. Filters can be added to expressions by using the pipe character |, followed by a filter. For example:
Filters can be applied in view templates, controllers, services and directives. It is important to know that filters are case-sensitive. There are some built-in filters provided by AngularJS such as Currency, Date, Filter, JSON, Limit, Lowercase, Number, Orderby, and Uppercase.
What Is The Difference Between Promise And Observable
Below are the list of differences between promise and observable,
| Observable | Promise |
|---|---|
| Execute immediately on creation | |
| Provide multiple values over time | Provide only one |
| Push errors to the child promises | |
| Provides chaining and subscription to handle complex applications | Uses only .then clause |
Multi-casting is the practice of broadcasting to a list of multiple subscribers in a single execution.
Let’s demonstrate the multi-casting feature,
varsource=Rx.Observable.from varsubject=newRx.Subject varmulticasted=source.multicast // These are, under the hood, `subject.subscribe`:multicasted.subscribe multicasted.subscribe // This is, under the hood, `s
Also Check: What Are Some Common Interview Questions And Answers
How Can Someone Make An Ajax Call Using Angularjs
AngularJS contains $https: control, which works as a service to make ajax call to read data from the server. The server creates a database call to retrieve the desired records. AngularJS requires data in JSON format. Once the data gets ready, $https: can be used to retrieve the data from the server in the following manner.
What Are Template Statements
Template statements are properties or methods used in HTML for responding to user events. With these template statements, the application that you create or are working on, can have the capability to engage users through actions such as submitting forms and displaying dynamic content.
For example,
< button =”deleteHero”> Delete hero< /button>
The template here is deleteHero. The method is called when the user clicks on the button.
Full Stack Java Developer Course
Read Also: Software Engineer Interview Coding Questions
How Do You Hide An Html Tag
You can use the ngHide directive to reveal or hide an HTML element that is provided to the attribute. By removing or adding the .ng-hideCSS class onto the element, the HTML element is hidden or revealed. The .ng-hide CSS class is predefined.
The .ng-hide class will style an element with display: none !important by default. This can be overwritten with the .ng-hide CSS class.
What Is Transpiling In Angular
Transpiling is the process of transforming the source code of one programming language into the source code of another. Typically, in Angular, this implies translating TypeScript to JavaScript. TypeScript can be used to develop code for your Angular application, which is subsequently transpiled to JavaScript. This occurs naturally and internally.
Also Check: What To Ask In An Interview
The Benefits Of Using Angular
What advantages can you get if you use Angular in your project? Lets take a closer look at this. The benefits of using Angular are as follows:
- It supports the popular Model-View-Controller architecture. You can isolate the application logic from the UI visual layer, which is important for ensuring the separation of concerns.
- The Angular architecture helps developers to locate the code that requires changes, which helps in development.
- Angular supports modules, which helps developers.
- Thanks to Angular Injector, Angular supports services and hierarchical dependency injection. This is another way in which it supports developers.
- Angular uses TypeScript, a superset of JavaScript. It eliminates common programming errors, resulting in better-quality code.
- Programmers can use the comprehensive documentation of Angular.
Read more about the advantages of Angular in What are the advantages and disadvantages of Angular?.
What Do You Understand By Dependency Injection In Angularjs
Dependency Injection is one of the best features of AngularJS. It is a software design pattern where objects are passed as dependencies rather than hard coding them within the component. It is useful for removing hard-coded dependencies and making dependencies configurable. To retrieve the required elements of the application that need to be configured when the module is loaded, the “config” operation uses Dependency Injection. It allows separating the concerns of different components in an application and provides a way to inject the dependent component into the client component. By using Dependency Injection, we can make components maintainable, reusable, and testable.
A simple case of dependency injection in AngularJS is shown below:
Here, a controller is declared with its dependencies.
AngularJS provides the following core components which can be injected into each other as dependencies:
- It states that the value which is entered is invalid.
- $errorIt states the exact error.
Moreover, we can use with a form declaration to disable the browser’s native form validation.
Recommended Reading: What Are The Best Interview Questions To Ask
