docs: add dynamic host first three samples

2025-12-11 04:22:07 +00:00 · 2023-12-27 16:41:50 -07:00
parent 2958ceff57
commit 48205997d4
25 changed files with 39125 additions and 7 deletions
--- a/content/blog/angular-dynamic-host-usage/alert-on-destroy/src/index.html
+++ b/content/blog/angular-dynamic-host-usage/alert-on-destroy/src/index.html
@@ -0,0 +1,8 @@
+<html>
+	<head>
+		<title>Alert On Destroy</title>
+	</head>
+	<body>
+		<app-root></app-root>
+	</body>
+</html>
--- a/content/blog/angular-dynamic-host-usage/alert-on-destroy/src/main.ts
+++ b/content/blog/angular-dynamic-host-usage/alert-on-destroy/src/main.ts
@@ -0,0 +1,30 @@
+import "zone.js";
+import { bootstrapApplication } from "@angular/platform-browser";
+
+import { Component, Directive, OnDestroy } from "@angular/core";
+import { NgIf } from "@angular/common";
+
+@Directive({
+	selector: '[alertOnDestroy]',
+	standalone: true,
+})
+class AlertOnDestroyDirective implements OnDestroy {
+	ngOnDestroy() {
+		alert('Element was unrendered!');
+	}
+}
+
+@Component({
+	selector: 'app-root',
+	standalone: true,
+	imports: [AlertOnDestroyDirective, NgIf],
+	template: `
+		<p *ngIf="render" alertOnDestroy>Unmount me to see an alert!</p>
+		<button (click)="render = !render">Toggle</button>
+	`,
+})
+class AppComponent {
+	render = true;
+}
+
+bootstrapApplication(AppComponent);