Added Context snippet for Angular

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>

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: "[email protected]",
+  };
+  public updateUsername = (name) => {
+    this.user.username = name;
+  };
+}

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;
+}