C# Guide - C#, Asp.Net, MVC, LINQ, jQuery and SharePoint Resources

Showing posts with label Directives. Show all posts

Tuesday, November 27, 2018

Custom Structural Directive example

Structural directive in Angular manipulate the DOM by adding/removing a set of elements. Attribute directives on the other hand decorate the element with more content/features. Structural directives can be identified with the * mark in front of them. In this example we will create a simple structural directive *ngShow which will show/hide the embedded content based on a condition. Let us start by creating a new directive using the following ng command.

Custom Structural Directive

Structural directive in Angular alter the DOM by adding/removing elements to the DOM based on specific conditions. Attribute directives on the other hand can be used to app specific properties / styles to the element which is using the directive. We saw the example of the highliter Attribute directive which added a background color for highlighting the element which uses the directive.

ngIf is a built-in structural directive, based on the condition/expression we pass to this directive we can show/hide a block of elements in the DOM. Structural directives are represented with a * symbol before the directing like *ngIf.

Angular Custom Directives

Directives in angular are special notations which allows us to extend the behavior of DOM elements in the view template. Like components directives also have a selector and used in the view template to extend the functionality of HTML tags. When the Angular compiler finds a directive in the view template it executes the class behind the directive and modifies the DOM accordingly.

Angular provides built-in directives like ngIf, ngFor etc, apart from these we can also define our own custom directives and use them in the view template.

Custom directives can be created using the ng generate directive command as follows.

Types of Angular Directives

Angular has 3 different types of directives

1. Component Directive

2. Structural Directive &

3. Attribute Directive

What is an Angular Directive

Directives in angular are special notations which allows us to extend the behavior of DOM elements in the view template. For example the ngFor is a built-in Angular directives, the ngFor directive is used to repeat a set of HTML elements for a predefined number of times thereby creating a table/list structure in the view template.

Directives are not totally new to the Angular world, we had directives like ng-repeat in AngularJS which did the same thing as ngFor. Since Angular has evolved from AngularJS, the Directives structure and templates have also evolved with it since Angular 2+

Directives are classes declared using @Directive. Directives also have different life-cycle hooks which we can implement to alter the behavior of the Directives.

A new directive can be created using the following CLI command.

ng generate directive

Wednesday, February 11, 2015

Using ng-repeat to process an array of objects

In the previous post ng-repeat directive we saw on how to use the ng-repeat directive to display items in a 1-dimentional array, however in real time we will have to deal with complex collections, a typical example could be to display a table/list which has multiple columns, in this case each row will have multiple properties, ng-repeat directive can handle these by parsing an array of objects.

The following example shows on how to process an array, where each element in the array is an object having its own set of properties.

<html ng-app>
<head>
<meta charset="utf-8" />
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-init="Employees=[
{id:1,Name:'Tom'},
{id:2,Name:'Harry'},
{id:3,Name:'Peter'}]">
<ul>
<li ng-repeat="emp in Employees">
{{ emp.id }} - {{ emp.Name }}<br/>
</li>
</ul>
</div>
</body>

</html>

Output:

ng-repeat directive

The ng-repeat directive can be used to iterate through a collection and process one item at a time from the collection. This is similar to the foreach loop in C#. The ng-repeat directive comes in handy when we want to display a list of items in an array/collection in the view.

The following example shows how to use the ng-repeat directive to display a list of array items using the ng-repeat directive.

ng-init directive

The ng-init directive, is used to initialize specific variables and use them within expressions. It acts more like a Declare statement where we can specify name/value pairs of variables. Before starting with any AngularJs example make sure you download and refer to a local copy of the Angularjs library file, or refer to one of the online libraries for AngularJS.

Following is a simple example of using ng-init directive to declare a Name variable and assign a value to it.

What are AngularJS Directives?

Directives are the core of AngularJS, directives bind AngularJS with the HTML elements. Directives in AngularJS are prefixed with ng-. The syntax is ng-<directive name>

Examples of directives are ng-app, ng-controller, ng-model etc...
To render a page to the user, the HTML tags in the page is parsed by the browser to create a DOM Tree, once the tree is built AngularJS parses the DOM tree, detects the directives in the tree compiles them before rendering the final HTML to the client.

The following are some of the most common AngularJS Directives