@igniteui/angular-templates 21.1.1492 → 21.1.1500-rc.0

package/igx-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+  IgxDateSummaryOperand,
+  IgxGridComponent,
+  IgxSummaryResult,
+  IgxColumnComponent,
+  IgxCellHeaderTemplateDirective,
+  IgxIconComponent,
+  IgxPaginatorComponent,
+} from '<%=igxPackage%>';
+import { Employee, employeesData } from './localData';
+
+@Component({
+  encapsulation: ViewEncapsulation.None,
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    IgxGridComponent,
+    IgxColumnComponent,
+    IgxCellHeaderTemplateDirective,
+    IgxIconComponent,
+    IgxPaginatorComponent,
+  ]
+})
+export class <%=ClassName%> implements OnInit {
+  @ViewChild('sampleGrid', { static: true, read: IgxGridComponent })
+  public sampleGrid!: IgxGridComponent;
+  public customDateSummary = CustomDateSummary;
+
+  public localData!: Employee[];
+  title = 'Grid Summaries';
+
+  ngOnInit(): void {
+    this.localData = employeesData;
+  }
+
+  public formatDate(value: Date): string {
+    return value.toLocaleDateString();
+  }
+
+  public toggleSummary(name: string): void {
+    if (this.sampleGrid.getColumnByName(name).hasSummary) {
+      this.sampleGrid.disableSummaries(name);
+    } else {
+      this.sampleGrid.enableSummaries(name);
+    }
+  }
+}
+
+class CustomDateSummary extends IgxDateSummaryOperand {
+  constructor() {
+    super();
+  }
+  public override operate(data?: Date[]): IgxSummaryResult[] {
+    const result: IgxSummaryResult[] = [];
+    if (!data) {
+        return result;
+    }
+    result.push({
+      key: 'earliest',
+      label: 'Earliest Date',
+      summaryResult: data.length ? (IgxDateSummaryOperand.earliest(data)).toLocaleDateString() : null
+    });
+    result.push({
+      key: 'latest',
+      label: 'Latest Date',
+      summaryResult: data.length ? (IgxDateSummaryOperand.latest(data)).toLocaleDateString() : null
+    });
+
+    return result;
+  }
+}

package/igx-ts/grid/multi-column-headers/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [NoopAnimationsModule, IgxGridModule, <%=ClassName%>]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/grid/multi-column-headers/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { Company, localData } from './localData';
+import { IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxPaginatorComponent } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxPaginatorComponent]
+})
+export class <%=ClassName%> implements OnInit {
+  public localData: Company[] = [];
+  title = '<%=name%>';
+
+  ngOnInit(): void {
+    this.localData = localData;
+  }
+}

package/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxHierarchicalGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [NoopAnimationsModule, IgxHierarchicalGridModule, <%=ClassName%>]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { ARTISTS, Artist } from './data';
+import { IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent]
+})
+export class <%=ClassName%> {
+  public localData: Artist[] = ARTISTS;
+}

