Custom HTML Tag !!! Shocked ? Easy with AngularJS – Directive

Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

Directives can be used to create custom HTML tags that serve as new, custom widgets. They can also be used to “decorate” elements with behavior and manipulate DOM attributes in interesting ways.

First We need to Add AngularJS Library , and add reference on our Index.html Page . Index.html page code looks like below :::

<!DOCTYPE html>
<html ng-app="HelloWorldApp">
    <title>My Custom HTML Tag Directive</title>
    <script type="text/javascript" src="lib/angular.min.js"></script>
    <script src="app/MyDirective.js" type="text/javascript"></script>

Here We can see is not an HTML tag , but we can create a custom HTML tag easily by using AngularJS Directive.

Here is my AngularJS code of MyDirective.js :::

angular.module('HelloWorldApp', [])
    .directive('helloWorld', function () {
        return {
            restrict: 'E',
            template: '<div style="background-color:#D8D8D8;">Hello World By Shahjada</div>'


Leave a Reply

Your email address will not be published. Required fields are marked *