<repo_name>tanya1oberemok/ProductList<file_sep>/src/app/components/log-in/log-in.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth.service';

@Component({
  selector: 'app-log-in',
  templateUrl: './log-in.component.html',
  styleUrls: ['./log-in.component.css']
})
export class LogInComponent implements OnInit {

  form:FormGroup;
  
  constructor(
    private formBuilder:FormBuilder, 
    private authService: AuthService, 
    private router: Router
  ) { 
    this.form = this.formBuilder.group({
      userName: ['',Validators.required],
      password: ['',Validators.required]
  });
  }

  ngOnInit() {
  }
}
<file_sep>/src/app/components/product/product.component.ts
import { Component, OnInit } from '@angular/core';
import { ListsService } from 'src/app/services/lists.service';
import { ActivatedRoute } from '@angular/router';

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


  constructor(
    private listsService: ListsService,
    private route: ActivatedRoute
    ) { }

  ngOnInit() {
    
    this.getId();
  }

  getId(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.listsService.getId(id)
    .subscribe(list => list.id === id);
  }

}
<file_sep>/src/app/services/lists.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';



@Injectable({
  providedIn: 'root'
})

export class ListsService {

  constructor(private http: HttpClient) { }

  getProducts() {
    return this.http.get('/assets/list.json')
  }

  getId(id: number) {
    return  of( this.getProducts().find(list => list.id === id));
  }
}
<file_sep>/src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { ListComponent } from './components/list/list.component';
import { LogInComponent } from './components/log-in/log-in.component';
import { NavigationComponent } from './components/navigation/navigation.component';
import { RegisterComponent } from './components/register/register.component';
import { ProductComponent } from './components/product/product.component';

const itemRoutes: Routes = [
  {
     path: 'products', component: ListComponent, children: 
     [
       {
         path: 'products/:id', component: ProductComponent
       }
     ]
    }, 
  {
    path: 'login', component: LogInComponent
  },
  {
    path: 'register', component: RegisterComponent
  }
]

const routes: Routes = [
  {
    path: 'api', component: NavigationComponent, children: itemRoutes
  },
  {
    path: '', component: HomeComponent
  },
  {
    path: 'login', component: LogInComponent, children:
    [
      {
        path: 'register', component: RegisterComponent
      }
    ]
  }
];



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