---
title: "What is transclusion in AngularJS, and how is it used?"  
description: "What is transclusion in AngularJS, and how is it used?"  
author: "Revati S Misra"  
published: 2023-04-18  
updated: 2023-10-05  
canonical: https://www.mindstick.com/forum/157882/what-is-transclusion-in-angularjs-and-how-is-it-used  
category: "angular js"  
tags: ["angular js", "angularjs development"]  
reading_time: 3 minutes  

---

# What is transclusion in AngularJS, and how is it used?

What is transclusion in [AngularJS](https://www.mindstick.com/forum/33926/use-angularjs-without-scope-in-mvc), and how is it used?

## Replies

### Reply by Aryan Kumar

Transclusion in AngularJS is a mechanism that allows you to include content or templates within a custom directive's template. It allows you to inject content into a directive from outside, enabling the creation of reusable and flexible components.

Transclusion is primarily used in AngularJS (version 1.x) because it provides a way to create complex directives that encapsulate both their behavior and their visual representation, making it easier to create reusable UI components.

Here's how transclusion works and how it is used in AngularJS:

## 1. Transclusion Directive:

To use transclusion, you define a custom directive and configure it to accept transcluded content. You do this by setting the **transclude** property to **true** in the directive definition object (DDO).

javascriptCopy code

```plaintext
angular.module('myApp').directive('myDirective', function () {
  return {
    restrict: 'E',
    transclude: true, // Enable transclusion
    template: '<div>This is my directive template</div><div ng-transclude></div>',
  };
});
```

In the example above, **ng-transclude** is a placeholder where the transcluded content will be inserted.

## 2. Using the Transcluded Content:

Now, when you use the **my-directive** element in your HTML, any content enclosed within the directive tags will be transcluded into the directive's template.

```plaintext
<my-directive>
  <p>This content will be transcluded into the directive.</p>
</my-directive>
```

The content within the **<p>** tag will be inserted into the **ng-transclude** placeholder in the directive's template.

## 3. Custom Scope:

By default, transcluded content uses the same scope as the parent scope. However, you can create a new scope for the transcluded content if needed. This can be useful for isolating scope between the directive and the transcluded content.

```plaintext
angular.module('myApp').directive('myDirective', function () {
  return {
    restrict: 'E',
    transclude: true,
    scope: {}, // Create an isolated scope
    template: '<div>This is my directive template</div><div ng-transclude></div>',
  };
});
```

With an isolated scope, the transcluded content won't have access to the parent scope.

## 4. Multiple Transclusions:

You can have multiple transclusion points in a single directive template, allowing you to transclude different pieces of content separately.

```plaintext
angular.module('myApp').directive('multiTransclude', function () {
  return {
    restrict: 'E',
    transclude: {
      header: 'headerContent',
      body: 'bodyContent',
    },
    template: '<div><div ng-transclude="header"></div><div ng-transclude="body"></div></div>',
  };
});
```

Then, when using the directive, you specify the transcluded content using custom attributes.

```plaintext
<multi-transclude>
  <header-content>
    <h1>This is the header</h1>
  </header-content>
  <body-content>
    <p>This is the body</p>
  </body-content>
</multi-transclude>
```

Transclusion in AngularJS is a powerful feature that enables the creation of versatile and reusable directives. It allows you to separate the structure and behavior of components, making your AngularJS applications more modular and maintainable. However, note that Angular (versions 2 and later) has a different approach to component composition, and transclusion is not used in the same way in Angular as it is in AngularJS.


---

Original Source: https://www.mindstick.com/forum/157882/what-is-transclusion-in-angularjs-and-how-is-it-used

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.