Ember "Context" Example

content/4-component-composition/5-context/ember/app.hbs

@@ -0,0 +1 @@
+<UserProfile />

content/4-component-composition/5-context/ember/user-profile.hbs

@@ -0,0 +1,8 @@
+<div>
+  <h2>My Profile</h2>
+  <p>Username: {{this.user.username}}</p>
+  <p>Email: {{this.user.email}}</p>
+  <button {{on "click" (fn this.userService.updateUserName "Jane")}}>
+    Update username to Jane
+  </button>
+</div>

content/4-component-composition/5-context/ember/user-profile.js

@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+
+export default class UserProfileComponent extends Component {
+  @service userService;
+
+  get user() {
+    return this.userService.user;
+  }
+}

content/4-component-composition/5-context/ember/user-service.js

@@ -0,0 +1,22 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class UserServiceService extends Service {
+  @tracked id = 1;
+  @tracked username = 'unicorn42';
+  @tracked email = '[email protected]';
+
+  get user() {
+    return {
+      id: this.id,
+      username: this.username,
+      email: this.email,
+    };
+  }
+
+  @action
+  updateUserName(newUsername) {
+    this.username = newUsername;
+  }
+}