Add router insertBefore and remove widget closes #3

Author: irustm

.gitignore

@@ -47,3 +47,4 @@ Thumbs.db
 
 
 /deploy
+/.vscode

projects/angular-nodegui/src/lib/components/view.ts

@@ -11,23 +11,27 @@ export class NgView extends QWidget implements NgComponent {
       return;
     }
     if (!this.layout) {
-      const flexLayout = new FlexLayout();
-      flexLayout.setFlexNode(this.getFlexNode());
-      this.setLayout(flexLayout);
-      this.layout = flexLayout;
+      this.createLayout();
     }
 
     this.layout.addWidget(newChild);
   }
 
   public insertBefore(newChild: any, refChild: any) {
-    if (!this.layout) {
-      console.warn('parent has no layout to insert child before another child');
+    if (!newChild) {
       return;
     }
+    if (!this.layout) {
+      this.createLayout();
+    }
     (this.layout as FlexLayout).insertChildBefore(newChild, this);
   }
 
+  removeChild(oldChild: NgView): void {
+    oldChild.hide(); // it's necessary that there's no overlapping of widgets when removing
+    (this.layout as FlexLayout).removeWidget(oldChild);
+  }
+
   public setNgAttribute(
     name: string,
     value: string,
@@ -62,13 +66,18 @@ export class NgView extends QWidget implements NgComponent {
   removeAttribute(name: string, namespace?: string): void {
     throw new Error('Method not implemented.');
   }
-  removeChild(oldChild: any): void {
-    throw new Error('Method not implemented.');
-  }
+
   removeClass(name: string): void {
     throw new Error('Method not implemented.');
   }
   removeStyle(style: string, flags?: RendererStyleFlags2): void {
     throw new Error('Method not implemented.');
   }
+
+  private createLayout() {
+    const flexLayout = new FlexLayout();
+    flexLayout.setFlexNode(this.getFlexNode());
+    this.setLayout(flexLayout);
+    this.layout = flexLayout;
+  }
 }

projects/angular-nodegui/src/lib/renderer.ts

@@ -13,6 +13,11 @@ import { ComponentsMap, NgComponentClass } from './components/components-map';
 import { TextField } from './components/nodes';
 import { NgView } from './components/view';
 
+export interface ElementReference {
+  previous: NgView;
+  next: NgView;
+}
+
 @Injectable()
 export class NodeguiRendererFactory implements RendererFactory2 {
   protected renderer: Renderer2;
@@ -87,12 +92,17 @@ export class NodeguiRenderer implements Renderer2 {
 
   destroy(): void {}
 
-  insertBefore(parent: NgComponent, newChild: any, refChild: any): void {
-    // TODO: insert before for router-outlet
-    console.log('insertBefore');
-    console.log(parent, newChild, refChild);
+  insertBefore(
+    parent: NgComponent,
+    newChild: any,
+    { previous, next }: ElementReference
+  ): void {
+    newChild.parent = previous;
+    previous.insertBefore(newChild, next);
+  }
 
-    parent.insertBefore(newChild, refChild);
+  removeChild(parent: NgComponent, oldChild: NgView): void {
+    parent.removeChild(oldChild);
   }
 
   listen(
@@ -107,11 +117,16 @@ export class NodeguiRenderer implements Renderer2 {
     return () => target.removeEventListener(eventName, callbackFunc);
   }
 
-  nextSibling(node: any): any {
-    console.log('nextSibling');
+  nextSibling(node: any): ElementReference {
+    return {
+      previous: node,
+      next: node.nextSibling
+    };
   }
 
-  parentNode(node: any): any {}
+  parentNode(node: any): any {
+    return node.parent ? node.parent : node;
+  }
 
   removeAttribute(
     el: NgComponent,
@@ -121,10 +136,6 @@ export class NodeguiRenderer implements Renderer2 {
     el.removeAttribute(name, namespace);
   }
 
-  removeChild(parent: NgComponent, oldChild: any): void {
-    parent.removeChild(oldChild);
-  }
-
   removeClass(el: NgComponent, name: string): void {
     el.removeClass(name);
   }

src/app/about/about.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  template: `
+    <text>
+      about works!
+    </text>
+  `,
+  styles: [],
+  encapsulation: ViewEncapsulation.None
+})
+export class AboutComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/app.component.html

@@ -2,13 +2,19 @@
   <view id="app">
     <image id="image" [src]="'./src/assets/angular.png'" [aspectRatioMode]="aspectRatioMode"></image>
 
-    <!-- <app-hello [name]="name"></app-hello> -->
+    <app-hello [name]="name"></app-hello>
 
     <text>Github username</text>
     <linedit [text]="name" [placeholderText]="'Insert github username'" (textChanged)="textChanged($event)"></linedit>
 
-    <button (clicked)="setRoute()">
-      to home route
+    <button (clicked)="goToPage('/')">
+      first page
+    </button>
+    <button (clicked)="goToPage('/home')">
+      home page
+    </button>
+    <button (clicked)="goToPage('/about')">
+      about page
     </button>
     <!-- <checkbox [checked]="true"></checkbox>
     <checkbox [checked]="true" [enabled]="false"></checkbox>

src/app/app.component.ts

@@ -30,8 +30,8 @@ export class AppComponent implements OnInit {
     win.setMinimumSize(480, 620);
   }
 
-  setRoute() {
-    this.router.navigateByUrl('/hello');
+  goToPage(url: string) {
+    this.router.navigateByUrl(url);
   }
 
   textChanged(val: string) {

src/app/app.module.ts

@@ -7,11 +7,16 @@ import { AppComponent } from './app.component';
 import { HelloComponent } from './hello/hello.component';
 import { GithubService } from './github.service';
 import { NodeguiRouterModule } from '../../projects/angular-nodegui/src/lib/router/router.module';
+import { HomeComponent } from './home/home.component';
+import { AboutComponent } from './about/about.component';
 
-const appRoutes: Routes = [{ path: 'hello', component: HelloComponent }];
+const appRoutes: Routes = [
+  { path: 'home', component: HomeComponent },
+  { path: 'about', component: AboutComponent }
+];
 
 @NgModule({
-  declarations: [AppComponent, HelloComponent],
+  declarations: [AppComponent, HelloComponent, HomeComponent, AboutComponent],
   imports: [
     NodeguiLibModule,
     HttpClientModule,

src/app/home/home.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  template: `
+    <text>
+      home works!
+    </text>
+  `,
+  styles: [],
+  encapsulation: ViewEncapsulation.None
+})
+export class HomeComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}