Angularjs Interview questions

Angularjs Interview questions


1. What Is Angular Js?

Angular JS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain.

Following are the features of Angular JS framework.

1.Angular JS is a powerful JavaScript based development framework to create RICH Internet Application (RIA).

2.Angular JS provides developers options to write client side application (using JavaScript) in a clean MVC (Model View Controller) way.

3.Application written in Angular JS is cross-browser compliant. Angular JS automatically handles JavaScript code suitable for each browser.

4.Angular JS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

2. What Is Data Binding In Angular Js?

Data binding is the automatic synchronization of data between model and view components. ng-model directive is used in data binding.

3. What Is Scope In Angular Js?

Scopes are objects that refer to the model. They act as glue between controller and view.

4. What Are The Controllers In Angular Js?

Controllers are JavaScript functions that are bound to a particular scope. They are the prime actors in Angular JS framework and carry functions to operate on data and decide which view is to be updated to show the updated model based data.

5. What Are The Services In Angular Js?

Angular JS come with several built-in services. For example $http service is used to make XMLHttpRequests (Ajax calls). Services are singleton objects which are instantiated only once in app.

6. What Are The Filters In Angular Js?

Filters select a subset of items from an array and return a new array. Filters are used to show filtered items from a list of items based on defined criteria.

7. Explain Directives In Angular Js.

Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. Angular JS has built-in directives (ng-bind, ng-model, etc) to perform most of the task that developers have to do.

8. Explain Templates In Angular Js.

Templates are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using “partials”.

9. What Is Routing In Angular Js?

It is concept of switching views. Angular JS based controller decides which view to render based on the business logic.

10. What Is Deep Linking In Angular Js?

Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

11. What Are The Advantages Of Angular Js?

Advantages of Angular JS:

1.Angular JS provides capability to create Single Page Application in a very clean and maintainable way.

2.Angular JS provides data binding capability to HTML thus giving user a rich and responsive experience.

3.Angular JS code is unit testable.

4.Angular JS uses dependency injection and make use of separation of concerns.

5.Angular JS provides reusable components.

6.With Angular JS, developer writes less code and gets more functionality.

7.In Angular JS, views are pure html pages, and controllers written in JavaScript do the business processing.

8.Angular JS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.

 

12. How To Implement Internationalization In Angular Js?

Angular JS supports inbuilt internationalization for three types of filters currency, date and numbers. We only need to incorporate corresponding js according to locale of the country. By default it handles the locale of the browser. For example, to use Danish locale, use following script

13. What Is Internationalization?

Internationalization is a way to show locale specific information on a website. For example, display content of a website in English language in United States and in Danish in France.

14. On Which Types Of Component Can We Create A Custom Directive?

Angular JS provides support to create custom directives for following type of elements.

Element directives − Directive activates when a matching element is encountered.

Attribute − Directive activates when a matching attribute is encountered.

CSS − Directive activates when a matching css style is encountered.

Comment − Directive activates when a matching comment is encountered.

15. Which Components Can Be Injected As A Dependency In Angular Js?

Angular JS provides a supreme Dependency Injection mechanism. It provides following core components which can be injected into each other as dependencies.

1.value

2.factory

3.service

4.provider

5.constant

16. Is Angular Js Extensible?

Yes! In AngularJS we can create custom directive to extend AngularJS existing functionalities.

Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using “directive” function. A custom directive simply replaces the element for which it is activated.

AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive.

17. What Is Constant?

constants are used to pass values at config phase considering the fact that value cannot be used to be passed during config phase.

mainApp.constant(“configParam”, “constant value”);

18. What Are The Differences Between Service And Factory Methods?

factory method is used to define a factory which can later be used to create services as and when required whereas service method is used to create a service whose purpose is to do some defined task.

19. What Is Factory Method?

Using factory method, we first define a factory and then assign method to it.

var mainApp = angular.module(“mainApp”, []);

mainApp.factory(‘MathService’, function() {

    var factory = {};

    factory.multiply = function(a, b) {

        return a * b

    }

    return factory;

});

20. What Is Service Method?

Using service method, we define a service and then assign method to it. We’ve also injected an already available service to it.

mainApp.service(‘CalcService’, function(MathService)

{

    this.square = function(a) {

        return MathService.multiply(a,a);

    }

});

21. What Is A Service?

Services are JavaScript functions and are responsible to do specific tasks only. Each service is responsible for a specific task for example, $http is used to make ajax call to get the server data. $route is used to define the routing information and so on. Inbuilt services are always prefixed with $ symbol.

22. What Is Use Of $routeprovider In Angular Js?

$routeProvider is the key service which set the configuration of urls, maps them with the corresponding html page or ng-template, and attaches a controller with the same.

23. What Is $rootscope?

Scope is a special JavaScript object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object. $rootScope is the parent of all of the scope variables.

24. How To Make An Ajax Call Using Angular Js?

AngularJS provides $http control which works as a service to make ajax call to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $http can be used to get the data from server in the following manner:

function studentController($scope, $http) {

    var url = “data.txt”;

    $http.get(url).success( function(response) {

        $scope.students = response;

    });

}

25. How To Validate Data In Angular Js?

AngularJS enriches form filling and validation. We can use $dirty and $invalid flags to do the validations in seamless way. Use novalidate with a form declaration to disable any browser specific validation.

Following can be used to track error.

$dirty − states that value has been changed.

$invalid − states that value entered is invalid.

$error − states the exact error.

26. How Angular.module Works?

angular.module is used to create AngularJS modules along with its dependent modules.

Consider the following example:

var mainApp = angular.module(“mainApp”, []);

Here we’ve declared an application mainApp module using angular.module function. We’ve passed an empty array to it. This array generally contains dependent modules declared earlier.

27. Explain Ng-click Directive?

ng-click directive represents a AngularJS click event.

In below example, we’ve added ng-click attribute to a HTML button and added an expression to updated a model. Then we can see the variation.

<p>Total click: {{ clickCounter }}</p></td>

<button ng-click = “clickCounter = clickCounter + 1”>Click Me!</button>

28. Explain Ng-hide Directive?

ng-hide directive hides a given control.

In below example, we’ve added ng-hide attribute to a HTML button and pass it a model. Then we’ve attached the model to a checkbox and can see the variation.

<input type = “checkbox” ng-model = “showHide2”>Hide Button

<button ng-hide = “showHide2”>Click Me!</button>

29. Explain Order By Filter?

orderby filter orders the array based on provided criteria.

In below example, to order subjects by marks, we’ve used orderBy marks.

Subject:

<ul>

<li ng-repeat = “subject in student.subjects | orderBy:’marks'”>

{{ subject.name + ‘, marks:’ + subject.marks }}

</li>

</ul>

30. Explain Ng-disabled Directive?

