Clite Tailor Clite Tailor - 9 days ago 11
TypeScript Question

Custom sidenav in angular 2

I want to create a custom sidenav in angular 2 (Not using angular material design). How to do this?
Is there any way to define CSS inside directive. Does using directive is a good 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%');
}
}


Since

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


I don't want to use
div
. It looks like a mess!

Answer

This is more like one would do that 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;
  }
}

or

@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