<!doctype html>


  <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>


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

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

    imports: [BrowserModule, ReactiveFormsModule ],
    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';

p {
    font-family: sans-serif;
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

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

  selector: 'book-movie',
  template: `<div class="container">
  <div *ngIf="!submitted">
    <h1>Book a movie</h1>
    <form (ngSubmit)="onSubmit(bookMovieForm)" [formGroup]="bookMovieForm">
      <div class="form-group">
        <label for="uName">User Name</label>
        <input type="text" class="form-control" formControlName="uName">
        <div class="alert alert-danger" [hidden]="bookMovieForm.controls.uName.valid">User name is required</div>
      <div class="form-group">
        <label for="name">Choose a movie</label>
        <select class="form-control" formControlName="name">
          <option *ngFor="let m of movies" [value]="m">{{ m }}</option>
      <div class="form-group">
        <label for="cinemaHall">Choose cinema hall</label>
        <select class="form-control" formControlName="cinemaHall">
          <option *ngFor="let c of cinemaHalls" [value]="c">{{ c }}</option>
      <div class="form-group">
        <label for="timing">Movie Timing</label>
        <select class="form-control" formControlName="timing">
          <option *ngFor="let mt of movieTimings" [value]="mt">{{ mt }}</option>
      <button type="submit" class="btn btn-default" [disabled]="!bookMovieForm.valid">Submit</button>
  <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">{{ submittedModel.uName }}</div>
    <div class="row">
      <div class="col-4">Cinema Hall : </div>
      <div class="col-8 pull-left">{{ submittedModel.cinemaHall }}</div>
    <div class="row">
      <div class="col-4">Movie Name : </div>
      <div class="col-8 pull-left">{{ submittedModel.name }}</div>
    <div class="row">
      <div class="col-4">Movie Timing : </div>
      <div class="col-8 pull-left">{{ submittedModel.timing }}</div>
    <br />
    <button class="btn btn-default" (click)="submitted=false">Edit</button>
export class BookMovieComponent implements OnInit {
  bookMovieForm: FormGroup;
  model: Movie; 
  submittedModel: Movie; 
  uName: string;
  movies: string[];
  cinemaHalls: string[];
  movieTimings: string[];
  submitted: boolean = false;
  constructor(private formBuilder: FormBuilder) { }
  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"];

      this.bookMovieForm = this.formBuilder.group({
        uName: [this.uName, Validators.required],
        name:     [this.model.name, Validators.required],
        cinemaHall: [this.model.cinemaHall , Validators.required],
        timing:    [this.model.timing, Validators.required]

  onSubmit({ value, valid }: { value: Movie, valid: boolean }) {
    this.submitted = true;
    this.submittedModel = value;
export class Movie {
    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