ng-disabled directive disables a given control.

In below example, we’ve added ng-disabled attribute to a HTML button and pass it a model. Then we’ve attached the model to an checkbox and can see the variation.

<input type = “checkbox” ng-model = “enableDisableButton”>Disable Button

<button ng-disabled = “enableDisableButton”>Click Me!</button>

31. Explain Ng-show Directive?

ng-show directive shows a given control.

In below example, we’ve added ng-show attribute to a HTML button and pass it a model. Then we’ve attached the model to a checkbox and can see the variation.

<input type = “checkbox” ng-model = “showHide1”>Show Button

<button ng-show = “showHide1”>Click Me!</button>

32. Explain Currency Filter?

Currency filter formats text in a currency format.

In below example, we’ve added currency filter to an expression returning number using pipe character. Here we’ve added currency filter to print fees using currency format.

Enter fees: <input type = “text” ng-model = “student.fees”>

fees: {{student.fees | currency}}

33. Explain Filter Filter?

filter filter is used to filter the array to a subset of it based on provided criteria.

In below example, to display only required subjects, we’ve used subjectName as filter.

Enter subject: <input type = “text” ng-model = “subjectName”>

Subject:

<ul>

<li ng-repeat = “subject in student.subjects | filter: subjectName”>

{{ subject.name + ‘, marks:’ + subject.marks }}

</li>

</ul>

34. Explain Uppercase Filter?

Uppercase filter converts a text to upper case text.

In below example, we’ve added uppercase filter to an expression using pipe character. Here we’ve added uppercase filter to print student name in all capital letters.

Enter first name:<input type = “text” ng–model = “student.firstName”>                       

             Enter last name: <input type = “text” ng–model = “student.lastName”>                   

             Name in Upper Case: {{student.fullName() | uppercase}}

35. Explain Ng-repeat Directive ?

ng-repeat directive repeats html elements for each item in a collection.

36. What Are Angular Js Expressions?

Expressions are used to bind application data to html. Expressions are written inside double braces like {{ expression}}. Expressions behave in same way as ng-bind directives. AngularJS application expressions are pure JavaScript expressions and outputs the data where they are used.

37. Explain Ng-init Directive ?

ng-init directive initializes an AngularJS Application data. It is used to put values to the variables to be used in the application.

38. Explain Ng-controller Directive ?

Ng-controller directive tells AngularJS what controller to use with this view. AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.

39. How Angular Js Integrates With Html?

AngularJS being a pure javaScript based library integrates easily with HTML.

Step 1 − Include angularjs javascript libray in the html page

<head> src = “http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js&#8221;> </head>

Step 2 − Point to AngularJS app

Next we tell what part of the HTML contains the AngularJS app. This done by adding the ng-app attribute to the root HTML element of the AngularJS app. You can either add it to html element or body element as shown below:

<body ng-app = “myapp”> </body>

40. Explain Ng-app Directive?

ng-app directive defines and links an AngularJS application to HTML. It also indicate the start of the application.

41. Explain Ng-model Directive?

ng-model directive binds the values of AngularJS application data to HTML input controls. It creates a model variable which can be used with the html page and within the container control( for example, div) having ng-app directive.

42. Explain Ng-bind Directive ?

ng-bind directive binds the AngularJS Application data to HTML tags. ng-bind updates the model created by ng-model directive to be displayed in the html tag whenever user input something in the control or updates the html control’s data when model data is updated by controller.

43. Explain Angular Js Boot Process.

When the page is loaded in the browser, following things happen:

· HTML document is loaded into the browser, and evaluated by the browser. Angular JS JavaScript file is loaded; the angular global object is created. Next, JavaScript which registers controller functions is executed.

· Next Angular JS scans through the HTML to look for Angular JS apps and views. Once view is located, it connects that view to the corresponding controller function.

· Next, Angular JS executes the controller functions. It then renders the views with data from the model populated by the controller. The page gets ready.

44. Which Are The Core Directives Of Angular Js?

Following are the three core directives of AngularJS.

•ng-app − This directive defines and links an AngularJS application to HTML.

•ng-model − This directive binds the values of AngularJS application data to HTML input controls.

•ng-bind − This directive binds the AngularJS Application data to HTML tags.

45. What Are Angular 4?

On 13 December 2016 Angular 4 was announced, skipping 3 to avoid confusion due to the misalignment of the router package’s version which was already distributed as v3.3.0. The final version was released on March 23, 2017. Angular 4 is backward compatible with Angular 2.

Angular version 4.3 is a minor release, meaning that it contains no breaking changes and that it is a drop-in replacement for 4.x.x.

46. What Are The Features Of Angular 4.3?

Features in Angular version 4.3 are:

Introducing Http Client, a smaller, easier to use, and more powerful library for making HTTP Requests.

New router life cycle events for Guards and Resolvers. Four new events: GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd join the existing set of life cycle event such as NavigationStart.

Conditionally disable.

47. What Is Angular?

Angular (commonly referred to as “Angular 2+” or “Angular 2“):

Is a TypeScript-based open-source front-end web application platform bed by the Angular Team at Google and by a community of individuals and corporations to address all of the parts of the developer’s workflow while building complex web application. Angular is a complete rewrite from the same team that built AngularJS.

Angular is a framework for building client applications in HTML and either JavaScript or a language like TypeScript that compiles to JavaScript. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.

48. What Is Angular Js?

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML syntax to express your application’s components clearly and succinctly. AngularJS data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

AngularJS is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is an exercise in.

49. What Do I Have To Do To Trick The Browser Into Doing What I Want?

The impedance mismatch between dynamic applications and static documents is often solved with:

A library – a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit. E.g., jQuery.

Frameworks – a particular implementation of a web application, where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific.

E.g., durandal, ember, etc.

AngularJS takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs. AngularJS teaches the browser new syntax through a construct we call directives.

Examples include:

Data binding, as in {{}}.

DOM control structures for repeating, showing and hiding DOM fragments.

Support for forms and form validation.

Attaching new behavior to DOM elements, such as DOM event handling.

Grouping of HTML into reusable components.

 50. What Are The Differences Between Angular And Angular Js?

Angular was a ground-up rewrite of AngularJS and has many unique features.

Angular does not have a concept of “scope” or controllers; instead it uses a hierarchy of components as its main architectural concept

Angular has a different expression syntax, focusing on “[ ]” for property binding, and “( )” for event binding

Mobile development – desktop development is much easier when mobile performance issues are handled first

Modularity – much core functionality has moved to modules, producing a lighter, faster core

Modern browsers only – reducing the need for browser compatibility workarounds

Angular recommends the use of Microsoft’s Typescript language, which introduces the following features:

Class-based Object Oriented Programming

Static Typing

Generics

