poll entry removal works

src/app/components/create-status/poll-editor/poll-editor.component.html

@@ -1,6 +1,6 @@
 <div class="poll-editor">
     <div *ngFor="let e of entries">
-        <app-poll-entry class="poll-editor__entry" [entry]="e"></app-poll-entry>
+        <app-poll-entry class="poll-editor__entry" [entry]="e" (removeEvent)="removeElement(e)"></app-poll-entry>
     </div>
 
     <div class="poll-editor__footer">

src/app/components/create-status/poll-editor/poll-editor.component.ts

@@ -9,13 +9,14 @@ import { PollEntry } from './poll-entry/poll-entry.component';
 })
 export class PollEditorComponent implements OnInit {
 
+    private entryUuid: number = 0;
     entries: PollEntry[] = [];
     delayChoice: Delay[] = [];
     selectedId: string;
 
     constructor() {
-        this.entries.push(new PollEntry());
-        this.entries.push(new PollEntry());
+        this.entries.push(new PollEntry(this.getEntryUuid()));
+        this.entries.push(new PollEntry(this.getEntryUuid()));
 
         this.delayChoice.push(new Delay(60 * 5, "5 minutes"));
         this.delayChoice.push(new Delay(60 * 30, "30 minutes"));
@@ -34,10 +35,19 @@ export class PollEditorComponent implements OnInit {
 
     }
 
+    private getEntryUuid(): number {
+        this.entryUuid++;
+        return this.entryUuid;
+    }
+
     addEntry(): boolean {
-        this.entries.push(new PollEntry());
+        this.entries.push(new PollEntry(this.getEntryUuid()));
         return false;
     }
+
+    removeElement(entry: PollEntry){
+        this.entries = this.entries.filter(x => x.id != entry.id);
+    }
 }
 
 class Delay {

src/app/components/create-status/poll-editor/poll-entry/poll-entry.component.html

@@ -1,3 +1,16 @@
-<p>
-  poll-entry works!
-</p>
+<div class="poll-entry">
+    <div class="poll-entry__multi">
+        <a href (click)="toogleMulti()" class="poll-entry__multi--link">
+
+        </a>
+    </div>
+    <div class="poll-entry__label">
+        <input type="text" [(ngModel)]="entry.label" />
+    </div>
+
+    <div class="poll-entry__remove">
+        <a href (click)="remove()" title="remove">
+            <fa-icon [icon]="faTimes"></fa-icon>
+        </a>
+    </div>
+</div>

src/app/components/create-status/poll-editor/poll-entry/poll-entry.component.scss

@@ -0,0 +1,19 @@
+.poll-entry {
+
+    &__multi {
+        &--link {
+            display: block;
+            width: 20px;
+            height: 20px;
+            outline: 1px solid greenyellow;
+        }
+    }
+
+    &__label {
+
+    }
+
+    &__remove {
+
+    }
+}

src/app/components/create-status/poll-editor/poll-entry/poll-entry.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
 
 @Component({
     selector: 'app-poll-entry',
@@ -6,21 +7,34 @@ import { Component, OnInit, Input } from '@angular/core';
     styleUrls: ['./poll-entry.component.scss']
 })
 export class PollEntryComponent implements OnInit {
+    faTimes = faTimes;
+
     @Input() entry: PollEntry;
 
+    @Output() removeEvent = new EventEmitter();
+    @Output() toogleMultiEvent = new EventEmitter();
+
     constructor() { }
 
     ngOnInit() {
     }
 
     remove(): boolean { 
-        
+        this.removeEvent.next();
+        return false;
+    }
+
+    toogleMulti(): boolean {
+        this.toogleMultiEvent.next();
         return false;
     }
 
 }
 
 export class PollEntry {
+    constructor(public id: number) {        
+    }
+
     public isMulti: boolean;
-    public entry: string;
+    public label: string;
 }