From 19fcb7534c7ca04aca44b832745860570f1e7069 Mon Sep 17 00:00:00 2001
From: Raghav Kanwal <raghav.kanwal@gmail.com>
Date: Sat, 29 Jul 2023 02:32:56 -0700
Subject: [PATCH] Added Context  snippet for Angular

---
 .../5-context/angular/app.component.html        | 13 +++++++++++++
 .../5-context/angular/app.component.ts          | 17 +++++++++++++++++
 .../5-context/angular/user-profile.component.ts | 17 +++++++++++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 content/4-component-composition/5-context/angular/app.component.html
 create mode 100644 content/4-component-composition/5-context/angular/app.component.ts
 create mode 100644 content/4-component-composition/5-context/angular/user-profile.component.ts

diff --git a/content/4-component-composition/5-context/angular/app.component.html b/content/4-component-composition/5-context/angular/app.component.html
new file mode 100644
index 00000000..e17bf574
--- /dev/null
+++ b/content/4-component-composition/5-context/angular/app.component.html
@@ -0,0 +1,13 @@
+<div>
+  <h1>Welcome back, {{ user.username }}</h1>
+  <ng-template
+    *ngTemplateOutlet="UserContext; context: { user: user, updateUsername }"
+  ></ng-template>
+</div>
+
+<ng-template #UserContext let-user="user">
+  <app-user-profile
+    [user]="user"
+    [updateUsername]="updateUsername"
+  ></app-user-profile>
+</ng-template>
diff --git a/content/4-component-composition/5-context/angular/app.component.ts b/content/4-component-composition/5-context/angular/app.component.ts
new file mode 100644
index 00000000..908e7e8d
--- /dev/null
+++ b/content/4-component-composition/5-context/angular/app.component.ts
@@ -0,0 +1,17 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"],
+})
+export class AppComponent {
+  public user = {
+    id: 1,
+    username: "unicorn42",
+    email: "unicorn42@example.com",
+  };
+  public updateUsername = (name) => {
+    this.user.username = name;
+  };
+}
diff --git a/content/4-component-composition/5-context/angular/user-profile.component.ts b/content/4-component-composition/5-context/angular/user-profile.component.ts
new file mode 100644
index 00000000..f0b9e847
--- /dev/null
+++ b/content/4-component-composition/5-context/angular/user-profile.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: "app-user-profile",
+  template: `
+    <div>
+      <h2>My Profile</h2>
+      <p>Username: {{ user.username }}</p>
+      <p>Email: {{ user.email }}</p>
+      <button (click)="updateUsername('Jane')">Update username to Jane</button>
+    </div>
+  `,
+})
+export default class MyUserProfileComponent {
+  @Input() user;
+  @Input() updateUsername;
+}