Typescript a superset of ECMAScript 6 (ES6), and is backwards compatible with ECMAScript 5 (i.e.: JavaScript).

Angular also includes the benefits of ES6:

Lambdas

Iterators

For/Of loops

Python-style generators

Reflection

Improved dependency injection– bindings make it possible for dependencies to be named

Dynamic loading

Asynchronous template compilation

Simpler Routing

Replacing controllers and $scope with components and directives – a component is a directive with a template.

Reactive programming support using RxJS.

51. What’s New In Angular 4? And What Are The Improvements In Angular 4?

Angular 4 contains some additional Enhancement and Improvement.

Consider the following enhancements:

Smaller & Faster Apps

View Engine Size Reduce

Animation Package

NgIf and ngFor Improvement

Template

Ng If with Else

Use of AS keyword

Pipes

HTTP Request Simplified

Apps Testing Simplified

Introduce Meta Tags

Added some Forms Validator Attributes

Added Compare Select Options

Enhancement in Router

Added Optional Parameter

Improvement Internationalization

52. Why Angular 4? What’s New In Angular 4?

It Makes work easier compared with angular 2 and other models.

Writing code is lots of cleaner and lesser.

It Improve the execution performance for Data binding and so on.

It has included Animations features.

In Angular 4, no need to apply observable methods because Angular analyses every page’s DOM and it is automatically modifies to page’s DOM.

It is also supported by Visual Studio, IntelliJ, And NET IDES and so on.

Migration is really very soft and cleaner.

And So On…

Angular 2 apps will work using Angular 4 without changing anything. Angular 4 offers lots-of enhancements i.e.

Smaller & Faster Apps

View Engine Size Reduce

Animation Package

NgIf and ngFor Improvement

Overriding Template

NgIf with Else

Use of AS keyword

Pipes

HTTP Request Simplified

Apps Testing Simplified

Introduce Meta Tags

Added some Forms Validator Attributes

Added Compare Select Options

Enhancement in Router

Added Optional Parameter

Improvement Internationalization

Meaningful errors handling methodology

Animations

53. How To Set Http Request Header In Angular 4 And Angular 2?

The HTTP Interceptors are used to Set Http Headers Request in Angular 4 using the import from “@angular/common/http”. The HTTP Interceptors are available in Angular 4.x versions.

The HTTP Interceptors are not supported in Angular 2. We are creating the Http Client Injectable class to achieve this. You can see the below examples for set http headers request with and without HTTP interceptors.

54. What Is The Use Of Interceptors In Angular 4?

The Interceptors is a common used to set default headers for all responses.

 55. What Is The For Root Method?

The for Root is a static method and it’s very easy for developers to configure the modules and the best example is – RouterModule.for Root.

The Router Module also offers a for Child. It’s also a static method and use to configure the routes of lazy-loaded modules. The for Root and for Child are the traditional names for methods that configure services in root.

56. What Is The Difference Between `{'ngfor'}` And `{`ngforof`}` In Angular 2?

Angular 2 – ngFor vs. ngFor:

The [ngFor] is not a type safe.

The [NgForOf] is a type Safe.

The [NgFor] directive instantiates a template once per item from iterate.

The [ngFor] and [ngForOf] are actually the selectors of the [NgForOf] directive and it is not two distinct things.

The [ngFor] will be works like as collections.

The [ngForOf] will be works like as generics.

57. What Classes Should I Add To Module's Declarations?

We can add the declarable classes like components, directives and pipes in the module’s declarations list and we can add only – components, directives and pipes classes in the @NgModule.

58. What Classes Should I Not Add To Module's Declarations?

We do not declare – Module, Service, objects, strings, numbers, functions, entity models, configurations, business logic, and helper classes in the module’s declarations.

59. What Happen When I Import The Same Module Twice In Angular 4?

No problem! We can import the same module twice but Angular does not like modules with circular references.

So do not let Module “X” import Module “Y” which already imports Module “X”.

When four modules all import Module “X”, Angular estimate Module “X” once, the first time face it and does not do again. Actually, the modules help us to organize an application into associative blocks of functionality.

60. How To Get And Log An Error In Angular 4?

Two types of error:

If the backend returned an unsuccessful response like – 404, 500 and so on.

If something goes wrong in the client side like -network error etc.

In the both cases – We are using Http Error Response and return the useful information on what went wrong in this call!

61. How Are Jwts Used To Authenticate Angular 4 Applications?

In Annular, the following Steps are used to building authentication and authorization for RESTful APIs and applications. It might help you –

The users send their credentials to the server which is verified by the database credentials. If everything is verified successfully, the JWT is sent back to them.

The JWT is saved in the user’s browser in local storage or in a cookie and so on.

The presence of a JWT saved in the browser is used as an indicator that a user is currently logged in.

The expiry time of JWT is continually checked to maintain an authenticated state in the Angular applications.

The client side routes are protected and access by authenticated users only.

When user sends the XHR requests for APIs, the JWT gets sent an Authorization header using your cookies or Bearer.

When XHR requests coming on the server, before send back the responses it’s validated first with configured app’s secret keys. If everything is looking good then returns successfully responses other send the back to the bad request.

There are several open source libraries are available for angular which are helps with JWTs and has the ability to Decode the JWT, Authorization header to XHR requests and so on.

62. What Is Json Web Token?

JSON Web Token (JWT) is an open standard which used for securely transmitting information between parties as a JSON object.

The JWTs can be signed with –

HMAC algorithm

RSA algorithm

63. When Should You Use Json Web Tokens?

There are some scenarios where we can used JSON Web Tokens –

Authentication

Information Exchange

64. What Is The Json Web Token Structure?

The JSON Web Tokens consist of three parts separated by dots (.), which are:

Header

Payload

Signature

65. Explain Component Decorators In Angular 4?

A decorator is the core concept when developing an angular framework with version 2 and above. It may become a core language feature for JavaScript soon. In angular 4, decorators are used extensively and are also used to compile a code.

There are 4 different types of decorators:

Class decorators

Property decorators

Method decorators

Parameter decorators

A decorator is a function that is invoked with a prefix “@” symbol and is immediately followed by a class, parameter, method, or property. A decorator returns the same thing which was given as an input but in an augmented form.

66. Write The Cli Command To Generate A Component In Angular 4?

Components are just simple classes which are declared as components with the help of component decorators.

It becomes easy to create an application which already works, with the help of angular CLI commands. “Ng generate” is used to generate components, routes, services, and pipes. Simple test shells are also created with the help of this CLI command. For generating a component in angular4 with the help of CLI command.

you need to follow the following syntax-

ng generate component component name;

It generates the component and adds the component to module declarations.

67. Explain The Component Directory Structure Of Angular 4?

