Preselecting item in primeng data table

Question

I have a function called "extract" in component "ExtractComponent" which posts some data. When i click on the button "extract" im sending the user to another route to "ExtractedComponent", this component uses a shared component template with some Inputs and Outputs. In that component there are two tables, the second table is shown only when i select something on the first table. Theres a (onRowSelect) method on this first table which i use to call a get method from the server through api to show the 2nd table. The method expects an "id" to be provided. In other words the other table gets its source when i select a row in the first table. So, i want to get the response from that function "extract" which does a post method and send that response (which has an 'Id') to "ExtractedComponent" where it will select the row with the "id" from that response.

I've tried using singleton service to send the response and then subscribe to it after but im having problems where the service is being subscribed to multiple times and after a couple of calls it loses its value..

This is the extract component where i want to get the response from and send it.

export class ExtractComponent implements OnInit {
  slug: string;
  id: number;
  disabled = true;
  selectedId: number;
  selectPlaceholder: any;
  loading = false;
  items: any[];
  cols: any[] = [];
  configurations: any[] = [];
  extractResponse: any;

  configurationsResponseModel: BaseConfigurationsModel[];
  selectedConfiguration = new ConfigurationResponseModel();
  select = new BaseConfigurationsModel();
  adapterModel = new AdapterModel();

  extractJobRequestModel = new ExtractJobRequestModel();

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private adaptersService: AdaptersService,
    private breadcrumbService: BreadcrumbService,
    private communicationService: CommunicationService
  ) { }

  ngOnInit() {
    this.getSlug();
    this.getAdapter();

  }

  getSlug() {
    this.route.params.subscribe(params => {
      this.slug = params['slug'];
      this.id = params['id'];
      if (this.id) {
        this.selectConfiguration(this.id);
      } else {
        this.selectedConfiguration = null;
      }
      this.getAdapterConfigurations();
    });
  }

  extract() {
    this.loading = true;
    this.extractJobRequestModel.id = 0;
    this.adaptersService.extractAdapterConfiguration(this.extractJobRequestModel).subscribe((response) => {
      this.loading = false;
      this.extractResponse = response;
      this.communicationService.preselectItem.next(this.extractResponse);
      this.router.navigate(['/adapters/' + this.slug + '/transform']);
    },
      (error) => {
        this.loading = false;
      });
  }

  onSubmit() {
    this.extractConfiguration();
  }
}

This is the table component which is a template and its being used by 3 other components. Im trying to get the information in constructor by subscribing to it and then calling the selectJob() which is the (onRowSelect) method. Then in selectJob im emitting the value to ExtractedComponent.

export class TableComponent implements OnInit, DoCheck {
  displayDialog = false;
  headerMessage: string;
  @Input() jobTitle: string;
  @Input() slug: string;
  @Input() objectTitle: string;
  @Input() jobSelected = false;
  @Input() jobCols: any[];
  @Input() objectCols: any[];
  @Input() jobList: ExtractJobResponseModel[] = [];
  @Input() objectList: any[] = [];
  @Output() jobChange = new EventEmitter();
  @Output() editSave = new EventEmitter();
  @Output() objectChange = new EventEmitter();
  @Input() selectedItem: any;
  preselectedItem: any;

  extractJobUpdateModel = new ExtractJobUpdateModel();
  baseEtlRequestModel = new BaseEtlRequestModel();

  constructor(
    private adaptersService: AdaptersService,
    private router: Router,
    private route: ActivatedRoute,
    private communicationService: CommunicationService,
  ) {
    this.communicationService.preselectItem.subscribe((r) => {
      this.selectedItem = r;
      this.selectJob();
    });
  }

  ngOnInit() {
    this.getSlug();
  }


  getSlug() {
    this.route.params.subscribe(params => {
      this.slug = params['slug'];
    });
  }

  selectJob() {
    this.jobSelected = true;
    this.jobChange.emit(this.selectedItem);
    this.baseEtlRequestModel.job_id = this.selectedItem.id;
  }

}

Extracted component

export class ExtractedComponent implements OnInit {
  slug: string;
  extractJobObjects: ExtractJobObjectResponseModel[];

  extractJobResponseModel: ExtractJobResponseModel[];
  extractObject: ExtractJobObjectResponseModel;
  extractJobUpdateModel = new ExtractJobUpdateModel();
  adapterModel = new AdapterModel();

  constructor(
    private adaptersService: AdaptersService,
    private route: ActivatedRoute,
    private breadcrumbService: BreadcrumbService,
    private communicationService: CommunicationService
  ) { }

  ngOnInit() {
    this.getSlug();
    this.setColumsForTables();
  }

  getSlug() {
    this.route.params.subscribe(params => {
      this.slug = params['slug'];
      if (this.slug) {
        this.getExtractJobs();
        this.getAdapter();
      }
    });
  }

  getExtractJobs() {
    this.adaptersService.getExtractJobs(this.slug).subscribe((response) => {
      this.extractJobResponseModel = response;
      this.extractJobResponseModel.forEach(x => {
        const pipe = new DatePipe('en-EU');
        x.created = pipe.transform(x.created, 'dd/MM/yyyy hh:mm aa');
      });
    }, (error) => {

    });
  }

  getExtractJobObjects(e) {
    this.adaptersService.getExtractJobObjects(e.id).subscribe((response) => {
      this.extractJobObjects = response;
    });
  }

}

ExtractedComponent.html

<app-table 
*ngIf="extractJobResponseModel" 
[jobList]="extractJobResponseModel"
[jobSelected]="jobSelected"
[objectList]="extractJobObjects"
(jobChange)="getExtractJobObjects($event)" 
>
</app-table>

score 1 · Accepted Answer · answered Jul 30 '19 at 07:37

I managed to do this by removing the event emit from the selectJob function in table component and moving the getExtractJobObjects() from Extracted component instead of the removed emit and adding this line:

this.selectedItem = this.jobList[0];

It marks the row as highlighted.

Preselecting item in primeng data table

1 Answers1