title: How do a get by id and navigate to edit form in another component
body: <p>i have a service in angular, i using httpClient, and i have two components, trucks and edit-truck , edit-truck is where i should perform save or update operations but now when i click my edit button from the trucks html in truck component i dont get any response , im using forms for validation , how can i call the form in edit-form component from the truck componenet so i can populate the form with an entity </p>
  
  <pre><code>service
  
       getTruckById(truckId: string): Observable&lt;Truck&gt; {
            let cpParams = new URLSearchParams();
            cpParams.set('id', truckId);
           return this.http.get(this.baseUrl + "/" + cpParams)
            .pipe(map(this.extractData),
             catchError(this.handleError));
         }
  </code></pre>
  
  <p>my truck component</p>
  
  <pre><code>export class TrucksComponent implements OnInit {
    statusCode: number;
    trucks: Observable&lt;Array&lt;Truck&gt;&gt;;
  
    constructor(private truckService: TruckService, private router: Router) { }
  
    ngOnInit() {
      this.trucks = this.getTrucksDtos();
    }
  
      getTrucksDtos() {
         return this.truckService.getTrucks();
        }
  
    deleteTruck(truck) {
      this.truckService.deleteTruckById(truck.truckId)
        .subscribe(successCode =&gt; {
            this.statusCode = successCode;
          //  this.getTrucksDtos();
          },
          errorCode =&gt; this.statusCode = errorCode);
    }
  
    // i should get the truck from the service getbyid here then transfer to edits form
    updateTruck(truckId: string) {
  here i should do getby id 
      this.truckService.getTruckById(truckId)
  
      this.router.navigate(['/edits'])
    }
  </code></pre>
  
  <p>this operation should populate a form in another componenet below is that component and forms , im new to angular so i might have a few errors, any suggestions please</p>
  
  <pre><code>export class EditTruckComponent implements OnInit {
  
    private truck: Truck;
  
    public truckForm: FormGroup;
  
    constructor(private truckService: TruckService, formBuilder: FormBuilder,
                private router: Router) {
  
      this.truckForm = formBuilder.group({
        truckCode: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(30)]],
        purchasedDate: ['', [Validators.required]],
        descriptions : ['', [Validators.required]]
      });
    }
  
    // private readonly toastCtrl: ToastController
  
    ngOnInit() {
      this.truck = this.truckService.getter();
    }
  
    processForm() {
      if (this.truck  == undefined) {
        this.truckService.createTruck(this.truck)
          .subscribe((truck) =&gt; {
            console.log(truck)
            this.router.navigate([''])
          },(error) =&gt; {
            console.log(error);
          });
      } else {
        this.truckService.updateTrucks(this.truck)
          .subscribe(
            (truck) =&gt; {
              console.log(truck);
              this.router.navigate([''])
            }, (error) =&gt; {
              console.log(error);
            });
      }
  
    }
  
    hasError(field: string, error: string) {
      const ctrl = this.truckForm.get(field);
      return ctrl.dirty &amp;&amp; ctrl.hasError(error);
    }
  
    isInvalidAndDirty(field: string) {
      const ctrl = this.truckForm.get(field);
      return !ctrl.valid &amp;&amp; ctrl.dirty;
    }
  </code></pre>
  
  <p>this is part of my truck html for truck component</p>
  
  <pre><code>&lt;table class="table table-striped"&gt;
              &lt;thead class="thead-inverse"&gt;
              &lt;tr&gt;
                &lt;th&gt;TruckId&lt;/th&gt;
                &lt;th&gt;TruckCode&lt;/th&gt;
                &lt;th&gt;purchasedDate&lt;/th&gt;
                &lt;th&gt;descriptions&lt;/th&gt;
                &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;tr *ngFor="let truck of trucks | async"&gt;
                &lt;td&gt;{{truck.truckId}}&lt;/td&gt;
                &lt;td&gt;{{truck.truckCode}}&lt;/td&gt;
                &lt;td&gt;{{truck.purchasedDate | date: 'yyyy-MM-dd'}}&lt;/td&gt;
                &lt;td&gt;{{truck.description}}&lt;/td&gt;
                &lt;td class="text-right"&gt;
                  &lt;a class="btn-sm btn-outline-secondary"
                     ngbTooltip="Edit Truck"
                     placement="top"&gt;
                    &lt;i class="fa fa-bus"&gt;&lt;/i&gt; &lt;span
                    class="d-none d-md-inline"  (click)="updateTruck(truck)" &gt;Edit&lt;/span&gt;&lt;/a&gt;
  
                   &lt;span data-toggle="modal" data-target="#deleteDialog"&gt;
                                  &lt;a href="#" class="btn-sm btn-outline-secondary"
                                   ngbTooltip="delete truck"
                                   placement="top"&gt;
                                      &lt;i class="fa fa-remove"&gt;&lt;/i&gt;
                                  &lt;span class="d-none d-md-inline" (click)="deleteTruck(truck)"&gt;Delete&lt;/span&gt;&lt;/a&gt;
                  &lt;/span&gt;
                &lt;/td&gt;
  </code></pre>