Here are the elements which are present in the component directory structure anf modules: –

Module.ts- in this, the angular module is declared. @NgModule decorator is used which initializes the different aspects of angular applications. AppComponent is also declared in it.

Components.ts- it simply defines the components in angular and this is the place where the app-root sector is also defined. A title attribute is also declared in the component.

Component.html- it is the template file of the application which represents the visual parts of our components.

68. Explain Ngfor Directive With An Example?

The ngFor directive instantiates a template for every element of the given iterator. The different local variables of the ngFor directive can be used in iterations. The ngFor directive can even be used with the HTML elements. It also performs various changes in DOM. Several exported values can be aliased to local variables with the help of ngFor directive. It allows us to build data presentation lists and tables in our HTML templates.

Here’s an example of ngFor directive with the help of HTML:

<tr *ngFor=”hero of heroes”>

<td>({hero.name})</td></tr>

69. Explain Property Binding Or One Way Binding In Angular Js?

Basically property binding means passing data from the component class and setting the value of a given element in the view. It is a one way binding in which the data is passed from component to the class. It allows us to control the element property values from component to class. Property binding in angular can take place by three ways:

Interpolation can be used to define a value, as long as the value being defined is a string.

Wrapping brackets around the element property and binding it to the component property is the most common type of property binding.

The third way is by adding “bind” before the element property.

70. Explain Ngif Directive With An Example?

The ngIf is a built-in template directive which is used to add or remove some parts of DOM. This addition or removal depends on the expression being true or false.

If the expression is evaluated to false, then the ngIf directive removes the HTML element. If the expression is evaluated to be true, then the element gets added to the DOM.

Syntax- *ngIf=”<condition>”

Example- <ul *ngFor=”let person of people”

*ngIf=”person.age < 30”>

<li>{{person.name}}</li></ul>

71. Write The Difference Between Directive And Component In Angular Js?

In angular js, there are differences between the meta-data annotations. Some of the differences are:

A directive is used to add behavior to an existing element. Whereas, a component is used to create a component with attached behavior.

“@directive” is used to create a directive. Whereas, “@component” is used to create a component.

A directive is used to attach different behaviors to an existing DOM element. Whereas, with the help of component, we can break our application into smaller components.

A directive is used to create reusable behavior. Whereas, a component is used to create reusable components.

A directive does not require a view. Whereas, a component needs a view via @view.

72. What Do You Understand By Isolated Unit Tests?

As the name implies, unit test is all about testing individual units of code. In order to answer some s, isolating the unit of code under test is really important. When we do this, we are not forced into creating related pieces such as DOM elements for sorting. With the help of isolated unit tests, it becomes easier to implement everything. To simulate the requests, dependency injections are also provided. The individual sort function can be tested in isolation. And not only the sort function, any function can be tested in isolation.

73. What Is A Routing In Angular Js?

NgRoute module is used when you want to navigate through different pages of your application but you also want your application to be a single page application. This ngRoute module navigates through different pages of your application without reloading the entire application. The angular js route module should be included to make your application ready for routing. The ngRoute is added as a dependency in the application. The routing engine captures the specific url requested by the user and renders the view based on the defined routing rules.

74. What Do You Understand By Services With Reference To Angular Js?

Services in angular js are used to organize and share code across your application. These are the suitable objects which are wired together with the help of dependency injection. The angular js services are lazily instantiated. The service is only instantiated by angular js only when the application component depends on it. In angular js, new services can be made or can even be used in other built-in services. Over 30 built-in ser

75. What Is Angular Material?

Angular Material is a UI component library for Angular JS developers. Angular Material's reusable UI components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation.

Some of its salient features are as follows:

In-built responsive designing.

Standard CSS with minimal footprint.

Includes new versions of common user interface controls such as buttons, check boxes, and text fields which are adapted to follow Material Design concepts.

Includes enhanced and specialized features like cards, toolbar, speed dial, side nav, swipe, and so on.

Cross-browser, and can be used to create reusable web components.

Free to use

76. How To Use Angular Material?

There are two ways to use Angular Material:

Local Installation - You can download the Angular Material libraries using npm, jspm, or bower on your local machine and include it in your HTML code.

CDN Based Version - You can include the angular-material.min.css and angular-material js files into your HTML code directly from the Content Delivery Network (CDN).

77. What Is Local Installation?

Use following npm commands to install Angular Material libraries

npm install angular-material

npm will download the files under node_modules > angular-material folder.

78. What Is Cdn Based Version?

You can include the angular-material.css and angular-material.js files into your HTML code directly from the Content Delivery Network (CDN). Google CDN provides content for the latest version.

79. What Is Angular Material Autocomplete?

md-autocomplete, an Angular Directive, is used as a special input control with an inbuilt drop-down to show all possible matches to a custom query. This control acts as a real-time suggestion box as soon as the user types in the input area. can be used to provide search results from local or remote data sources.md-autocomplete caches results when performing a query. After first call, it uses the cached results to eliminate unnecessary server requests or lookup logic and it can be disabled.

Attributes

* md-items: An expression in the format of item in items to iterate over matches for your search.

md-selected-item-change: An expression to be run each time a new item is selected.

md-search-text-change: An expression to be run each time the search text updates.

md-search-text: A model to bind the search query text to.

md-selected-item: A model to bind the selected item to.

md-item-text: An expression that will convert your object to a single string.

placeholder: Placeholder text that will be forwarded to the input.

md-no-cache: Disables the internal caching that happens in autocomplete.

ng-disabled: Determines whether or not to disable the input field.

md-min-length: Specifies the minimum length of text before autocomplete will make suggestions.

80. What Is Angular Material Bottom Sheet?

$mdBottomSheet, an Angular Service, is used to open a bottom sheet over the application and provides a simple promise API.

Methods: templateUrl - {string=}: The url of an html template file that will be used as the content of the bottom sheet. Restrictions: the template must have an outer md-bottom-sheet element.

template - {string=}: Same as templateUrl, except this is an actual template string.

scope - {object=}: the scope to link the template / controller to. If none is specified, it will create a new child scope. This scope will be destroyed when the bottom sheet is removed unless preserveScope is set to true.

preserveScope - {boolean=}: whether to preserve the scope when the element is removed. Default is false.

controller - {string=}: The controller to associate with this bottom sheet.

locals - {string=}: An object containing key/value pairs. The keys will be used as names of values to inject into the controller. For example, locals: {three: 3} would inject three into the controller with the value of 3.

clickOutsideToClose - {boolean=}: Whether the user can click outside the bottom sheet to close it. Default true.

escapeToClose - {boolean=}: Whether the user can press escape to close the bottom sheet. Default true.

resolve - {object=}: Similar to locals, except it takes promises as values and the bottom sheet will not open until the promises resolve.

