Carlos Cifuentes
AngularJS → Angular reference

ng-transclude in modern Angular

Transclusion becomes content projection with ng-content. Named slots use a CSS selector.

Before · AngularJS
app.component('card', {
  transclude: { title: '?cardTitle' },
  template:
    '<div class="card">' +
      '<header ng-transclude="title"></header>' +
      '<div ng-transclude></div>' +
    '</div>'
});
After · Angular
@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <header><ng-content select="[card-title]" /></header>
      <ng-content />
    </div>
  `,
})
export class CardComponent {}

What changes

  • ng-transclude becomes <ng-content />.
  • Multi-slot transclusion becomes ng-content with a select attribute.
  • Fallback content goes inside the ng-content element (Angular 18 and later).

Migration tip. Projected content keeps the parent's context, as before. Components that relied on reading the transcluded scope need an explicit input instead.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn