docs: finalize adding code samples and embeds

2025-12-07 12:57:45 +00:00 · 2023-12-29 00:51:23 -07:00
parent caede175fc
commit 2f8a596814
33 changed files with 52236 additions and 0 deletions
--- a/content/blog/angular-dynamic-host-usage/red-directive/src/index.html
+++ b/content/blog/angular-dynamic-host-usage/red-directive/src/index.html
@@ -0,0 +1,8 @@
+<html>
+	<head>
+		<title>Red Directive</title>
+	</head>
+	<body>
+		<app-root></app-root>
+	</body>
+</html>
--- a/content/blog/angular-dynamic-host-usage/red-directive/src/main.ts
+++ b/content/blog/angular-dynamic-host-usage/red-directive/src/main.ts
@@ -0,0 +1,28 @@
+import "zone.js";
+import { bootstrapApplication } from "@angular/platform-browser";
+
+import { Component, Directive, ElementRef, inject } from "@angular/core";
+
+const injectAndMakeRed = () => {
+	const el = inject(ElementRef);
+	el.nativeElement.style.backgroundColor = "red";
+	el.nativeElement.style.color = "white";
+};
+
+@Directive({
+	selector: "[red]",
+	standalone: true,
+})
+class RedDirective {
+	_el = injectAndMakeRed();
+}
+
+@Component({
+	selector: "app-root",
+	standalone: true,
+	imports: [RedDirective],
+	template: ` <p red>This is red</p> `,
+})
+class AppComponent {}
+
+bootstrapApplication(AppComponent);