controllerAs - {string=}: An alias to assign the controller to on the scope.

parent - {element=}: The element to append the bottom sheet to. The parent may be a function, string, object, or null. Defaults to appending to the body of the root element (or the root element) of the application. e.g. angular.element(document.getElementById('content')) or "#content".

disableParentScroll - {boolean=}: Whether to disable scrolling while the bottom sheet is open. Default true.

81. What Is Angular Material Buttons?

md-button, an Angular Directive, is a button directive having optional ink ripples (and are by default enabled). If href or ng-href attribute is provided, then this directive acts as an anchor element.

Attributes

md-no-ink: If set as true, disable ripple ink effects.

ng-disabled: Enable/Disable based on the expression.

md-ripple-size: Overrides the default ripple size logic. Options: full, partial, auto.

aria-label: Adds alternative text to button for accessibility, useful for icon buttons. If no default text is found, a warning will be logged.

82. What Is Angular Material Cards?

md-card, an Angular Directive, is a container directive and is used to draw cards in angularjs application. Following are the angular directives and classes used in md-card.

<md-card-header>: Header for the card, holds avatar, text and squared image.

<md-card-avatar>: Card avatar.

md-user-avatar: Class for user image.

<md-icon>: Icon directive.

<md-card-header-text> : Contains elements for the card description.

md-title: Class for the card title.

md-subhead: Class for the card sub header.

<img>: Image for the card.

<md-card-title>: Card content title.

<md-card-title-text>: Card Title text container.

83. What Is Angular Material Checkboxes?

md-checkbox, an Angular Directive, is used as a checkbox control.

Attributes

* ng-model: Assignable angular expression to data-bind to.

name: Property name of the form under which the control is published.

ng-true-value: The value to which the expression should be set when selected.

ng-false-value: The value to which the expression should be set when not selected.

ng-change: Angular expression to be executed when input changes due to user interaction with the input element.

md-no-ink: Use of attribute indicates use of ripple ink effects.

aria-label: Adds label to checkbox for accessibility. Defaults to checkbox's text. If no default text is found, a warning will be logged.

84. What Is Angular Material Chips?

md-chips, an Angular Directive, is used as a special component called Chip and can be used to represent small set of information for example, a contact, tags etc. Custom template can be used render the content of a chip. This can be achieved by specifying an md-chip-template element having the custom content as a child of md-chips.

Attributes

* ng-model: Assignable angular expression to data-bind to.

* ng-model: A model to bind the list of items to.

* md-transform-chip: An expression of form myFunction($chip) that when called expects one of the following return values:

->an object representing the $chip input string.

->undefined to simply add the $chip input string, or.

->null to prevent the chip from being appended.

* md-require-match: If true, and the chips template contains an autocomplete, only allow selection of pre-defined chips (i.e. you cannot add new ones).

placeholder: Placeholder text that will be forwarded to the input.

secondary-placeholder: Placeholder text that will be forwarded to the input, displayed when there is at least on item in the list.

readonly: Disables list manipulation (deleting or adding list items), hiding the input and delete buttons.

md-on-add: An expression which will be called when a chip has been added.

md-on-remove: An expression which will be called when a chip has been removed.

md-on-select: An expression which will be called when a chip is selected.

85. What Is Angular Material Contact Chips?

md-contact-chips, an Angular Directive, is an input control built on md-chips and uses md-autocomplete element. The contact chip component accepts a query expression which returns a list of possible contacts. The user can select one of these and add it to the list of availble chips.

Attributes

* ng-model: A model to bind the list of items to.

* md-contacts: An expression expected to return contacts matching the search test, $query.

* md-contact-name: The field name of the contact object representing the contact's name.

* md-contact-email: The field name of the contact object representing the contact's email address.

* md-contact-image: The field name of the contact object representing the contact's image.

placeholder: laceholder text that will be forwarded to the input.

secondary-placeholder: Placeholder text that will be forwarded to the input, displayed when there is at least on item in the list.

filter-selected: Whether to filter selected contacts from the list of suggestions shown in the autocomplete.

86. What Is Angular Material Content?

md-content, an Angular Directive, is a container element and is used for scrollable content. layout-padding attribute can be added have padded content.

87. What Is Angular Material Datepicker?

md-datepicker, an Angular Directive, is an input control to select a date and supports ngMessages for input validation.

Attributes

* ng-model: The component's model. Expects a JavaScript Date object.

ng-change: Expression evaluated when the model value changes.

md-min-date: Expression representing a min date (inclusive).

md-max-date: Expression representing a max date (inclusive).

md-date-filter: Function expecting a date and returning a boolean whether it can be selected or not.

md-placeholder: The date input placeholder value.

ng-disabled: Whether the datepicker is disabled.

ng-required: Whether a value is required for the datepicker.

88. What Is Angular Material Dialogs?

md-dialog, an Angular Directive, is a container element and is used to display a dialog box. Its element md-dialog-content contains the content of the dialog and md-dialog-actions is responsible for dialog actions.

mdDialog, an Angular Service, opens a dialog over the application to inform users about the information or require them to make decisions.

89. What Is Angular Material Divider?

md-divider, an Angular Directive, is a rule element and is used to display a thin lightweight rule to group and divide contents within lists and page layouts.

Attributes

md-inset: Add this attribute to activate the inset divider style.

90. What Is Angular Material Fab Speed Dial?

The md-fab-speed-dial an Angular directive, is used to show a series of popup elements or buttons for quick access to common actions.

Attributes

* md-direction: From which direction you would like the speed dial to appear relative to the trigger element.

md-open: Programmatically control whether or not the speed-dial is visible.

91. What Is Angular Material Fab Toolbars?

The md-fab-toolbar an Angular directive, is used to show a toolbar of elements or buttons for quick access to common actions.

Attributes

* md-direction: From which direction you would like the toolbar items to appear relative to the trigger element. Supports left and right directions.

md-open: Programmatically control whether or not the toolbar is visible.

92. What Is Angular Material Grids?

The md-grid-list an Angular directive, is a component for laying out content for varying screen sizes. A grid has 12 columns in the desktop size screen, 8 in the tablet size screen, and 4 in the phone size screen, where each size have predefined margins and gutters. Cells are laid out in sequential manner in a row, in the order they are defined.

Attributes

* md-cols: Number of columns in the grid.

* md-row-height: One of

->CSS length - Fixed height rows (eg. 8px or 1rem).

->{width}:{height} - Ratio of width to height (eg. md-row-height="16:9").

->"fit" - Height will be determined by subdividing the available height by the number of rows.

md-gutter: The amount of space between tiles in CSS units (default 1px).

md-on-layout: Expression to evaluate after layout. Event object is available as $event, and contains performance information.

93. What Is Angular Material Icons?

