Solution: Moving a view between containers inside child components

maksym.koretskyi · maksym.koretskyi · commit e4f8475ec9c5 · 2018-05-24T10:20:16.000+03:00
diff --git a/index.html b/index.html
@@ -20,4 +20,5 @@
 <body>
 <my-app>Loading AppComponent content here ...</my-app>
 </body>
+
 </html>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,12 +1,54 @@
-import { Component } from '@angular/core';
+import {
+    AfterViewInit,
+    Component,
+    EmbeddedViewRef,
+    OnInit,
+    QueryList,
+    TemplateRef,
+    ViewChild,
+    ViewChildren
+} from '@angular/core';
+import { TodoListComponent } from './todo-list.component';
 
 @Component({
     selector: 'my-app',
     template: `
-        <h1>{{name}}</h1>
-        <to-do-list></to-do-list>
-    `
+        <div class="top">
+            <div>All tasks</div>
+            <to-do-list></to-do-list>
+        </div>
+        <div class="bottom">
+            <div>Completed tasks</div>
+            <to-do-list></to-do-list>
+        </div>
+        <ng-template #tpl>
+            <span>I am a task</span>
+        </ng-template>
+        <button (click)="move()">move</button>
+    `,
+    styles: ['.top, .bottom {border: 1px solid black; padding: 10px; margin: 10px 0; height: 30px; width: 500px; }']
 })
-export class AppComponent {
-    name = 'Angular Flow Homework';
+export class AppComponent implements AfterViewInit {
+    @ViewChildren(TodoListComponent) comps: QueryList<TodoListComponent>;
+    @ViewChild('tpl') tpl: TemplateRef<null>;
+    embeddedView: EmbeddedViewRef<null>;
+    isTop: boolean = true;
+
+    ngAfterViewInit() {
+        this.embeddedView = this.tpl.createEmbeddedView(null);
+        this.comps.first.addItem(this.embeddedView);
+        this.isTop = true;
+    }
+
+    move() {
+        if (!this.isTop) {
+            this.comps.last.removeItem(0);
+            this.comps.first.addItem(this.embeddedView);
+            this.isTop = true;
+        } else {
+            this.comps.first.removeItem(0);
+            this.comps.last.addItem(this.embeddedView);
+            this.isTop = false;
+        }
+    }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,12 +1,11 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
-import { TodoItemComponent } from './todo-item';
 import { TodoListComponent } from './todo-list.component';
 
 @NgModule({
     imports: [BrowserModule],
-    declarations: [AppComponent, TodoListComponent, TodoItemComponent],
+    declarations: [AppComponent, TodoListComponent],
     bootstrap: [AppComponent]
 })
 export class AppModule {
diff --git a/src/app/todo-item.ts b/src/app/todo-item.ts
diff --git a/src/app/todo-list.component.ts b/src/app/todo-list.component.ts
@@ -1,11 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild, ViewContainerRef } from '@angular/core';
 
 @Component({
     selector: 'to-do-list',
     template: `
-        <h1>To-do list</h1>
-        <todo-item [item]="todoItem" (completed)="updateCompletedStatus($event)"></todo-item>
-    `
+        <ng-container #vc></ng-container>
+    `,
 })
 export class TodoListComponent {
+    @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;
+
+    addItem(v) {
+        this.vc.insert(v);
+    }
+
+    removeItem(index) {
+        return this.vc.detach(index);
+    }
 }
diff --git a/task.gif b/task.gif
diff --git a/task.md b/task.md
@@ -1,30 +1,13 @@
-Components input/output communication & ExpressionChangedAfterItHasBeenCheckedError
----------------------
-
-Steps
----------------------
-
-* Implement ToDoList component that contains one child componentn ToDoItem component.
-Here is a template of the component:
-```html
-<h1>To-do list</h1>
-<todo-item [item]="todoItem" (completed)="updateCompletedStatus($event)"></todo-item>
-```
-* Implement ToDoItem component that takes a to-do item as an input. It shows
-title and status of the to-do item that it takes. It also contains a checkbox
-to switch status of the to-do item.
-
-Here is a template of the component:
-```html
-<h4>Title: {{item.title}}</h4>
-<h4>Status: {{item.completed}}</h4>
-<label>
-    Completed
-    <input id="checkBox" type="checkbox" (change)="complete($event)">
-</label>
-```
-* ToDoItem component also has `completed` event that is listened to by
-the ToDoList component. Once it receives the notification, it udpates the status
-of the to-do item.
-
-* Add styles with borders and padding according to the task.jpg
+Moving a view between two containers inside child components
+------------------------------------------------------------
+
+* Implement the `ToDoListComponent` with one view container in the template.
+The component should have the `addItem` method that takes a view
+and adds it to a view container. And the `removeItem` method that detaches
+the view from a container and returns it.
+
+* Implement the `AppComponent` with the template `<span>I am a task</span>` and
+two wrapper divs for the `to-do-list` component. The `AppComponent` should create
+an embedded view from the template. It also should should query
+two child ToDoList components and using their API add/remove this view when
+a user clicks `Move` button. See `task.gif` for the demo.

-Original file line number
+Diff line change
 <body>
 <my-app>Loading AppComponent content here ...</my-app>
 </body>
++
 </html>