Definition of transclusion – The inclusion of a document or part of a document into another document by reference. example are including styles.css in html page, or server side include which injects HTML fragment in a document.
In angular JS you typically custom fragment through directives and that’s where transclusion is important from angular perspective.
Two key features are provided by AngularJS to support transclusion. The first is a property that is used in directives named transclude. When a directive supports transclusion this property is set to true. The second is a directive named ng-transclude that is used to define where external content will be placed in a directive’s template. The directive code that follows uses these two AngularJS features to enable transclusion.
Consider a directive called custom-directive-element in an element, and that element is enclosing some other content, let’s say:
This will result in rendering
Notice that the content of your original element will be lost (or better said, replaced), button and href are gone
<button>Submit</button> <a href="#">Home</a>
So, what if you want to keep your button… and href.. in the DOM? You’ll need something called transclusion. The concept is pretty simple: Include the content from one place into another.
So with transclusion the directive should look like this
This would render:
In conclusion, you basically use transclude when you want to preserve the contents of an element when you’re using a directive.