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 @@
+
+
Welcome back, {{ user.username }}
+
+
+
+
+
+
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: `
+
+
My Profile
+
Username: {{ user.username }}
+
Email: {{ user.email }}
+
+
+ `,
+})
+export default class MyUserProfileComponent {
+ @Input() user;
+ @Input() updateUsername;
+}