The md-icon an Angular directive, is a component to show vector-based icons in application. It supports icon fonts and SVG icons also apart from using Google Material Icons.

Attributes

* md-font-icon: String name of CSS icon associated with the font-face will be used to render the icon. Requires the fonts and the named CSS styles to be preloaded.

* md-font-set: CSS style name associated with the font library; which will be assigned as the class for the font-icon ligature. This value may also be an alias that is used to lookup the classname; internally use $mdIconProvider.fontSet(<alias>) to determine the style name.

* md-svg-src: String URL (or expression) used to load, cache, and display an external SVG.

* md-svg-icon: md-svg-icon String name used for lookup of the icon from the internal cache; interpolated strings or expressions may also be used. Specific set names can be used with the syntax <set name>:<icon name>. To use icon sets, developers are required to pre-register the sets using the $mdIconProvider service.

aria-label: Labels icon for accessibility. If an empty string is provided, icon will be hidden from accessibility layer with aria-hidden="true". If there's no aria-label on the icon nor a label on the parent element, a warning will be logged to the console.

alt: Labels icon for accessibility. If an empty string is provided, icon will be hidden from accessibility layer with aria-hidden="true". If there's no alt on the icon nor a label on the parent element, a warning will be logged to the console.

94. What Is Angular Material Inputs?

The md-input-container an Angular directive, is a container component to contains any <input> or <textarea> element as a child. md-input-container also supports error handling using the standard ng-messages directives and animates the messages using ngEnter/ngLeave events or the ngShow/ngHide events.

Attributes

md-maxlength: The maximum number of characters allowed in this input. If this is specified, a character counter will be shown underneath the input. The purpose of md-maxlength is exactly to show the max length counter text. If you don't want the counter text and only need "plain" validation, you can use the "simple" ng-maxlength or maxlength attributes.

aria-label: Aria-label is required when no label is present. A warning message will be logged in the console if not present.

placeholder: An alternative approach to using aria-label when the label is not PRESENT. The placeholder text is copied to the aria-label attribute.

md-no-autogrow: When present, textareas will not grow automatically.

md-detect-hidden: When present, textareas will be sized properly when they are revealed after being hidden. This is off by default for performance reasons because it guarantees a reflow every digest cycle.

95. What Is Angular Material Layouts?

Layout Directive

layout directive on a container element is used to specify the layout direction for its children. Following are the assignable values:

row - Items are arranged horizontally with max-height = 100% and max-width is the width of the items in the container.

column - Items are arranged vertically with max-width = 100% and max-height is the height of the items in the container.

For responsive design such as layout to be automatically changed depending upon the device screen size,following layout APIs can be used to set the layout direction for devices with view widths.

layout:  Sets default layout direction unless overridden by another breakpoint.

layout-xs:   width < 600px

layout-gt-xs:   width >= 600px

layout-sm:   600px <= width < 960px

layout-gt-sm:   width >= 960px

layout-md:   960px <= width < 1280px

layout-gt-md:   width >= 1280px

layout-lg:   1280px <= width < 1920px

layout-gt-lg:   width >= 1920px

layout-xl:    width >= 1920px

96. What Is Flex Directive?

flex directive on a container element is used to customize the size and position of elements. flex directive defines the way how the element is to adjust its size with respect to its parent container and the other elements within the container.Following are the assignable values:

multiples of 5 - 5, 10, 15 ... 100

33 - 33%

66 - 66%

97. What Is Angular Material List?

The md-list an Angular directive, is a container component to contains md-list-item elements as a children. The md-list-item directive is a container component for row items of md-list container. CSS classes md-2-line and md-3-line can be added to md-list-item to increase the height of row with 22px and 40px respectively.

98. What Is Angular Material Menu?

The md-menu an Angular directive, is a component to display addition options within the context of action performed. md-menu have two child elements. First one is trigger element and is used to open the menu. Second element is md-menu-content to represent the content of the menu when menu is opened. md-menu-content usually carries menu items as md-menu-item.

Attributes

* md-position-mode:   The position mode in the form of x, y. Default value is target,target. Right now the x axis also suppports target-right.

* md-offset:   An offset to apply to the dropdown after positioning x, y. Default value is 0,0.

99. What Is Angular Material Menu Bar?

The md-menu-bar an Angular directive, is a container component to hold multiple menus. Menu bar helps to create a operating system provided menu effect.

100. What Is Angular Material Progress Bars?

The md-progress-circular and md-progress-linear are Angular progress directives, and are used to show loading content message in application.

Attributes - md-progress-circular

* md-mode: Select from one of two modes: 'determinate' and 'indeterminate'. if the md-mode value is set as undefined or specified as not 1 of the two (2) valid modes, then .ng-hide will be auto-applied as a style to the component. if not configured, the md-mode="indeterminate" will be auto injected as an attribute. If value="" is also specified, however, then md-mode="determinate" would be auto-injected instead.

value: In determinate mode, this number represents the percentage of the circular progress. Default: 0

md-diameter: This specifies the diamter of the circular progress. The value may be a percentage (eg '25%') or a pixel-size value (eg '48'). If this attribute is not present then a default value of '48px' is assumed.

101. What Is Angular Material Radio Buttons?

The md-radio-group and md-radio-button Angular directives are used to show radio buttons in the applcation. md-radio-group is the grouping container for md-radio-button elements.

Attributes - md-radio-group

* ng-model: Assignable angular expression to data-bind to.

md-no-ink: Use of attribute indicates flag to disable ink ripple effects.

Attributes - md-radio-button

* ng-model: Assignable angular expression to data-bind to.

* ngValue: Angular expression which sets the value to which the expression should be set when selected.

* value: The value to which the expression should be set when selected.

ngChange: Angular expression to be executed when input changes due to user interaction with the input element.

name: Property name of the form under which the control is published.

aria-label: Adds label to radio button for accessibility. Defaults to radio button's text. If no text content is available, a warning will be logged.

102. What Is Angular Material Selects?

The md-select, an Angular directives is used to show Select box, bounded by ng-model.

Attributes - md-radio-group

* ng-model: The model!

multiple: Whether it's multiple.

md-on-close: Expression to be evaluated when the select is closed.

placeholder: Placeholder hint text.

Optional label for accessibility. Only necessary if no placeholder or explicit label is present.

md-container-class: Class list to get applied to the .md-select-menu-container element (for custom styling).

103. What Is Angular Material Sidenav?

The md-sidenav, an Angular directives is used to show a container component which can be shown or hide programmatically. It slides out over the top of the main content region by default.

Attributes

md-is-open: A model bound to whether the sidenav is opened.

md-component-id: componentId to use with $mdSidenav service.

