Angular : Template driven form

<!doctype html>

<html>

<head>
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="./lib/main.ts"></script>
</head>

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

</html>

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BookMovieComponent } from './bookMovie/bookMovie.component';

@Component({
    selector: 'my-app',
    template: `
        <div>
            <p>Angular : Template Driven Form</p>
            <book-movie></book-movie>
        </div>
    `,
})
export class App {
    name: string;
    constructor() {
        this.name = `Angular! v${VERSION.full}`;
    }
}

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

// 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);

h1,
p {
    font-family: sans-serif;
}

import { Component, OnInit } from '@angular/core';

//import { ShowError } from './showError.component';
import { Movie } from '../models/movie';

@Component({
  selector: 'book-movie',
  template: `<div class="container">
  <div *ngIf="!submitted">
    <h1>Book a movie</h1>
    <form (ngSubmit)="onSubmit()" #bookMovieForm="ngForm">
      <div class="form-group">
        <label for="userName">User Name</label>
        <input type="text" class="form-control" name="userName" #userName="ngModel" [(ngModel)]="uName" required>
        <div class="alert alert-danger" [hidden]="userName.valid">User name is required</div>
      </div>
      <div class="form-group">
        <label for="name">Choose a movie</label>
        <select class="form-control" name="name" #name="ngModel" [(ngModel)]="model.name" required>
          <option *ngFor="let m of movies" [value]="m">{{ m }}</option>
        </select>
      </div>
      <div class="form-group">
        <label for="cinemaHall">Choose cinema hall</label>
        <select class="form-control" name="cinemaHall" #cinemaHall="ngModel" [(ngModel)]="model.cinemaHall" required>
          <option *ngFor="let c of cinemaHalls" [value]="c">{{ c }}</option>
        </select>
      </div>
      <div class="form-group">
        <label for="timing">Movie Timing</label>
        <select class="form-control" name="timing" #timing="ngModel" [(ngModel)]="model.timing" required>
          <option *ngFor="let mt of movieTimings" [value]="mt">{{ mt }}</option>
        </select>
      </div>
      <button type="submit" class="btn btn-default" [disabled]="!bookMovieForm.valid">Submit</button>
    </form>
  </div>
  <div *ngIf="submitted">
    <h2>Here is your e-ticket:</h2>
    <div class="row">
      <div class="col-4">User Name : </div>
      <div class="col-8 pull-left">{{ uName }}</div>
    </div>
    <div class="row">
      <div class="col-4">Cinema Hall : </div>
      <div class="col-8 pull-left">{{ model.cinemaHall }}</div>
    </div>
    <div class="row">
      <div class="col-4">Movie Name : </div>
      <div class="col-8 pull-left">{{ model.name }}</div>
    </div>
    <div class="row">
      <div class="col-4">Movie Timing : </div>
      <div class="col-8 pull-left">{{ model.timing }}</div>
    </div>
    <br />
    <button class="btn btn-default" (click)="submitted=false">Edit</button>
  </div>
</div>`
})
export class BookMovieComponent implements OnInit {
  model: Movie;  
  uName: string;
  movies: string[];
  cinemaHalls: string[];
  movieTimings: string[];
  submitted: boolean = false;
  
  constructor() { }
  
  ngOnInit() {
      this.uName = "";
      this.model = new Movie("Titanic", "Classic Cinemas", "21:30");
      this.movies = ["Titanic", "Ice Age 3", "Jumanji"];
      this.cinemaHalls = ["Classic Cinemas", "NY Studios", "Mega Screens"];
      this.movieTimings = ["10:10", "13:40", "5:25", "21:30"];
  }

  onSubmit() {
    this.submitted = true;
  }
}

export class Movie {
  constructor(
    public name: string,
    public cinemaHall: string,
    public timing: string) {
    
  }
}

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.3",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^7.0.0-rc.0",
        "@angular/compiler": "^7.0.0-rc.0",
        "@angular/core": "^7.0.0-rc.0",
        "@angular/platform-browser": "^7.0.0-rc.0",
        "@angular/platform-browser-dynamic": "^7.0.0-rc.0",
        "@angular/forms": "^7.0.0-rc.0",
        "core-js": "^2.5.5",
        "rxjs": "^6.1.0",
        "zone.js": "^0.8.26"
    },
    "main": "./lib/main.ts",
    "plnkr": {
        "runtime": "system",
        "useHotReload": true
    }
}

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}