feat setup and basic teams preview

web/src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { TeamsComponent } from './teams/teams.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path: 'teams', component: TeamsComponent}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

web/src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'web';
+  title = 'Ice Hockey Manager';
 }

web/src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { TeamsComponent } from './teams/teams.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    TeamsComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

web/src/app/models/team.ts

+export interface Team {
+    id: number;
+    name: string;
+}
\ No newline at end of file

web/src/app/teams/teams.component.css

+
+.teams {
+    margin: 0 0 2em 0;
+    list-style-type: none;
+    padding: 0;
+    width: 15em;
+  }
+  .teams li {
+    cursor: pointer;
+    position: relative;
+    left: 0;
+    background-color: #EEE;
+    margin: .5em;
+    padding: .3em 0;
+    height: 1.6em;
+    border-radius: 4px;
+  }
+  .teams li:hover {
+    color: #2c3a41;
+    background-color: #e6e6e6;
+    left: .1em;
+  }
+  .teams li.selected {
+    background-color: black;
+    color: white;
+  }
+  .teams li.selected:hover {
+    background-color: #505050;
+    color: white;
+  }
+  .teams li.selected:active {
+    background-color: black;
+    color: white;
+  }
+  .teams .badge {
+    display: inline-block;
+    font-size: small;
+    color: white;
+    padding: 0.8em 0.7em 0 0.7em;
+    background-color:#405061;
+    line-height: 1em;
+    position: relative;
+    left: -1px;
+    top: -4px;
+    height: 1.8em;
+    margin-right: .8em;
+    border-radius: 4px 0 0 4px;
+  }
+  
+  input {
+    padding: .5rem;
+  }

web/src/app/teams/teams.component.html

+<h2>Teams</h2>
+<ul class="teams">
+  <li *ngFor="let team of teams"
+    [class.selected]="team === selectedTeam"
+    (click)="onSelect(team)">
+    <span class="badge">{{team.id}}</span> {{team.name}}
+  </li>
+</ul>
+
+<div *ngIf="selectedTeam">
+
+  <h2>{{selectedTeam.name | uppercase}} Details</h2>
+  <div><span>id: </span>{{selectedTeam.id}}</div>
+  <div>
+    <label for="team-name">Team name: </label>
+    <input id="team-name" [(ngModel)]="selectedTeam.name" placeholder="name">
+  </div>
+
+</div>

web/src/app/teams/teams.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TeamsComponent } from './teams.component';
+
+describe('TeamsComponent', () => {
+  let component: TeamsComponent;
+  let fixture: ComponentFixture<TeamsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TeamsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TeamsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/teams/teams.component.ts

+import { Component, OnInit } from '@angular/core';
+
+import { Team } from '../models/team'
+
+@Component({
+  selector: 'app-teams',
+  templateUrl: './teams.component.html',
+  styleUrls: ['./teams.component.css']
+})
+export class TeamsComponent implements OnInit {
+
+  teams : Team[] = [
+    {id: 1, name: 'Toronto Maple Leafs'},
+    {id: 2, name: 'Boston Bruins'}
+  ];
+  selectedTeam?: Team;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onSelect(team: Team): void {
+    this.selectedTeam = team;
+  }
+}