<file_sep>import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TicketShowcaseComponent } from './pages/ticket-showcase/ticket-showcase.component';
import { TicketShowcaseRoutingModule } from './ticket-showcase-routing.module';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from '../../interceptors/auth-token.interceptor';
import { TicketShowcaseModalComponent } from './components/ticket-showcase-modal/ticket-showcase-modal.component';
import { TicketCurrentComponent } from './components/ticket-current/ticket-current.component';

@NgModule({
  declarations: [
    TicketShowcaseComponent,
    TicketShowcaseModalComponent,
    TicketCurrentComponent
  ],
  imports: [CommonModule, TicketShowcaseRoutingModule],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class TicketShowcaseModule {}
<file_sep>import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { TicketData } from '../../../../interfaces/ticket-data.interface';

@Component({
  selector: 'app-ticket-showcase-modal',
  templateUrl: './ticket-showcase-modal.component.html',
  styleUrls: ['./ticket-showcase-modal.component.scss']
})
export class TicketShowcaseModalComponent implements OnInit {
  @Input() ticketData: TicketData;
  @Output() ticketClose: EventEmitter<TicketData> = new EventEmitter();

  constructor() {}

  ngOnInit(): void {}

  ticketCloseHandler(): void {
    this.ticketClose.emit();
  }
}
<file_sep>import {Component, OnInit} from '@angular/core';
import {AuthService} from './services/auth.service';
import {map, take} from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'showcase';

  constructor(private authService: AuthService) {
  }

  ngOnInit(): void {
    this.authService.login()
      .pipe(take(1))
      .subscribe(authData => {
        const token = authData.headers.get('x-auth-token');

        localStorage.setItem('x-auth-token', token);
      });
  }
}
<file_sep>import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  OnInit,
  Output
} from '@angular/core';
import { TicketData } from '../../../../interfaces/ticket-data.interface';

@Component({
  selector: 'app-ticket-current',
  templateUrl: './ticket-current.component.html',
  styleUrls: ['./ticket-current.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TicketCurrentComponent implements OnInit {
  @Input() ticketData: TicketData;
  @Output() openTicketModal: EventEmitter<TicketData> = new EventEmitter();

  constructor() {}

  ngOnInit(): void {}

  openTicketModalHandler(): void {
    this.openTicketModal.emit(this.ticketData);
  }
}
<file_sep>import {Component, OnInit} from '@angular/core';
import {ForTicketService} from '../../../../services/for-ticket.service';
import {map} from 'rxjs/operators';
import {Observable} from 'rxjs';
import {TicketData} from '../../../../interfaces/ticket-data.interface';

@Component({
  selector: 'app-ticket-showcase',
  templateUrl: './ticket-showcase.component.html',
  styleUrls: ['./ticket-showcase.component.scss']
})
export class TicketShowcaseComponent implements OnInit {
  tickets$: Observable<TicketData>;
  ticketDataOpened: TicketData;
  currentTicketData: TicketData;

  constructor(private forTicketService: ForTicketService) {
  }

  ngOnInit(): void {
    this.tickets$ = this.forTicketService.getTicketsFromApi()
      .pipe(map(data => data[0].events.map(event => {
          event.poster.path = 'https://img5.goodfon.com/original/1920x1200/2/9b/frozen-red-fantasy-nature-blizzard-beautiful-anime-wood-wi-1.jpg';
          return event;
        }
      )));
  }

  openTicketModal(data: TicketData): void {
    this.ticketDataOpened = data;
  }

  currentTicket(data: TicketData): void {
    this.currentTicketData = data;
  }

  closeTicketModal(event): void {
    this.ticketDataOpened = null;
  }
}
<file_sep>export interface TicketData {
  name: {
    ru: string;
  };
  duration: string;
  date: string;
  poster: {
    path: string;
  };
  description: {
    ru: string;
  };
}
<file_sep>import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TicketShowcaseComponent } from './pages/ticket-showcase/ticket-showcase.component';

const routes: Routes = [
  { path: 'ticket-showcase', component: TicketShowcaseComponent },
  // { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class TicketShowcaseRoutingModule { }
