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

9

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

answered Jan 22, 2016 at 16:08

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

1

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.

answered Jan 22, 2016 at 16:06

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

1 Comment

Marcos J.C Kichel Over a year ago

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

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related