DEV Community

JWP
JWP

Posted on • Edited on

1

Angular CSS using Directives only

Directives Instead of CSS

CSS is messy for sure, hard to refactor and it's everywhere. What if we can encapsulate CSS into Directives making them dynamically adhere to input parameters?

import { Directive, ElementRef, Input, OnInit } from "@angular/core";

@Directive({
   selector: "[appGrid]",
})
export class GridDirective implements OnInit {
   /** Enter number as string; units are em */
   @Input() minWidth: string = "5em";
   /** Enter number as string; units are fr */
   @Input() maxWidth: string = "1fr";
   /** Just put in number units are in em */
   @Input() columnGap: string = "0.5em";

   constructor(private elementRef: ElementRef) {}

   ngOnInit() {
      let css = `
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(${this.minWidth},${this.maxWidth}));
     grid-column-gap: ${this.columnGap};`;
      this.elementRef.nativeElement.setAttribute("style", css);
   }
}
Enter fullscreen mode Exit fullscreen mode

It currently only supports Columns, but is easily changed to do other things. Because it uses auto-fit the number of columns are 100% fluid meaning they shrink and expand based on the width of the window. No media queries necessary. All the @Inputs have default values so everything works out-of-the-box. However, the minmax values are able to be injected from the user of the directive.

How do we use it?

Simply add "appGrid" into any HTML container tag, like this:

<div appGrid>
  //each successive html container is a candidate for its own column
</div>
Enter fullscreen mode Exit fullscreen mode

Take away: What you see above is the replacement of using the class attribute and any back-end specific styles. Because of intellisense, we can right click on appGrid and "go to definition" at any time. It's just a better way to effect styling all around.

View Encapsulation is unaffected by this.

Coming up: Adding More function to the Angular Grid Directive...

JWP2020

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!