package/igx-ts/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [
+	    NoopAnimationsModule,
+	    <%=ClassName%>
+	  ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,164 @@
+import { Component, ViewChild } from '@angular/core';
+import {
+  IgxDialogComponent,
+  IgxGridComponent,
+  IgxHierarchicalGridComponent,
+  IgxRowIslandComponent,
+  Transaction,
+  IgxButtonDirective,
+  IgxColumnComponent,
+  IgxCellTemplateDirective,
+  IgxGridToolbarDirective,
+  IgxGridToolbarComponent,
+  IgxInputGroupComponent,
+  IgxLabelDirective,
+  IgxInputDirective,
+  IgxCheckboxComponent,
+  GridType
+} from '<%=igxPackage%>';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { SINGERS } from './data';
+import { Singer } from './singer';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    IgxButtonDirective,
+    IgxHierarchicalGridComponent,
+    IgxColumnComponent,
+    IgxCellTemplateDirective,
+    IgxRowIslandComponent,
+    IgxGridToolbarDirective,
+    IgxGridToolbarComponent,
+    IgxDialogComponent,
+    IgxInputGroupComponent,
+    IgxLabelDirective,
+    ReactiveFormsModule,
+    IgxInputDirective,
+    FormsModule,
+    IgxCheckboxComponent,
+    IgxGridComponent
+  ]
+})
+export class <%=ClassName%> {
+  public get undoEnabledParent(): boolean {
+    return this.hierarchicalGrid.transactions.canUndo;
+  }
+
+  public get redoEnabledParent(): boolean {
+    return this.hierarchicalGrid.transactions.canRedo;
+  }
+
+  public get hasTransactions(): boolean {
+    return this.hierarchicalGrid.transactions.getAggregatedChanges(false).length > 0 || this.hasChildTransactions;
+  }
+
+  public get hasChildTransactions(): boolean {
+    return this.layout1.gridAPI.getChildGrids()
+      .find(c => c.transactions.getAggregatedChanges(false).length > 0) !== undefined;
+  }
+
+  public localdata: Singer[] = SINGERS;
+  public transactionsDataAll: Transaction[] = [];
+  private id = 14;
+  public singer: Singer = {
+    ID: this.id,
+    Artist: 'Mock Jagger',
+    Debut: 2005,
+    GrammyAwards: 4,
+    GrammyNominations: 7,
+    HasGrammyAward: false
+  };
+
+  @ViewChild('dialogChanges', { read: IgxDialogComponent, static: true })
+  public dialogChanges!: IgxDialogComponent;
+
+  @ViewChild('dialogGrid', { read: IgxGridComponent, static: true })
+  public dialogGrid!: IgxGridComponent;
+
+  @ViewChild('layout1', { static: true })
+  private layout1!: IgxRowIslandComponent;
+
+  @ViewChild('hierarchicalGrid', { static: true })
+  private hierarchicalGrid!: IgxHierarchicalGridComponent;
+
+  @ViewChild('dialogAddSinger', { read: IgxDialogComponent, static: true })
+  private dialogSinger!: IgxDialogComponent;
+
+  public formatter = (a: number): number => a;
+
+  public undo(grid: GridType): void {
+    /* exit edit mode */
+    grid.crudService.endEdit(/* commit the edit transaction */ false);
+    grid.transactions.undo();
+  }
+
+  public redo(grid: any): void {
+    grid.transactions.redo();
+  }
+
+  public commit(): void {
+    this.hierarchicalGrid.transactions.commit(this.localdata);
+    this.layout1.gridAPI.getChildGrids().forEach((grid) => {
+      grid.transactions.commit(grid.data as any[]);
+    });
+    this.dialogChanges.close();
+  }
+
+  public discard(): void {
+    this.hierarchicalGrid.transactions.clear();
+    this.layout1.gridAPI.getChildGrids().forEach((grid) => {
+      grid.transactions.clear();
+    });
+    this.dialogChanges.close();
+  }
+
+  public openCommitDialog(): void {
+    this.transactionsDataAll = [...this.hierarchicalGrid.transactions.getAggregatedChanges(true)];
+    this.layout1.gridAPI.getChildGrids().forEach((grid) => {
+      this.transactionsDataAll = this.transactionsDataAll.concat(grid.transactions.getAggregatedChanges(true));
+    });
+    this.dialogChanges.open();
+    this.dialogGrid.reflow();
+  }
+
+  public addSinger(): void {
+    this.hierarchicalGrid.addRow(this.singer);
+    ++this.id;
+    this.cancel();
+  }
+
+  public removeRow(rowIndex: number): void {
+    const row = this.hierarchicalGrid.getRowByIndex(rowIndex);
+    if (row && row.delete) {
+      row.delete();
+    }
+  }
+
+  public stateFormatter(value: string): string {
+    return JSON.stringify(value);
+  }
+
+  public typeFormatter(value: string): string {
+    return value.toUpperCase();
+  }
+
+  public classFromType(type: string): string {
+    return `transaction--${type.toLowerCase()}`;
+  }
+
+  public cancel(): void {
+    this.dialogChanges.close();
+    this.dialogSinger.close();
+    this.singer = {
+      ID: this.id,
+      Artist: 'Mock Jagger',
+      Debut: 2005,
+      GrammyAwards: 4,
+      GrammyNominations: 7,
+      HasGrammyAward: false
+    };
+  }
+}

