Angular 4 Content Bleeding on Route Param Update

Question

I have this content bleeding issue. I am routing to pages pulling the product id while subscribing to the route params.

It works fine on the initial load, however, if the route param is updated the new content of the product is loaded on top of the old content. I don't want the content to bleed over into each other as they cause conflicts.

PRODUCT.COMPONENT.TS
...
constructor(
  private authService: AuthService,
  private route: ActivatedRoute,
  private router: Router,
  private httpService: HttpService
) { }

ngOnInit() {
  this.route.params
    .subscribe(params => {
      const id = +params['id'];
      this.loadProduct(id);
      console.log(`Current param ID is: ${id}`);
    });
}

loadProduct(prod_id: number) {
  this.httpService.getProduct(prod_id)
    .subscribe((prod: any) => {
      this.prod = prod.data[0];
      console.log(this.prod);
      this.processProduct();
    });
}
...

APP.COMPONENT.HTML

<div fxLayout="column" fxFlex="100%">

  <afn-navbar fxFlex="7%"></afn-navbar>

  <div fxLayout="row" fxFlex="88%">
    <afn-sidebar fxLayout="column" fxFlex="10%"></afn-sidebar>

    <div fxLayout="column" fxFlex="90%">
      <router-outlet></router-outlet>
    </div>

  </div>

  <afn-footer fxFlex="5%"></afn-footer>

</div>

ROUTE CONFIGURATIONS

const routes: Routes = [
  { path: 'lt/dashboard', canActivate: [ AuthGuard ], component: DashboardComponent },
  { path: 'lt/product/:id', canActivate: [ AuthGuard ], component: ProductComponent }
];

DISCOVERY

I noticed that the areas that had the content bleeding are the ones that are embedded/child components whose selector tags that are property bound to an array structure for an input source. I suspect that the array is being appended instead of being overwritten by its new content. Hence the duplication of information.

for example:

<app-stops class="card-spacer" [stops]="prod.delivery.stops">Stops are loading...</app-stops>

STOPS.COMPONENT.TS

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

import { Stop } from '../../../definitions/stop';

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

  @Input() stops: Stop[];

  ngOnInit() {
    console.log(this.stops);
  }

}

STOPS.COMPONENT.HTML

<section id="stops" *ngIf="stops">
  <div class="card">
    <div class="card-block">
      <afn-stop-panel [stop]="stop" *ngFor="let stop of stops"></afn-stop-panel>
    </div>
  </div>
</section>

How do I clear these tags of their existing content prior to input of new content information?

Answer 1

RESOLVED

I was missing a step during the dynamic creation of the Reactive Form.

this.productForm: FormGroup = this.formBuilder.group({});

This issue was the root cause of my page bleeding information because the content reload would halt due to the crash of my form. The new controls would be added to the existing controls in the formGroup/Form.