3

I am using AngularJs 1.6 with ng-metadata to progressively migrate the AngularJS components to Angular.

I need to build a component that is able to transclude a bit of HTML and I was hoping I can use something provided by ng-metadata since it will be easier when we upgrade to Angular. Unfortunately I can't find anything in the docs about this.

An example of a AngularJS component written using ng-metadata that uses transclusion will help me get started with this.

Radu Cojocari
  • 1,759
  • 1
  • 22
  • 25

2 Answers2

2

This is how my component decorator ended up looking.

@Component({
    selector: 'diDropdown',
    templateUrl: require('./dropdown-component.html'),
    legacy: { transclude: true},
})
export class DropdownComponent {}
Radu Cojocari
  • 1,759
  • 1
  • 22
  • 25
0

You can enable transclusion for AngularJS by adding transclude: true:

app.component('myComponent', function() {
    transclude: true,
    controller: function() {
        // Your code
    }
})

Documentation on regular transclusion

In your case, with the ng-metadata syntax, use:

@Component({
    selector: 'myComponent',
    templateUrl: 'my-template.html',
    legacy: {
        transclude: true
    }
})

More info about ng-metadata's transclusion

Jeffrey Roosendaal
  • 6,872
  • 8
  • 37
  • 55