diff --git a/apps/angular/3-directive-enhancement/src/app/app.component.ts b/apps/angular/3-directive-enhancement/src/app/app.component.ts
index 8d37369a1..cd952d310 100644
--- a/apps/angular/3-directive-enhancement/src/app/app.component.ts
+++ b/apps/angular/3-directive-enhancement/src/app/app.component.ts
@@ -1,19 +1,17 @@
-import { NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgForEmpty } from './empty.directive';
interface Person {
name: string;
}
@Component({
- imports: [NgFor, NgIf],
+ imports: [NgForEmpty],
selector: 'app-root',
template: `
- 0; else emptyList">
-
- {{ person.name }}
-
-
+
+ {{ person.name }}
+
The list is empty !!
`,
styles: [],
diff --git a/apps/angular/3-directive-enhancement/src/app/empty.directive.ts b/apps/angular/3-directive-enhancement/src/app/empty.directive.ts
new file mode 100644
index 000000000..085b2c86d
--- /dev/null
+++ b/apps/angular/3-directive-enhancement/src/app/empty.directive.ts
@@ -0,0 +1,41 @@
+import { NgFor } from '@angular/common';
+import {
+ Directive,
+ EmbeddedViewRef,
+ inject,
+ Input,
+ OnChanges,
+ TemplateRef,
+ ViewContainerRef,
+} from '@angular/core';
+
+@Directive({
+ // eslint-disable-next-line @angular-eslint/directive-selector
+ selector: '[ngForEmpty]',
+ standalone: true,
+ hostDirectives: [
+ {
+ directive: NgFor,
+ inputs: ['ngForOf:ngForEmptyOf'],
+ },
+ ],
+})
+class NgForEmptyDirective implements OnChanges {
+ private vcr = inject(ViewContainerRef);
+
+ @Input() ngForEmptyOf: T[] | undefined;
+
+ @Input() ngForEmptyElse!: TemplateRef;
+
+ private ref?: EmbeddedViewRef;
+
+ ngOnChanges(): void {
+ this.ref?.destroy();
+
+ if (!this.ngForEmptyOf || this.ngForEmptyOf.length === 0) {
+ this.ref = this.vcr.createEmbeddedView(this.ngForEmptyElse);
+ }
+ }
+}
+
+export { NgForEmptyDirective as NgForEmpty };