md-is-locked-open: When this expression evalutes to true, the sidenav 'locks open': it falls into the content's flow instead of appearing over it. This overrides the is-open attribute. The $mdMedia() service is exposed to the is-locked-open attribute, which can be given a media query or one of the sm, gt-sm, md, gt-md, lg or gt-lg presets. Examples:

<md-sidenav md-is-locked-open="shouldLockOpen"></md-sidenav>

<md-sidenav md-is-locked-open="$mdMedia('min-width: 1000px')"></md-sidenav>

<md-sidenav md-is-locked-open="$mdMedia('sm')"></md-sidenav> (locks open on small screens)

104. What Is Angular Material Sliders?

The md-slider, an Angular directives is used to show a range component. It has two modes:

normal - User can slide between wide range of values. Default.

discrete - User can slide between selected values. To enable discrete mode use md-discrete and step attributes.

Attributes

md-discrete: Whether to enable discrete mode.

step: The distance between values the user is allowed to pick. Default 1.

min: The minimum value the user is allowed to pick. Default 0.

max: The maximum value the user is allowed to pick. Default 100.

105. What Is Ext Js?

Ext JS stands for extended JavaScript. It is a JavaScript framework to develop rich UI web based desktop applications.

106. Ext Js Is Extended On Which Library?

It is a Sencha product which is extended from YUI (Yahoo user interface).

107. What Are The Main Library Files To Add In Html Page?

These are the main files to include in HTML page to run Ext JS code:

Ext-all.js

Ext-all.css

108. Explain Features Of Ext Js.?

Customizable UI widgets with collection of rich UI such as Grids, pivot grids, forms, charts, trees.

Code compatibility of new versions with the older one.

A flexible layout manager helps to organize the display of data and content across multiple browsers, devices, and screen sizes.

Advance data package decouples the UI widgets from the data layer. The data package allows client-side collection of data using highly functional models that enable features such as sorting and filtering.

It is protocol agnostic, and can access data from any back-end source.

Customizable Themes Ext JS widgets are available in multiple out-of-the-box themes that are consistent across platforms.

109. Explain Advantage Of Using Ext Js.?

Streamlines cross-platform development across desktops, tablets, and smartphones — for both modern and legacy browsers.

Increases the productivity of development teams by integrating into enterprise development environments via IDE plugins.

Reduces the cost of web application development.

Empowers teams to create apps with a compelling user experience.

It has set of widgets for making UI powerful and easy.

It follows MVC architecture so highly readable code.

110. Explain Limitations Of Using Ext Js.?

The size of library is large around 500 KB which makes initial loading time more and makes application slow.

HTML is full of tags makes it complex and difficult to debug.

According to general public license policy it is free for open source applications but paid for commercial applications.

Some times for loading even simple things requires few lines of coding which is simpler in plain html or Jquery.

Need quite experienced developer for developing Ext JS applications.

111. What Are The Browser Ext Js Supports?

Ext JS supports cross browser compatibility, it supports all major browsers as:

IE 6 and above

Firefox 3.6 and above

Chrome10 and above

Safari 4 and above

Opera 11 and above

112. Ext Js Supports Which Architecture?

Ext JS 4+ supports MVC (Model view controller) architecture. From Ext JS 5 it started supporting MVVM (Model View Viewmodel) also.

113. What Is The Latest Version Of Ext Js And Its Benefits?

Ext JS 6 is the latest version of Ext JS which has major benefit that it can be used for both desktop and as well as mobile applications. Basically it is a merge of Ext JS (desktop applications) and Sencha touch (mobile application).

114. Advice For The Developer Who Are Going To Use It For The First Time.?

Ext JS is a JavaScript framework so to start using it you should use have prior knowledge of HTML and JS (not expert level but should have basic understanding). Then it takes to understand the basic so give it time and learn gradually.

115. Difference Between Ext Js And Jquery.?

Both the frameworks are quite different we can compare Ext JS and jQuery UI as Ext JS is full-fledged UI rich framework. But still Ext JS has much more components then jQuery UI.

116. What Do You Know About Different Versions Of Ext Js?

Ext JS 1.1

The first version of Ext JS was developed by Jack Slocum in 2006. It was a set of utility classes which is an extension of YUI. He named the library as YUI-ext.

Ext JS 2.0

Ext JS version 2.0 was released in 2007. This version had new API documentation for desktop Application with limited features. This version doesn't had backward compatibility with previous version of Ext JS.

Ext JS 3.0

Ext JS version 3.0 was released in 2009. This version added new features as chart and list view but at the cost of speed. It had backwards compatible with version 2.0.

Ext JS 4.0

After the release of Ext JS 3 the developers of Ext JS had the major challenge of ramping up the speed. Ext JS version 4.0 was released in 2011. It had the complete revised structure which followed by MVC architecture and a speedy application.

Ext JS 5.0

Ext JS version 5.0 was released in 2014. The major change in this release was to change the MVC architecture to MVVM architecture. It includes the ability to build desktop apps on touch-enabled devices, two-way data binding, responsive layouts and many more features.

Ext JS 6.0

Ext JS 6 merges the Ext JS (for desktop application) and sencha touch (for mobile application) framework.

117. What Are The Different Ext Js Components?

Ext JS has various UI components some of the majorly used components are:

Grid

Form

Message Box

Progress Bar

Tool Tip

Window

HTML Editor

Charts

118. What Is Xtype In Ext Js?

xType defines the type of Ext JS UI component, which is determined during rendering of the component. E.g. textField, Numeric, button etc.

119. What Is Vtype In Ext Js?

This is the validation type can be customized easily. Few vType provided by Ext JS are:

alphanumText: This returns false if the text entered has any symbol other than alphabate or numeric value.

emailText: This returns false, if text is not a valid email address.

120. Can Ext Js Be Integrated With Ajax If Yes Then Explain A Simplest Use Of It?

Yes Ext JS can be integrated with Ajax. Implementation as: suppose on some text box after blur it has to validate the data from server for that we can have an Ajax call onblur/onchange to the text box id to check whether the data entered in the text box is present in server/database.

121. Can Ext Js Be Integrated With Other Server Side Frameworks?

Yes Ext JS can be integrated with other server side framework such as Java, .net, Ruby on rails, PHP, ColdFusion etc.

122. Explain About Ext Js Implementation Tools.?

Ext JS can be implemented on any popular integrated development environment (IDE) such as Eclipse, Aptana, Sublime, Webstorm etc.

123. What Are The Way To Access Dom Elements In Ext Js?

These are few ways to access DOM elements in Ext JS:

Ext.get()

Ext.getElementById()

Ext.fly()

Ext.select()

124. What Is Viewmodel In Mvvm Architecture?

MVVM architecture: is Model View Viewmodel. In MVVM architecture controller of MVC is replaced by ViewModel.

