Angularjs Interview Questions and Answers Set 6

51. Explain what are directives ? Mention some of the most commonly used directives in Angular.js application ?

A directive is something that introduces new syntax, they are like markers on DOM element which attaches a special behaviour to it. In any Angular.js application, directives are the most important components.

Some of the commonly used directives are ng-model, ng-App, ng-bind, ng-repeat , ng-show etc.

52. Explain what is data binding in Angular.js ?

Whenever a web page loads in the browser, following steps execute in the background.

Automatic synchronization of data between the model and view components is referred as data binding in Angular.js. There are two ways for data binding:-

=> Data mining in classical template systems
=> Data binding in angular templates

53. What Is Data Binding? How Many Types Of Data Binding Directives Are Provided By AngularJS?

Data binding is the connection bridge between view and business logic (view model) of the application. Data binding in AngularJs is the automatic synchronization between the model and view. When the model changes, the view is automatically updated and vice versa. AngularJs support one-way binding as well as two-way binding.

AngularJS provides the following data binding directives:

1)<ng-bind> – It updates the text content of the specified HTML element with the value of the given expression. This text content gets updated when there is any change in the expression. It is very similar to double curly markup ( {{expression }}) but less verbose.

It has the following Syntax.

<ANY ELEMENT ng-bind=”expression”> </ANY ELEMENT>

2)<ng-bind-html>– It evaluates the expression and inserts the HTML content into the element in a secure way. To use this functionality, it has to use $sanitize service. For this, it is mandatory that $sanitize is available.

It has the following Syntax.

<ANY ELEMENT ng-bind-html=” expression “> </ANY ELEMENT>

3)<ng-bind-template>– It replaces the element text content with the interpolation of the template. It can contain multiple double curly markups.

It has the following Syntax.

<ANY ELEMENT ng-bind-template=” {{expression1}} {{expression2}} … {{expressionn}} “> </ANY ELEMENT>

4)<ng-non-bindable>– This directive informs AngularJS, not to compile or bind the contents of the current DOM element. It is useful in the case when the user wants to display the expression only and do not want to execute it.

It has the following Syntax

<ANY ELEMENT ng-non-bindable > </ANY ELEMENT>

5)<ng-model>– This directive can be bound with input, select, text area or any custom form control. It provides two-way data binding. It also provides validation behaviour. It also retains the state of the control (like valid/invalid, touched/untouched and so on).

It has the following Syntax.

<input ng-bind=”expression”/>

54.Explain The Directives Ng-If, Ng-Switch, And Ng-Repeat?

A) <Ng-If>.

This directive can add/remove HTML elements from the DOM based on an expression. If the expression is true, it adds a copy of HTML elements to the DOM. If the expression evaluates to false, this directive removes the HTML element from the DOM.

<div ng-controller=”MyCtrl”>
<div ng-if=”data.isVisible”>ng-if  Visible</div>
</div><script>
var app = angular.module(“app”, []);
app.controller(“MyCtrl”, function ($scope) {
$scope.data = {};
$scope.data.isVisible = true;
});
</script>

B)<Ng-Switch>.This directive can add/remove HTML elements from the DOM conditionally based on scope expression.

Child elements with the directive will be displayed if it gets a match, else the element and its children get removed. It also allows defining a default section, by using the directive. It displays a section if none of the other sections match.

Let’s see the following example that displays the syntax for .

<div ng-controller=”MyCtrl”>
<div ng-switch on=”data.case”>
<div ng-switch-when=”1″>Shown when case is 1</div>
<div ng-switch-when=”2″>Shown when case is 2</div>
<div ng-switch-default>Shown when case is anything else than 1 and 2</div>         </div></div><script>

var app = angular.module(“app”, []);
app.controller(“MyCtrl”, function ($scope) {
$scope.data = {};
$scope.data.case = true;
});
</script>

C) <Ng-Repeat>.

This directive is used to iterate over a collection of items and generate HTML from it.

<div ng-controller=”MyCtrl”>
<ul>
<li ng-repeat=”name in names”>
{{ name }}
</li>
</ul></div>
<script>
var app = angular.module(“app”, []);
app.controller(“MyCtrl”, function ($scope) {
$scope.names = [ ‘Mahesh’, ‘Raj’, ‘Diksha’ ];
});
</script>

55. Which Angular Directive Would You Use To Hide An Element From The DOM Without Modifying Its Style?

It is the conditional ngIf Directive which we can apply to an element. Whenever the condition becomes false, the ngIf Directive removes it from the DOM.

56. What is ngClass directive in AngularJS?

ngClass directive This directive lets us do things like,

Add/Remove classes based on Angular variables.

Add/Remove classes based on evaluated expressions.

Bind single or multiple classes based on dynamic data.

Some Points about ng-class

The ng-class directive dynamically binds one or more CSS classes to an HTML element.

The value of the ng-class directive can be a string, an object, or an array.

If it is a string, it should contain one or more, space-separated class names.

As an object, it should contain key-value pairs, where the key is a Boolean value, and the value is the class name of the class you want to add. The class will only be added if the key is set to true.

Examples,

Ex 1

<div ng-class=”{class1 : expression1, class2 : expression2}”>      Hello World!    </div>

 

Here class1 will apply if the expression1 is true and class2 will apply if the expression2 is true.

Ex 2

< div ng-class=”{‘class1 class2’ : expression1}”> Hello World!      < /div>

 

Here class1 and class2 will apply if the expression1 is true.

We can reduce the above code into,

< div ng-class=”{‘class1 class2’ : expression1}”>      Hello World!      < /div>

57. How to load select box during page initialization using AngularJS?

Below is the sample code to initialize the select box using AngularJS –

<div ng-controller = “mycontroller” ng-init = “loaddataforselectBox()”>
</div>

58. How looping has been done in AngularJS?

Looping can be achieved like below in AngularJS –

<ul>
<li data-ng-repeat=”mytestname in names”>
{{ mytestname }}
</li>
</ul>

59. How to display the values in tables in AngularJS?

Below is the sample code for showing the data in table –

<table>
<tr>
<th>Product Name</th>
<th>Product Type</th>
</tr>
<tr ng-repeat=”product in category.products”>
<td>{{ product.name }}</td>
<td>{{ product.type }}</td>
</tr>
</table>

60. Can we create our own directives?

YES. AngularJS allows us to create our own custom directive.