ngbracket · DuncanFaulkner · Jun 12, 2026 · Jun 11, 2026
diff --git a/projects/apps/universal-demo-app/src/app/split/split-area.directive.ts b/projects/apps/universal-demo-app/src/app/split/split-area.directive.ts
@@ -1,5 +1,5 @@
 import { Directive, Optional, Self } from '@angular/core';
-import { DefaultFlexDirective } from '@ngbracket/ngx-layout';
+import { FlexDirective } from '@ngbracket/ngx-layout';
 
 @Directive({
   selector: '[ngxSplitArea]',
@@ -8,5 +8,5 @@ import { DefaultFlexDirective } from '@ngbracket/ngx-layout';
   },
 })
 export class SplitAreaDirective {
-  constructor(@Optional() @Self() public flex: DefaultFlexDirective) {}
+  constructor(@Optional() @Self() public flex: FlexDirective) {}
 }
diff --git a/projects/libs/flex-layout/extended/class/class.spec.ts b/projects/libs/flex-layout/extended/class/class.spec.ts
@@ -21,7 +21,7 @@ import {
   ɵMockMatchMedia as MockMatchMedia,
   ɵMockMatchMediaProvider as MockMatchMediaProvider,
 } from '@ngbracket/ngx-layout/core';
-import { DefaultClassDirective } from '@ngbracket/ngx-layout/extended';
+import { ClassDirective } from '@ngbracket/ngx-layout/extended';
 
 import {
   expectNativeEl,
@@ -52,7 +52,7 @@ describe('class directive', () => {
         MatButtonModule,
         CommonModule,
         CoreModule,
-        DefaultClassDirective,
+        ClassDirective,
         TestClassComponent,
       ],
       providers: [MockMatchMediaProvider],
@@ -341,7 +341,7 @@ describe('class directive', () => {
   selector: 'test-class-api',
   template: `<span>PlaceHolder Template HTML</span>`,
   changeDetection: ChangeDetectionStrategy.Eager,
-  imports: [MatButtonModule, CommonModule, CoreModule, DefaultClassDirective],
+  imports: [MatButtonModule, CommonModule, CoreModule, ClassDirective],
 })
 class TestClassComponent {
   hasXs1: boolean = false;

diff --git a/projects/libs/flex-layout/extended/class/class.ts b/projects/libs/flex-layout/extended/class/class.ts
@@ -83,15 +83,3 @@ export class ClassDirective extends BaseDirective2 implements DoCheck {
     this.ngClassInstance.ngDoCheck();
   }
 }
-
-/**
- * Directive to add responsive support for ngClass.
- * This maintains the core functionality of 'ngClass' and adds responsive API
- * Note: this class is a no-op when rendered on the server
- * *  @deprecated The DefaultClassDirective will be removed in version 21.
- * Use ClassDirective directly instead.
- */
-@Directive({ selector, inputs })
-export class DefaultClassDirective extends ClassDirective {
-  protected override inputs = inputs;
-}
diff --git a/projects/libs/flex-layout/extended/img-src/img-src.spec.ts b/projects/libs/flex-layout/extended/img-src/img-src.spec.ts
@@ -23,7 +23,7 @@ import {
   queryFor,
 } from '@ngbracket/ngx-layout/_private-utils/testing';
 import { FlexLayoutModule } from '../../module';
-import { DefaultImgSrcDirective } from '@ngbracket/ngx-layout/extended';
+import { ImgSrcDirective } from '@ngbracket/ngx-layout/extended';
 
 const SRC_URLS = {
   xs: [
@@ -375,7 +375,7 @@ describe('img-src directive', () => {
   selector: 'test-src-api',
   template: '',
   changeDetection: ChangeDetectionStrategy.Eager,
-  imports: [CommonModule, DefaultImgSrcDirective],
+  imports: [CommonModule, ImgSrcDirective],
 })
 class TestSrcComponent {
   defaultSrc = '';

diff --git a/projects/libs/flex-layout/extended/img-src/img-src.ts b/projects/libs/flex-layout/extended/img-src/img-src.ts
@@ -94,20 +94,3 @@ export class ImgSrcDirective extends BaseDirective2 {
 }
 
 const imgSrcCache: Map<string, StyleDefinition> = new Map();
-
-/**
- *  *  @deprecated The DefaultImgSrcDirective will be removed in version 21.
- * Use ImgSrcDirective directly instead.
- *
- * This directive provides a responsive API for the HTML <img> 'src' attribute
- * and will update the img.src property upon each responsive activation.
- *
- * e.g.
- *      <img src="defaultScene.jpg" src.xs="mobileScene.jpg"></img>
- *
- * @see https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-src/
- */
-@Directive({ selector, inputs })
-export class DefaultImgSrcDirective extends ImgSrcDirective {
-  protected override inputs = inputs;
-}
diff --git a/projects/libs/flex-layout/extended/module.ts b/projects/libs/flex-layout/extended/module.ts
@@ -1,16 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CoreModule } from '@ngbracket/ngx-layout/core';
 
-import { DefaultClassDirective } from './class/class';
-import { DefaultImgSrcDirective } from './img-src/img-src';
-import { DefaultShowHideDirective } from './show-hide/show-hide';
-import { DefaultStyleDirective } from './style/style';
+import { ClassDirective } from './class/class';
+import { ImgSrcDirective } from './img-src/img-src';
+import { ShowHideDirective } from './show-hide/show-hide';
+import { StyleDirective } from './style/style';
 
 const ALL_DIRECTIVES = [
-  DefaultShowHideDirective,
-  DefaultClassDirective,
-  DefaultStyleDirective,
-  DefaultImgSrcDirective,
+  ShowHideDirective,
+  ClassDirective,
+  StyleDirective,
+  ImgSrcDirective,
 ];
 
 /**

diff --git a/projects/libs/flex-layout/extended/show-hide/hide.spec.ts b/projects/libs/flex-layout/extended/show-hide/hide.spec.ts
@@ -24,11 +24,11 @@ import {
   queryFor,
 } from '@ngbracket/ngx-layout/_private-utils/testing';
 import { FlexLayoutModule } from '../../module';
-import { DefaultShowHideDirective } from '@ngbracket/ngx-layout/extended';
+import { ShowHideDirective } from '@ngbracket/ngx-layout/extended';
 import {
-  DefaultFlexDirective,
-  DefaultLayoutAlignDirective,
-  DefaultLayoutDirective,
+  FlexDirective,
+  LayoutAlignDirective,
+  LayoutDirective,
 } from '@ngbracket/ngx-layout/flex';
 
 describe('hide directive', () => {
@@ -377,10 +377,10 @@ describe('hide directive', () => {
   changeDetection: ChangeDetectionStrategy.Eager,
   imports: [
     CommonModule,
-    DefaultShowHideDirective,
-    DefaultLayoutDirective,
-    DefaultLayoutAlignDirective,
-    DefaultFlexDirective,
+    ShowHideDirective,
+    LayoutDirective,
+    LayoutAlignDirective,
+    FlexDirective,
   ],
 })
 class TestHideComponent {

diff --git a/projects/libs/flex-layout/extended/show-hide/show-hide.ts b/projects/libs/flex-layout/extended/show-hide/show-hide.ts
@@ -216,13 +216,3 @@ export class ShowHideDirective
 }
 
 const DISPLAY_MAP: WeakMap<HTMLElement, string> = new WeakMap();
-
-/**
- * 'show' Layout API directive
- *  @deprecated The DefaultShowHideDirective will be removed in version 21.
- * Use ShowHideDirective directly instead.
- */
-@Directive({ selector, inputs })
-export class DefaultShowHideDirective extends ShowHideDirective {
-  protected override inputs = inputs;
-}
diff --git a/projects/libs/flex-layout/extended/show-hide/show.spec.ts b/projects/libs/flex-layout/extended/show-hide/show.spec.ts
@@ -19,11 +19,11 @@ import { MatFormFieldModule, MatLabel } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
-import { DefaultShowHideDirective } from '@ngbracket/ngx-layout/extended';
+import { ShowHideDirective } from '@ngbracket/ngx-layout/extended';
 import {
-  DefaultFlexDirective,
-  DefaultLayoutAlignDirective,
-  DefaultLayoutDirective,
+  FlexDirective,
+  LayoutAlignDirective,
+  LayoutDirective,
 } from '@ngbracket/ngx-layout/flex';
 import {
   expectEl,
@@ -39,7 +39,6 @@ import {
   SERVER_TOKEN,
   StyleUtils,
 } from '@ngbracket/ngx-layout/core';
-import { ShowHideDirective } from '../../extended/show-hide/show-hide';
 
 describe('show directive', () => {
   let fixture: ComponentFixture<any>;
@@ -429,10 +428,10 @@ class FxShowHideDirective extends ShowHideDirective {
     FormsModule,
     MatSelectModule,
     MatLabel,
-    DefaultShowHideDirective,
-    DefaultLayoutDirective,
-    DefaultLayoutAlignDirective,
-    DefaultFlexDirective,
+    ShowHideDirective,
+    LayoutDirective,
+    LayoutAlignDirective,
+    FlexDirective,
     FxShowHideDirective,
   ],
 })

diff --git a/projects/libs/flex-layout/extended/style/style.ts b/projects/libs/flex-layout/extended/style/style.ts
@@ -137,20 +137,6 @@ export class StyleDirective extends BaseDirective2 implements DoCheck {
   }
 }
 
-/**
- * Directive to add responsive support for ngStyle.
- * * @deprecated The DefaultStyleDirective will be removed in version 21.
- * Use StyleDirective directly instead.
- *
- */
-/* @deprecated The DefaultStyleDirective will be removed in version 21.
- * Use StyleDirective directly instead.
- */
-@Directive({ selector, inputs })
-export class DefaultStyleDirective extends StyleDirective implements DoCheck {
-  protected override inputs = inputs;
-}
-
 /** Build a styles map from a list of styles, while sanitizing bad values first */
 function buildMapFromList(
   styles: NgStyleRawList,

diff --git a/projects/libs/flex-layout/flex/flex-align/flex-align.ts b/projects/libs/flex-layout/flex/flex-align/flex-align.ts
@@ -77,12 +77,3 @@ export class FlexAlignDirective extends BaseDirective2 {
 }
 
 const flexAlignCache: Map<string, StyleDefinition> = new Map();
-
-/**
- * @deprecated The DefaultFlexAlignDirective will be removed in version 21.
- * Use FlexAlignDirective directly instead.
- */
-@Directive({ selector, inputs })
-export class DefaultFlexAlignDirective extends FlexAlignDirective {
-  protected override inputs = inputs;
-}
diff --git a/projects/libs/flex-layout/flex/flex-offset/flex-offset.spec.ts b/projects/libs/flex-layout/flex/flex-offset/flex-offset.spec.ts
@@ -22,9 +22,9 @@ import {
   ɵMockMatchMediaProvider as MockMatchMediaProvider,
 } from '@ngbracket/ngx-layout/core';
 import {
-  DefaultFlexDirective,
-  DefaultFlexOffsetDirective,
-  DefaultLayoutDirective,
+  FlexDirective,
+  FlexOffsetDirective,
+  LayoutDirective,
   FlexModule,
   FlexOffsetStyleBuilder,
 } from '@ngbracket/ngx-layout/flex';
@@ -273,12 +273,7 @@ export class MockFlexOffsetStyleBuilder extends StyleBuilder {
   selector: 'test-component-shell',
   template: `<span>PlaceHolder Template HTML</span>`,
   changeDetection: ChangeDetectionStrategy.Eager,
-  imports: [
-    CommonModule,
-    DefaultLayoutDirective,
-    DefaultFlexDirective,
-    DefaultFlexOffsetDirective,
-  ],
+  imports: [CommonModule, LayoutDirective, FlexDirective, FlexOffsetDirective],
 })
 class TestFlexComponent {
   direction = 'column';

diff --git a/projects/libs/flex-layout/flex/flex-offset/flex-offset.ts b/projects/libs/flex-layout/flex/flex-offset/flex-offset.ts
@@ -123,15 +123,6 @@ export class FlexOffsetDirective extends BaseDirective2 implements OnChanges {
   }
 }
 
-/**
- * @deprecated The DefaultFlexOffsetDirective will be removed in version 21.
- * Use FlexOffsetDirective directly instead.
- */
-@Directive({ selector, inputs })
-export class DefaultFlexOffsetDirective extends FlexOffsetDirective {
-  protected override inputs = inputs;
-}
-
 const flexOffsetCacheRowRtl: Map<string, StyleDefinition> = new Map();
 const flexOffsetCacheColumnRtl: Map<string, StyleDefinition> = new Map();
 const flexOffsetCacheRowLtr: Map<string, StyleDefinition> = new Map();

diff --git a/projects/libs/flex-layout/flex/flex-order/flex-order.spec.ts b/projects/libs/flex-layout/flex/flex-order/flex-order.spec.ts
@@ -21,7 +21,7 @@ import {
   makeCreateTestComponent,
 } from '@ngbracket/ngx-layout/_private-utils/testing';
 import { FlexLayoutModule } from '../../module';
-import { DefaultFlexOrderDirective } from '@ngbracket/ngx-layout/flex';
+import { FlexOrderDirective } from '@ngbracket/ngx-layout/flex';
 
 describe('flex-order', () => {
   let fixture: ComponentFixture<any>;
@@ -96,7 +96,7 @@ describe('flex-order', () => {
   selector: 'test-layout',
   template: `<span>PlaceHolder Template HTML</span>`,
   changeDetection: ChangeDetectionStrategy.Eager,
-  imports: [CommonModule, DefaultFlexOrderDirective],
+  imports: [CommonModule, FlexOrderDirective],
 })
 class TestOrderComponent {
   constructor() {}

diff --git a/projects/libs/flex-layout/flex/flex-order/flex-order.ts b/projects/libs/flex-layout/flex/flex-order/flex-order.ts
@@ -69,11 +69,3 @@ export class FlexOrderDirective extends BaseDirective2 implements OnChanges {
 }
 
 const flexOrderCache: Map<string, StyleDefinition> = new Map();
-/**
- * @deprecated The DefaultFlexOrderDirective will be removed in version 21.
- * Use FlexOrderDirective directly instead.
- */
-@Directive({ selector, inputs })
-export class DefaultFlexOrderDirective extends FlexOrderDirective {
-  protected override inputs = inputs;
-}
diff --git a/projects/libs/flex-layout/flex/flex/flex.spec.ts b/projects/libs/flex-layout/flex/flex/flex.spec.ts
@@ -28,11 +28,11 @@ import {
   StyleUtils,
 } from '@ngbracket/ngx-layout/core';
 import {
-  DefaultFlexDirective,
-  DefaultLayoutDirective,
+  FlexDirective,
+  LayoutDirective,
   FlexStyleBuilder,
 } from '@ngbracket/ngx-layout/flex';
-import { DefaultStyleDirective } from '@ngbracket/ngx-layout/extended';
+import { StyleDirective } from '@ngbracket/ngx-layout/extended';
 
 describe('flex directive', () => {
   let fixture: ComponentFixture<any>;
@@ -1037,7 +1037,7 @@ describe('flex directive', () => {
       fixture = TestBed.createComponent(TestQueryWithFlexComponent);
       fixture.detectChanges();
 
-      const layout: DefaultLayoutDirective =
+      const layout: LayoutDirective =
         fixture.debugElement.componentInstance.layout;
 
       expect(layout).toBeDefined();
@@ -1063,8 +1063,7 @@ describe('flex directive', () => {
       fixture = TestBed.createComponent(TestQueryWithFlexComponent);
       fixture.detectChanges();
 
-      const flex: DefaultFlexDirective =
-        fixture.debugElement.componentInstance.flex;
+      const flex: FlexDirective = fixture.debugElement.componentInstance.flex;
 
       // Test for percentage value assignments
       expect(flex).toBeDefined();
@@ -1095,8 +1094,7 @@ describe('flex directive', () => {
       fixture = TestBed.createComponent(TestQueryWithFlexComponent);
       fixture.detectChanges();
 
-      const flex: DefaultFlexDirective =
-        fixture.debugElement.componentInstance.flex;
+      const flex: FlexDirective = fixture.debugElement.componentInstance.flex;
 
       // Test for raw value assignments that are converted to percentages
       expect(flex).toBeDefined();
@@ -1309,12 +1307,7 @@ export class MockFlexStyleBuilder extends StyleBuilder {
   selector: 'test-layout',
   template: `<span>PlaceHolder Template HTML</span>`,
   changeDetection: ChangeDetectionStrategy.Eager,
-  imports: [
-    CommonModule,
-    DefaultLayoutDirective,
-    DefaultFlexDirective,
-    DefaultStyleDirective,
-  ],
+  imports: [CommonModule, LayoutDirective, FlexDirective, StyleDirective],
 })
 class TestFlexComponent {
   direction = 'column';
@@ -1329,11 +1322,11 @@ class TestFlexComponent {
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.Eager,
-  imports: [CommonModule, DefaultLayoutDirective, DefaultFlexDirective],
+  imports: [CommonModule, LayoutDirective, FlexDirective],
 })
 class TestQueryWithFlexComponent {
-  @ViewChild(DefaultFlexDirective, { static: true })
-  flex!: DefaultFlexDirective;
-  @ViewChild(DefaultLayoutDirective, { static: true })
-  layout!: DefaultLayoutDirective;
+  @ViewChild(FlexDirective, { static: true })
+  flex!: FlexDirective;
+  @ViewChild(LayoutDirective, { static: true })
+  layout!: LayoutDirective;
 }