Benutzerdefiniertes sidenav in winkel 2

Question

Ich möchte ein benutzerdefiniertes sidenav in winkel 2 (Nicht mit eckigen material design) erstellen. Wie macht man das? Gibt es eine Möglichkeit, CSS innerhalb der Direktive zu definieren. Ist die Verwendung der Direktive ein gutes Ideal?

@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%'); 
    } 
} 

Seit

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

Ich will nicht div verwenden. Es sieht aus wie ein Durcheinander!

Answer 1

Dies ist mehr wie ein tun würde, dass in 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; 
    } 
} 

oder

@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