package/igx-ts/hierarchical-grid/hierarchical-grid-custom/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxHierarchicalGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ NoopAnimationsModule, IgxHierarchicalGridModule, <%=ClassName%> ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/hierarchical-grid/hierarchical-grid-custom/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { ColumnType } from '<%=igxPackage%>';
+import { ARTISTS, Artist } from './data';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss'
+})
+export class <%=ClassName%> {
+  public localData: Artist[] = ARTISTS;
+
+  public toggleColumn(col: ColumnType, event: MouseEvent): void {
+    if (col.pinned) {
+      col.unpin();
+    } else {
+      col.pin();
+    }
+    event.stopPropagation();
+  }
+}

package/igx-ts/hierarchical-grid/hierarchical-grid-summaries/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxHierarchicalGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [NoopAnimationsModule, IgxHierarchicalGridModule, <%=ClassName%>]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/hierarchical-grid/hierarchical-grid-summaries/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { ARTISTS, Artist } from './data';
+import { CustomSummary } from './custom-summary';
+import { IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent]
+})
+export class <%=ClassName%> {
+  public localData: Artist[] = ARTISTS;
+  public customSummary = CustomSummary;
+}

package/igx-ts/input-group/default/files/src/app/__path__/__filePrefix__.html

@@ -0,0 +1,101 @@
+<div class="description-container">
+  <p>Form view with <b>igx-input-group</b>, <b>igx-select</b> and <b>igx-combo</b> that allows to book a movie ticket.
+    You can read more about configuring those components, using the following links:
+    <b>igx-input-group</b> -
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/input-group/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/input-group"
+      target="_blank">official documentation</a>,
+    <b>igx-select</b> -
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/select/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/select" target="_blank">official
+      documentation</a>,
+    <b>igx-combo</b> -
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo" target="_blank">official
+      documentation</a>.
+    <b>igx-date-picker</b> -
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-picker/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-picker"
+      target="_blank">official documentation</a>.
+    <b>igx-time-picker</b> -
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/time-picker/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/time-picker"
+      target="_blank">official documentation</a>.
+    <b>igx-date-range-picker</b> -
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-range-picker/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-range-picker"
+      target="_blank">official documentation</a>.
+  </p>
+</div>
+<div class="sample-wrapper">
+  <section class="sample-content">
+    <article class="sample-column">
+      <form class="input-group-form" [formGroup]="user" (ngSubmit)="onSubmit()">
+        <h4>Book your movie ticket</h4>
+        <div class="container">
+          <igx-select #select name="movies" formControlName="movie">
+            @for (genre of genres; track genre) {
+              <igx-select-item-group [label]="genre.type">
+                @for (movie of genre.movies; track movie) {
+                  <igx-select-item [value]="movie">
+                    {{ movie }}
+                  </igx-select-item>
+                }
+              </igx-select-item-group>
+            }
+            <label igxLabel for="movies">Movie</label>
+            <ng-template igxSelectToggleIcon>
+              <igx-icon family="material">local_movies</igx-icon>
+            </ng-template>
+          </igx-select>
+          <igx-input-group>
+            <input igxInput name="fullName" type="text" formControlName="fullName" />
+            <label igxLabel for="fullName">Full Name</label>
+            <igx-suffix>
+              <igx-icon>person</igx-icon>
+            </igx-suffix>
+          </igx-input-group>
+          <igx-input-group>
+            <igx-prefix>+359</igx-prefix>
+            <label igxLabel for="phone">Phone</label>
+            <input igxInput name="phone" type="tel" formControlName="phone" />
+            <igx-suffix>
+              <igx-icon>phone</igx-icon>
+            </igx-suffix>
+            <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
+          </igx-input-group>
+          <igx-input-group>
+            <label igxLabel for="email">Email address</label>
+            <input igxInput name="email" type="email" formControlName="email" />
+            <igx-suffix>
+              <igx-icon>email</igx-icon>
+            </igx-suffix>
+          </igx-input-group>
+          <igx-combo #combo1 class="input-container" [itemsMaxHeight]="130" [data]="genres" [valueKey]="'type'"
+            [displayKey]="'type'" type="line" formControlName="genres" placeholder="Select your favorite genres"
+            searchPlaceholder="Search...">
+          </igx-combo>
+          <igx-date-picker name="date" formControlName="date" [minValue]="minDate" [maxValue]="maxDate"
+            placeholder="Date">
+            <igx-picker-toggle igxSuffix>
+              <igx-icon>today</igx-icon>
+            </igx-picker-toggle>
+          </igx-date-picker>
+          <igx-time-picker name="time" formControlName="time" [minValue]="minTime" [maxValue]="maxTime"
+            placeholder="Time">
+            <igx-picker-toggle igxSuffix>
+              <igx-icon>access_time</igx-icon>
+            </igx-picker-toggle>
+          </igx-time-picker>
+          <button igxButton="raised" igxRipple type="submit" [disabled]="!user.valid">Book</button>
+        </div>
+      </form>
+    </article>
+  </section>
+</div>

