Super Duper Reddit Clone

<!DOCTYPE html>

<html>
  <head>
    <script src="./lib/main.ts"></script>
  </head>

  <body>
    <my-app>
      loading...
    </my-app>
  </body>
</html>

{
  "name": "@plnkr/starter-angular",
  "version": "1.0.3",
  "description": "Angular starter template",
  "dependencies": {
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "core-js": "2.6.11",
    "rxjs": "6.5.4",
    "zone.js": "0.10.2"
  },
  "main": "./lib/main.ts",
  "plnkr": {
    "runtime": "system",
    "useHotReload": true
  }
}

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

interface IPosts {
  title : string;
  body : string;
  postedAt : Date | string;
  createdBy : string;
  numberOfVotes : number;
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button (click)="newPost()">Generate new post</button>
      <button (click)="deletePost()">Delete most recent post</button>
      <h2>Hello {{name}}</h2>
      <h4>Welcome to Dreddit!</h4>
      <ul *ngFor="let post of posts;let i = index">
        <li>{{i+1}}.
        Votes : <strong>{{post.numberOfVotes}}</strong>
        {{post.title}}<br>
        <button (click)="vote(i, 'up')">Vote Up</button>
        <button (click)="vote(i, 'down')">Vote Down</button>
        <button (click)="updatePost(i)">Update Post</button>
        <h1 *ngIf="post.numberOfVotes<0">USER WAS BANNED FOR THIS POST</h1>
        </li>
      </ul>
    </div>
  `,
})
export class App {
  name:string;
  posts : IPosts[] = [];
  constructor() {
   this.posts.push({
     title: "My First Dreddit Post",
     body : "This is the body text of my first Dreddit post",
     postedAt : new Date(),
     createdBy : "Arswaw",
     numberOfVotes : 3
   });
   this.name = `Angular! v${VERSION.full}`
  }
  newPost() : void {
    this.posts.push({
      title: `Another Dreddit post with number ${Math.random()}`,
      body : 'Another Dreddit post body with number ${Math.random()}',
      postedAt : new Date().toDateString(),
      createdBy : "Somebody",
      numberOfVotes : 0
    })
  }
  deletePost() : void {
    this.posts.pop()
  }
  updatePost(index : number) : void {
    this.posts[index].title = `Another Dreddit post with number ${Math.random()} that has been updated`;
  }
  vote(index : number, action : string) {
    action === "up" ? this.posts[index].numberOfVotes++ : this.posts[index].numberOfVotes--;
    this.posts.sort(function(a, b) {
    return b.numberOfVotes - a.numberOfVotes;
});
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

/* Styles go here */
body {
  margin: 5%;
  background-color: white;

}

ul {
  list-style-type: none;
}

li {
  border: 3px dotted red;
  padding: 15px;
}

button {
  margin-top: 2%;
  border-radius: 10px;
  background-color: white;
  padding: 5px;
}

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}