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