added checkbox

src/app/app.module.ts

@@ -38,6 +38,8 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatCardModule} from '@angular/material/card';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatSelectModule} from '@angular/material/select';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MainNavigationComponent } from './components/main-navigation/main-navigation.component';
@@ -104,7 +106,9 @@ const appRoutes: Routes = [
     MatButtonModule,
     MatListModule,
     MatCardModule,
-    MatButtonToggleModule
+    MatButtonToggleModule,
+    MatSelectModule,
+    MatCheckboxModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/feed/feed.component.html

@@ -4,17 +4,29 @@
   <button id="submit" type='submit' (click)=createPost(content)><span><i class="fa fa-send-o fa-2x" aria-hidden="true"></i></span></button>
 </div>-->
 <div id="home">
-<mat-card style="text-align: center;">      
+<mat-card >      
   <mat-card-content>
   <mat-form-field id="input">
     <textarea matInput #content type="text" mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
     <button mat-button matSuffix mat-icon-button (click)="value=''">
       <mat-icon>add</mat-icon>
     </button>
-    <button mat-button matSuffix mat-icon-button (click)=createPost(content)>
-      <mat-icon>send</mat-icon>
-    </button>
   </mat-form-field>
+  <p id="check">
+    <mat-checkbox color="primary" [(ngModel)]="checked">I protected the environment.</mat-checkbox>
+  </p>
+  <mat-form-field id="action-chooser" *ngIf="checked">
+    <mat-label>Did you support the environment?</mat-label>
+    <mat-select [(ngModel)]="selectedValue" name="action">
+      <mat-option>the next time ;)</mat-option>
+      <mat-option *ngFor="let action of actionlist.actions" [value]="action.points">
+        {{action.name}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <button mat-raised-button color="primary" id="post-button" (click)=createPost(content)>
+    POST
+  </button>
 </mat-card-content>
 </mat-card>
 <div id="chooser-div" style="text-align: center; margin-top: 1em;">

src/app/components/feed/feed.component.sass

@@ -15,9 +15,23 @@
     width: 100%
 
 #input
-    box-sizing: border-box
     width: 100%
     padding-left: 0.5em
     padding-right: 0.5em
 
+#action-chooser
+    width: 100%
+    padding-left: 0.5em
+    padding-right: 0.5em
+
+#check
+    margin: 0
+    padding-left: 0.5em
+
+#post-button
+    width: 100%
+    padding-left: 0.5em
+    padding-right: 0.5em
+    margin-top: 0.5em
+
 

src/app/components/feed/feed.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Post } from 'src/app/models/post';
 import { FeedService } from 'src/app/services/feed/feed.service';
+import { Actionlist } from 'src/app/models/actionlist';
 
 @Component({
   selector: 'home-feed',
@@ -17,6 +18,8 @@ export class FeedComponent implements OnInit {
 
   parentSelectedPostList: Array<Post>
 
+  actionlist: Actionlist = new Actionlist();
+
   constructor(private feedService: FeedService) { }
 
   ngOnInit() {

src/app/models/actionlist.ts

@@ -9,7 +9,7 @@ export class Actionlist{
       { id: 6, name: "reduce CO2 emission", points: 5 },
       { id: 7, name: "eat a vegetarian meal", points: 2 },
       { id: 8, name: "don't use the car", points: 10 },
-      { id: 9, name: "buy a fair trade/ local product", points: 1 },
+      { id: 9, name: "buy a fair trade / local product", points: 1 },
       { id: 10, name: "donate money to an environment organisation ", points: 10 },
     ];
 }