Custom sidenav in angular 2

Question

Я хочу создать пользовательский сиден в угловом 2 (не используя дизайн углового материала). Как это сделать? Есть ли способ определить CSS внутри директивы. Правильно ли используется директива по использованию?

@Directive({ 
    selector: 'may-cover' 
}) 

export class MayCover { 
    constructor(
     private elRef: ElementRef, 
     private renderer: Renderer 
    ) { 
     this.renderer.setElementStyle(this.elementRef, 'height', '100%'); 
     this.renderer.setElementStyle(this.elementRef, 'width', '100%'); 
     this.renderer.setElementStyle(this.elementRef, 'transition', '0.5s'); 
    } 

    open() { 
     this.renderer.setElementStyle(this.elementRef, 'margin-top', '0%'); 
    } 

    close() { 
     this.renderer.setElementStyle(this.elementRef, 'margin-top', '-100%'); 
    } 
} 

С

<may-cover #sidenav>...</may-cover> 

Я не хочу использовать div. Это похоже на беспорядок!

Answer 1

Это больше, как можно было бы сделать в Angular2

@Directive({ 
    selector: 'may-cover', 
    host: { 
     '[style.height.%]': '100', 
     '[style.width.%]': '100', 
     '[style.transition.s]': '0.5', 
    } 
}) 
export class MayCover { 

    @HostBinding('style.margin-top.%') 
    marginTop:number; 

    open() { 
    this.marginTop = 0; 
    } 

    close() { 
    this.marginTop = 100; 
    } 
} 

или

@Directive({ 
    selector: 'may-cover', 
    styles: [` 
     :host { 
     height: 100%; 
     width: 100%; 
     transition:0.5s; 
     }`], 
    } 
}) 
export class MayCover { 

    @HostBinding('style.margin-top.%') 
    marginTop:number; 

    open() { 
    this.marginTop = 0; 
    } 

    close() { 
    this.marginTop = 100; 
    } 
} 

Plunker example