import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appCol]'
})
export class ColDirective {

  constructor(private el: ElementRef, private render: Renderer2) {
    const screenWidth = window.screen.width;
    if (screenWidth < 576) {
      this.el.nativeElement.setAttribute('class', 'col');
    } else if (screenWidth >= 567 && screenWidth < 768) {
      this.el.nativeElement.setAttribute('class', 'col-sm');
    } else if (screenWidth >= 768 && screenWidth < 1366) {
      this.el.nativeElement.setAttribute('class', 'col-md');
    } else if (screenWidth >= 1366 && screenWidth < 1920) {
      this.el.nativeElement.setAttribute('class', 'col-lg');
    } else if (screenWidth >= 1920) {
      this.el.nativeElement.setAttribute('class', 'col-xl');
    }
  }
  // @HostListener('window:resize', ['$event'])
  // onResize(event) {

  // }

}