4

Say I would like to permit specific custom elements (for example):

@Component({
  selector: 'transcludor',
  template: `
    <div class='transcludor'>
      <span class='slot-one'>
        <ng-content select='slot-one'></ng-content>
      </span>
      <span class='slot-two'>
        <ng-content select='slot-two'></ng-content>
      </span>
    </div>
  `})
export class Transcludor{
//stuff goes here
end

Which I then use with:

<transcludor>
  <slot-one>
    stuff
  </slot-one>
  <slot-two>
    stuff
  </slot-two>
</transcludor>

This fails with:

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
'slot-one' is not a known element:

Now, adding CUSTOM_ELEMENTS_SCHEMA to my @NgModule schema does make the problem go away, but it also allows any and all custom elements.

Is it possible to define a specific set of permitted custom elements (that aren't themselves components) to empower (for example) transclusion.

e.g. I would like: <slot-one></slot-one> and <slot-two></slot-two> to be permissible, but for <slot-three></slot-three> to throw the above exception.

Bonus points if this can be scoped to specific contexts (e.g. within the transcludor component.)

Abraham P
  • 15,029
  • 13
  • 58
  • 126
  • Have you tried to create a separate module for this component and add the `CUSTOM_ELEMENTS_SCHEMA` only to this module? – Günter Zöchbauer May 19 '17 at 11:34
  • Not sure if this will work but maybe using ContentChild so your transcludor component can look for specific components and them project them using ngTemplateOutlet. – Jacob Roberts Jul 12 '17 at 19:47

0 Answers0