ViewModel: It is basically medicates the changes between view and model. It binds the data from model to view. At the same time it does not have any direct interaction with view it has only knowledge of model.

125. Write A Listener For A Button Click.?

Ext.getCmp('buttonId').on('click', function(){ // statement to perform logic });

126. Explain The Use Of Ext.onready().?

Ext.onReady() is the first method which is called when the DOM is fully loaded so that whatever element you want to refer will be available when script runs.

127. Write A Listener For Any Div Element Clicked On The Page.?

Ext.select('div').on('click', function(){ // statement to perform logic });

128. What Are The Different Type Of Alert Boxes In Ext Js?

Different type of alert boxes in Ext JS are:

Ext.MessageBox.alert();

Ext.MessageBox.confirm();

Ext.MessageBox.wait();

Ext.MessageBox.prompt();

Ext.MessageBox.show();

129. What Is The Base Class For Store, Model & Controller?

Base classes for Store is Ext.data.Store

For model is Ext.data.Model

For Controller is Ext.app.controller

130. What Are The Different Ways For Event Handling In Ext Js?

These are the different ways for event handling:

Using Listeners

Attaching events later

Using custom events

 131. How To Get No Of Records In The Store?

Store.getCount() – For cached records

Store.getTotalCount() – For total no of records in the DB.

132. How To Get Modified Records In The Store?

Store.getModifiedRecords()method is used to get modified records.

133. How To Update Records In The Store?

Store.commitChanges() method to update store changes.

134. How To Get Store Record Using Index?

If we have grid Id : Ext.getCmp('gridId').getStore().getAt(index);

If we have store Id: Ext.getStore('storeId').getAt(index);

135. What Is Function To Load Store Data?

Store.load();

136. Write The Base Classes For Form, Grid, Chart, Panel & Tree.

Base class for Grid - Ext.grid.GridPanel

For form – Ext.form.Panel

For panel – Ext.panel.Panel

For chart – Ext.chart.Chart

For tree – Ext.tree.Panel

137. What Are The Different Type Of Layouts In Ext Js?

Different type of layouts are:

Absolute

Accordion

Anchor

Border

Auto

hBox

vBox

Card(TabPanel)

Card(Wizard)

Column

Fit

Table

138. How To Apply Pagination To The Grid?

This can be done using pagingToolbar() as:

new Ext.PagingToolbar({

   pageSize: 25,

   store: store,

   displayInfo: true,

   displayMsg: 'Displaying topics {0} - {1} of {2}',

   emptyMsg: 'No topics to display',

});

// trigger the data store load

store.load({params:{start:0, limit:25}});

How to add docked item?

dockedItems: [{

   xtype: 'toolbar',

   items: [{

      id:'buttonId',

      handler: function() {

         Ext.Msg.alert('title','alertMsg');

      });

   }]

}]

139. What Is Loadmask And Its Use?

Loadmask is used to prevent any other operation by showing loading(or Custom message) to the user until data gets rendered to the grid. Loadmask: true; is the property to show loadmask while data getting rendered to the grid.

140. What Is Renderer And Its Use?

Renderer is used when we want to manipulate the data which we get from store to show manipulated data based on some criteria. It is a column property can be used as:

renderer: function(value, metadata, record, rowIndex, colIndex, store){

// logic to perform

}

142. How To Get Value Of An Element In Ext Js?

Ext.getCmp('id').getValue();

143. How To Hide Column In The Grid?

Hidden: true;

144. What Is The Property For Sorting In The Grid?

Sortable: true; which is default true.

145. How To Write Before And After Load Events In The Store?

grid.getStore().on({

   beforeload : function(store) {

      // perform some operation

   },

   load : {

      fn : function(store) {

         //perform some operation

      },

      scope : this

   }

   store.load();

});

146. How Ext Js 6 Can Be Used For Both Desktop And Mobile Applications?

Ext JS 6 has toolkit package with which it can include visual elements of both the frameworks (Ext JS and Sencha Touch).

It can be added as:

'toolkit': 'classic', // or 'modern'

If toolkit is classic it includes Ext JS desktop application framework.

And if toolkit is modern then it includes sencha touch mobile application framework.

147. Tell Me What Is Maximum Size Of Http Post Request?

Microsoft Internet Explorer has a maximum uniform resource locator (URL) length of 2,083 characters. Internet Explorer also has a maximum path length of 2,048 characters. This limit applies to both POST request and GET request URLs.

148. Explain Namespace Importance?

An example which utilizes 3 distinctly different sets of scripts from different organizations. We use Ext JS for enhancements, Google Analytics for tracking site usage and the native vBulletin scripts. You can see how all of this code from different sources has been included in the same page.

Namespacing is important for developers in order to organize their code and ensure that their code is not overwritten when loaded in the JavaScript interpreter. If another developer defines a variable with the same name your existing definition will be overwritten.

Because JavaScript is a functionally scoped language creating a function and/or variable which is not wrapped in another function will result in that variable being created in the global scope (window). To combat this, developers place their classes in Objects.

As the client-side JavaScript included in web applications gets larger and more advanced, organization of 3rd party code and your own code becomes increasingly important. Using namespaces will ensure your JavaScript code is safe from other code overwriting it in the global namespace.

Example grid pre-configured class,apply config, Register Grid , used as xtype

http://examples.extjs.eu/ (grid in border layout)

149. Explain Extjs Vs Jquery?

ExtJs and JQuery are kind of apples and oranges. You can compare Ext Core to JQuery, and ExtJs to JQuery UI.

Ext JS is a full-fledged widget library while jQuery (not jQuery UI) and Mootools are JavaScript frameworks that help with DOM manipulation etc.

Whilst jQuery and Mootools help with the general workings of a site.

jQuery UI is a much less rich set of components.

Ext JS seems to be focussed on tables and storing data, plus manipulating it.

Toggle Class

150. In Which Language, Jquery Ui Is Written?

JavaScript

151. Is Jquery Ui Opensource?

Yes.

152. What Is Current Stable Version Of Jquery Ui?

1.11.4 / dated 11 March 2015

153. How To Add Css Property On Last Div?

$('div:last').css({backgroundColor: 'green', fontWeight: 'bolder'});

154. What Is $.noconflict()?

<script src="https://code.jquery.com/jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">

$.noConflict()

</script>

When we call to $.noConflict(). Old references of $ are saved during jQuery initialization, noConflict() simply restores them.

155. Can We Use Another Variable Instead Of $ In Jquery? If Yes, How?

Yes, we can.

var jQ = jQuery.noConflict();

/** Now use jQ instead of $ **/

jQ( "div#pid" ).hide();

156. How To Remove Close Button On The Jquery Ui Dialog Using Css?

.ui-dialog-titlebar-close

{

  visibility: hidden;]

}