Angular 2 Template Component

Question

Hello I want to create a custom dialog component and I want to insert it content on a declarative way, should look like this:

app.action.dialog.component.ts:

Answer 1

I correctly understand your question (provide some content to another component), I think that you could leverage ng-content:

@Component({
  selector: 'field',
  template: `
    <div>
      <ng-content></ng-content>
    </div>
  `
})
export class FormFieldComponent {
  (...)
}

and use the component like that:

<field>
  <input [(ngModel)]="company.address.street"/>
</field>

Hope it hepls you, Thierry

Answer 2

I think for <content> to work you need to switch from the default ViewEncapsulation.Emulated to ViewEncapsulation.Native (and add web-components polyfills on browsers that don't support it natively) or use <ng-content> instead which works in all view encapsulation modes.