Add github service

Author: irustm

src/app/app.component.html

@@ -5,17 +5,22 @@
       [src]="'C:/temp/angular.png'"
       [aspectRatioMode]="aspectRatioMode"
     ></image>
-    <text [style.font-size.px]="45">Hello, {{ name }}</text>
-    <checkbox [checked]="true"></checkbox>
-    <checkbox [checked]="true" [enabled]="false"></checkbox>
-    <button [style.background-color]="'green'" (clicked)="setName()">
-      Green button
-    </button>
+
+    <app-hello [name]="name"></app-hello>
+
+    <text>Github name</text>
     <linedit
       [text]="name"
-      [placeholderText]="'Insert your name'"
+      [placeholderText]="'Insert github username'"
       (textChanged)="textChanged($event)"
     ></linedit>
+
+    <!-- <checkbox [checked]="true"></checkbox>
+    <checkbox [checked]="true" [enabled]="false"></checkbox>
+    <button [style.background-color]="'green'" (clicked)="setName()">
+      Green button
+    </button>
+
     <progressbar [value]="40" [minimum]="0" [maximum]="100"></progressbar>
     <spinbox
       [prefix]="'aa'"
@@ -24,7 +29,6 @@
       [range]="{ minimum: 0, maximum: 50 }"
       [value]="20"
     >
-    </spinbox>
-    <app-hello [name]="'irustm'"></app-hello>
+    </spinbox> -->
   </view>
 </window>

src/app/app.component.ts

@@ -8,7 +8,7 @@ import { AspectRatioMode } from '@nodegui/nodegui';
   encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
-  public name = 'World!';
+  public name = 'irustm';
   public aspectRatioMode = AspectRatioMode.KeepAspectRatio;
 
   setName() {

src/app/hello/hello.component.html

@@ -1,3 +1,3 @@
 <view>
-  <text>{{ userName }}</text>
+  <text [style.font-size.px]="45">Hello, {{ name }}</text>
 </view>

src/app/hello/hello.component.ts

@@ -15,20 +15,26 @@ import { Subscription } from 'rxjs';
   encapsulation: ViewEncapsulation.None
 })
 export class HelloComponent implements OnInit, OnDestroy {
-  @Input() name;
+  @Input() set name(value) {
+    this.getUsername(value);
+  }
 
   public userName: string;
 
   private subscribtion: Subscription;
 
   constructor(private github: GithubService) {}
 
-  ngOnInit(): void {
-    this.subscribtion = this.github
-      .getUser(this.name)
-      .subscribe((data: any) => {
-        this.userName = data.name;
-      });
+  ngOnInit(): void {}
+
+  private getUsername(username: string) {
+    if (this.subscribtion) {
+      this.subscribtion.unsubscribe();
+    }
+
+    this.subscribtion = this.github.getUser(username).subscribe((data: any) => {
+      this.userName = data.name;
+    });
   }
 
   ngOnDestroy(): void {