document.js

document.html

<template bindable="open">
    <div if.bind="open" class="cd-document">
        <button class="mdl-button mdl-js-button mdl-button--icon cd-document__close" click.trigger="close()">
            <i class="material-icons">close</i>
        </button>
        <div class="cd-document__title">
            <div class="cd-document__title__image">
                <i class="material-icons">image</i>
                image
            </div>
            <div>
                <a class="mdl-button mdl-button--icon">
                    <i class="material-icons">get_app</i>
                </a>
            </div>
        </div>
        <div class="cd-document__container">
            <div class="cd-document__viewer">
                <h1>View</h1>
            </div>
            <div class="cd-document__details">
                <h1>Hola</h1>
                <content select="*">

                </content>
            </div>
        </div>
    </div>
</template>

document.js

import {bindable, bindingMode, customElement, child} from 'aurelia-framework';

@bindable({
    name:'open',
    attribute:'open',
    changeHandler:'openChanged',
    defaultBindingMode: bindingMode.oneWay,
    defaultValue: false
})
@customElement('document')
export class DocumentCustomElement{

    constructor() {
        this.myKeypressCallback = this.keypressInput.bind(this);
    }

    keypressInput(e) {
        if(e.keyCode == 27){
            this.close();
        }
    }

    openChanged(){
        if(this.open){
            window.addEventListener('keydown', this.myKeypressCallback, false);
        }
        else{
             window.removeEventListener('keydown', this.myKeypressCallback);
        }
    }

    close(){
        this.open = false;
    }
}

file.html

<template bindable="file">
    <require from="../components/document"></require>

    <div class="mdl-card__actions mdl-card--border animated fadeInDown">
        <button mdl="button" class="mdl-button--colored mdl-js-button mdl-js-ripple-effect" click.trigger="file.show = !file.show">
            ${file.name}
        </button>
    </div>
    <document open.two-way="file.show">
        <h1>Im the content</h1>
    </document>
</template>