How to get id from adress path in Angular

Issue

I want to print data for the record with flight_id=1 from my table flight, but get this id from the adress path, like on the picture:

It works, but only if I write smth like this this.flight_id = 1;, but I want to get the flight_id from the address here: localhost:4200/myflight/1

Here is my table flight:

I've added all required configuration in app.module.ts

My class myflights-list.component.ts

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

import { FlightService } from '../flight.service';
import { Flight } from '../flight';
import {TicketService} from '../ticket.service';
import {ActivatedRoute, Router} from '@angular/router';
import {Ticket} from '../auth/jwt-response';

@Component({
selector: 'myflights-list',
templateUrl: './myflights-list.component.html',
styleUrls: ['./myflights-list.component.css']
})
export class MyflightsListComponent implements OnInit {

flight: Flight = new Flight();
flights: Observable<Flight>;
flight_id: number;
constructor(private ticketService: TicketService, private flightService: FlightService,
          private router: Router, private route: ActivatedRoute) { }

ngOnInit() {
/*  this.flight_id = 1;*/
this.route.params.subscribe(params => { this.flight_id = params['flight_id']; });
this.flightService.getFlight(this.flight_id).subscribe(t => this.flight = t);
this.reloadData();
}

reloadData() {
this.flightService.getFlight(this.flight_id).
subscribe((response) => {
  this.flight = response;
});
}
}

flight.service.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {Flight} from './flight';

@Injectable({
providedIn: 'root'
})
export class FlightService {

private baseUrl = 'http://localhost:8080/api/flights';

constructor(private http: HttpClient) {
}

getFlight(flight_id: number): Observable<Flight> {
return this.http.get<Flight>(`${this.baseUrl}/${flight_id}`);
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MyflightsListComponent } from './myflights-list/myflights-list.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import {httpInterceptorProviders} from './auth/auth-interceptor';

 @NgModule({
 declarations: [
  AppComponent,
  MyflightsListComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [httpInterceptorProviders],
  bootstrap: [AppComponent]
  })
  export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyflightsListComponent } from './myflights-list/myflights-list.component';

const routes: Routes = [
{ path: 'myflight/:flight_id', component: MyflightsListComponent },
];

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

export class AppRoutingModule { }

Solution

This works for me:

ngOnInit() {
  this.route.params.subscribe(params => { this.flight_id = params['flight_id']; });
  this.reloadData();
}

Answered By - Viola