Angular Interview Questions and Answers Set 6

51. What are the Angular Modules?

Module in Angular refers to a place where you can group the components, directives, pipes, and services, which are related to the application. In case you are developing a website, the header, footer, left, center and the right section become part of a module.

52. What is Dependency Injection in Angular ?

Dependency injection, or DI, is a design pattern in which a class requests dependencies from external sources rather than creating them. Angular’s DI framework provides dependencies to a class upon instantiation. You can use Angular DI to increase flexibility and modularity in your applications.

53. What do you understand by dirty checking in Angular?

Dirty checking is a simple process that boils down to a very basic concept: It checks whether a value has changed that hasn’t yet been synchronized across the app. Our Angular app keeps track of the values of the current watches.

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. What do you understand by scope in Angular?

The scope in Angular binds the HTML, i.e., the view, and the JavaScript, i.e., the controller. It as expected is an object with the available methods and properties. The scope is available for both the view and the controller. When you make a controller in Angular, you pass the $scope object as an argument.

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. What is Transpiling in Angular?

Transpiling is the one o the process to convert the typescript into javascript. We can do this by using Traceur, a JS compiler. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

58.What is String Interpolation in Angular?

String Interpolation is a one-way data-binding technique that outputs the data from TypeScript code to HTML view. It is denoted using double curly braces. This template expression helps display the data from the component to the view.
{{ data }}

59. Explain ViewEncapsulation?

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. What is the difference between AOT and JIT?

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