Olá Eu quero criar um componente de diálogo personalizado e quero inseri-lo de forma declarativa, deve ficar assim:

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>

exemplo de uso:

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

Isso não está funcionando, como posso fazer isso? É possível?