Cleaned code (tslint)

src/app/directives/flex-xxs.directive.ts

-import { Directive } from "@angular/core";
+import { Directive, Input } from "@angular/core";
 import { BREAKPOINT, ShowHideDirective, FlexDirective } from "@angular/flex-layout";
 
 const XXS_BREAKPOINTS = [
@@ -30,36 +30,29 @@ export const CustomBreakPointsProvider = {
     multi: true
 };
 
-const inputsXxs = [ "fxHide.xxs" ];
-const inputsGtXxs = [ "fxHide.gt-xxs" ];
-const inputsLtXs = [ "fxHide.lt-xs" ];
-
 @Directive({
     // tslint:disable-next-line:directive-selector
-    selector: `[fxHide.xxs]`,
-    // tslint:disable-next-line:use-input-property-decorator
-    inputs: inputsXxs
+    selector: `[fxHide.xxs]`
 })
 export class FlexXxsShowHideDirective extends ShowHideDirective {
-    protected inputs = inputsXxs;
+    protected inputs = [ "fxHide.xxs" ];
+    @Input() "fxHide.xxs": string;
 }
 
 @Directive({
     // tslint:disable-next-line:directive-selector
-    selector: `[fxHide.gt-xxs]`,
-    // tslint:disable-next-line:use-input-property-decorator
-    inputs: inputsGtXxs
+    selector: `[fxHide.gt-xxs]`
 })
 export class FlexGtXxsShowHideDirective extends ShowHideDirective {
-    protected inputs = inputsGtXxs;
+    protected inputs = [ "fxHide.gt-xxs" ];
+    @Input() "fxHide.gt-xxs": string;
 }
 
 @Directive({
     // tslint:disable-next-line:directive-selector
-    selector: `[fxHide.lt-xs]`,
-    // tslint:disable-next-line:use-input-property-decorator
-    inputs: inputsLtXs
+    selector: `[fxHide.lt-xs]`
 })
 export class FlexLtXsShowHideDirective extends ShowHideDirective {
-    protected inputs = inputsLtXs;
+    protected inputs = [ "fxHide.lt-xs" ];
+    @Input() "fxHide.lt-xs": string;
 }

tslint.json

@@ -69,7 +69,6 @@
     "no-trailing-whitespace": true,
     "no-unnecessary-initializer": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
     "one-line": [