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:

@Component({ selector: 'app-action-dialog', templateUrl: 'app/template/app.action.dialog.component.html' }) export class ActionDialog { showing: boolean; constructor() { this.showing = false; } show() { this.showing = true; } hide() { this.showing = false; } }

app.action.dialog.component.html:

<div id="overlay" class="valign-wrapper" *ngIf="showing" (click)="hide()"> <div class="container valign"> <div class="card"> <div class="card-content"> <content select="[content]"></content> </div> </div> </div> </div>

usage example:

<app.action.dialog> <div content> example </div> </app.action.dialog>

This ain't working, how can I do this? Is it possible?

Thierry Templier · Accepted Answer · 2016-01-22 16:08:04Z

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

Günter Zöchbauer · Accepted Answer · 2016-01-22 16:06:45Z

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.

I am accepting Thierry answer because he provided code samples. Anyway thanks for your help bro :D

Collectives™ on Stack Overflow

Angular 2 Template Component

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related