package/igx-ts/input-group/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [
+	    NoopAnimationsModule,
+	    <%=ClassName%>
+	  ]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/input-group/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,93 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import {
+  IgxSelectComponent,
+  IgxSelectGroupComponent,
+  IgxSelectItemComponent,
+  IgxLabelDirective,
+  IgxSelectToggleIconDirective,
+  IgxIconComponent,
+  IgxInputGroupComponent,
+  IgxInputDirective,
+  IgxSuffixDirective,
+  IgxPrefixDirective,
+  IgxHintDirective,
+  IgxComboComponent,
+  IgxDatePickerComponent,
+  IgxPickerToggleComponent,
+  IgxTimePickerComponent,
+  IgxButtonDirective,
+  IgxRippleDirective,
+} from '<%=igxPackage%>';
+
+interface Genre {
+  type: string;
+  movies: string[];
+}
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    ReactiveFormsModule,
+    IgxSelectComponent,
+    IgxSelectGroupComponent,
+    IgxSelectItemComponent,
+    IgxLabelDirective,
+    IgxSelectToggleIconDirective,
+    IgxIconComponent,
+    IgxInputGroupComponent,
+    IgxInputDirective,
+    IgxSuffixDirective,
+    IgxPrefixDirective,
+    IgxHintDirective,
+    IgxComboComponent,
+    IgxDatePickerComponent,
+    IgxPickerToggleComponent,
+    IgxTimePickerComponent,
+    IgxButtonDirective,
+    IgxRippleDirective
+  ]
+})
+export class <%=ClassName%> implements OnInit {
+  public genres!: Genre[];
+  public user!: FormGroup;
+  public minTime = '06:15:30';
+  public maxTime = '09:15:30';
+  public minDate = new Date();
+  public maxDate = new Date(new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate() + 14));
+
+  constructor(private fb: FormBuilder) { }
+
+  public ngOnInit(): void {
+    this.genres = [
+      { type: 'Action', movies: ['The Matrix', 'Kill Bill: Vol.1', 'The Dark Knight Rises'] },
+      { type: 'Adventure', movies: ['Interstellar', 'Inglourious Basterds', 'Inception'] },
+      { type: 'Comedy', movies: ['Wild Tales', 'In Bruges', 'Three Billboards Outside Ebbing, Missouri', 'Untouchable', '3 idiots'] },
+      { type: 'Crime', movies: ['Training Day', 'Heat', 'American Gangster'] },
+      { type: 'Drama', movies: ['Fight Club', 'A Beautiful Mind', 'Good Will Hunting', 'City of God'] },
+      { type: 'Biography', movies: ['Amadeus', 'Bohemian Rhapsody'] },
+      { type: 'Mystery', movies: ['The Prestige', 'Memento', 'Cloud Atlas'] },
+      { type: 'Musical', movies: ['All That Jazz'] },
+      { type: 'Romance', movies: ['Love Actually', 'In The Mood for Love'] },
+      { type: 'Sci-Fi', movies: ['The Fifth Element'] },
+      { type: 'Thriller', movies: ['The Usual Suspects'] },
+      { type: 'Western', movies: ['Django Unchained'] }
+    ];
+
+    this.user = this.fb.group({
+      date: ['', Validators.required],
+      time: ['', Validators.required],
+      email: ['', Validators.required],
+      fullName: ['', Validators.required],
+      genres: [''],
+      movie: ['', Validators.required],
+      phone: ['']
+    });
+  }
+
+  public onSubmit() {
+    console.log(this.user);
+  }
+}