text: ---
  Title: Transclusion
  Added: v2.6.0
  ---
  
  # Transclusion
  
  Several components in ADF make use of **transclusion**, which is the technique
  of incorporating user-supplied content in the body of a standard component.
  
  In
  most cases, this is used to make small customizations (for example, the various
  list components let you supply custom content to show when the list is empty).
  However, there are also a few "containers" whose entire content is set by the user
  with the container itself being mainly for convenient display and formatting
  (for example, the [Info drawer component](../core/components/info-drawer.component.md)).
  
  You supply the content you want to transclude between the opening and closing tags of
  the main component. In a few cases, this content can be completely free-form as with
  the body section of the [Login component](../core/components/login.component.md):
  
  ```html
  <adf-login ...>
      <div>
          <div>Your extra content</div>
      </div>
  </adf-login>
  ```
  
  More often, though, the main component makes use of one or more sub-components to add
  structure to the transclusion. For example, the [Login component](../core/components/login.component.md)
  also has sub-components for the header and footer regions in addition to the free-form
  content of the body:
  
  ```html
  <adf-login ...>
      <adf-login-footer><ng-template>My custom HTML for the footer</ng-template></adf-login-footer>
  </adf-login>
  ```
  
  ![Custom login footer example](../docassets/images/custom-footer.png)
  
  The doc pages for the components that use transclusion contain full details of all
  supported sub-components and their usage. 