AngularJS ng-transclude Directive

Last Updated : 05 Sep, 2022

The ng-transclude directive is used to mark the insertion point for transcluded DOM of the nearest parent that uses transclusion. Use transclusion slot name as the value of ng-transclude or ng-transclude-slot attribute. If the transcluded content has more than one DOM node with the whitespace text node, then the text that exists with content for this element will be discarded before the transcluded content is inserted. In case, if the transcluded content is empty or contains only a whitespace text node, then the content that exists will remain unchanged. For this, it facilitates the fallback content when no transcluded content is provided.

Syntax: The ng-transclude Directive can be defined in the following ways:

As element:

<ng-transclude ng-transclude-slot="string">
    ...
</ng-transclude>

As CSS class:

<element class="ng-transclude: string;"> ... </element>

As attribute:

<element ng-transclude="string">
    ...
</element>

Parameter value:

ngTransclude: It specifies the name of the slot that is to be inserted for this point. The default slot will be utilized if it is not given or has the same value as the attribute’s name or contains empty. It is of string type.

Example 1: This example describes the implementation of the ng-transclude Directive in AngularJS.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
    </script>
</head>
 
<body ng-app="transcludeDemo"
      style="text-align: center;">
    <script>
        angular.module('transcludeDemo', [])
            .directive('pane', function () {
                return {
                    restrict: 'E',
                    transclude: true,
                    scope: {
                        title: '@'
                    },
                    template:
                        '<div style="border: 3px solid black;">' +
                        '<div style="background-color: limegreen">' +
                        '{{title.toUpperCase();}}</div>' +
                        '<ng-transclude></ng-transclude>' +
                        '</div>'
                };
            })
            .controller(
                'ExampleController', ['$scope', function ($scope) {
                    $scope.title = 'gfg';
                }]);
    </script>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>ng-transclude Directive</h3>
    <div ng-controller="ExampleController">
        <input ng-model="title" aria-label="title">
        <br />
        <pane title="{{title}}">
            <span>{{text}}</span>
        </pane>
    </div>
</body>
</html>

Output:

Example 2: This example describes the implementation of the ng-transclude Directive in AngularJS, by using the <textarea> tag.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title> simpleTransclude Example </title>
    <script src=
"//code.angularjs.org/snapshot/angular.min.js">
    </script>
</head>
 
<body ng-app="transcludeDemo" style="text-align: center;">
    <script>
        angular.module('transcludeDemo', [])
            .directive('pane', function () {
                return {
                    restrict: 'E',
                    transclude: true,
                    scope: {
                        title: '@'
                    },
                    template:
                        '<div style="border: 1px solid black;">' +
                        '<div style="background-color: green">' +
                        '{{title.toUpperCase();}}</div>' +
                        '<ng-transclude></ng-transclude>' +
                        '</div>'
                };
            })
            .controller(
                'ExampleController', ['$scope', function ($scope) {
                    $scope.title = 'gfg';
                    $scope.text = 'geeksforgeeks';
                }]);
    </script>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>ng-transclude Directive</h3>
    <div ng-controller="ExampleController">
        <input ng-model="title" aria-label="title">
        <br />
        <textarea ng-model="text" aria-label="text"></textarea>
        <br />
        <pane title="{{title}}">
            <span>{{text.toUpperCase();}}</span>
        </pane>
    </div>
</body>
</html>

Output:

Example 3: This example describes the implementation of the ng-transclude Directive in AngularJS, creating the custom button.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>ng-transclude</title>
     <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
    </script>
</head>
 
<body ng-app="FallbackContentDemo" style="text-align:center">
    <script>
        angular.module('FallbackContentDemo', [])
            .directive('myButton', function () {
                return {
                    restrict: 'E',
                    transclude: true,
                    scope: true,
                    template:
                        '<button style="cursor: wait;">' +
                        '<ng-transclude>' +
                        '<b style="color: green;">Click Me!</b>' +
                        '</ng-transclude>' +
                        '</button>'
                };
            });
    </script>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>ng-transclude Directive</h3>
 
    <!-- fallback button content -->
    <my-button id="fallback"></my-button>
    <!-- modified button content -->
    <br>
    <my-button id="modified">
        <i style="color: blue;">Click Me!</i>
    </my-button>
</body>
</html>