Invoke service methods in child component using a service passed as config object in parent in angular

Question

Here i'm passing the table configurations to child component in the form of object. Where i'm passing TableService also

parent.component.html

<app-shared-table [tableConfiguration]="tableConfig"></app-shared-table>

parent.component.ts

import {Component, OnInit} from '@angular/core';
import { TableService } from 'src/app/services/table.service';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
  providers: [TableService]
})
export class ParentComponent implements OnInit {
  constructor( private tableService: TableService) {
  }
  public tableConfig = {
    dataService: this.tableService,
    defaultSorting: [],
    headline: "Tanslation Service",
    filterSupport: true,
  }
  ngOnInit(): void {

  }
}

I'm calling the services defined in the TableService in shared table component to get the configuration. where i'm not getting access to service methods. Showing undefined.

shared-table.component.ts

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

@Component({
  selector: 'app-shared-table',
  templateUrl: './shared-table.component.html',
  styleUrls: ['./shared-table.component.scss']
})
export class SharedTableComponent implements OnInit {
  @Input() tableConfiguration : any = {};
  public defaultConfig = {
    currentSearch: null,
    currentSorting: [],
    offset: 0,
    length: 50,
    data: [],
    columnDefinition: []
  }

  public config = {...this.defaultConfig, ...this.tableConfiguration};

  constructor() { }

  ngOnInit(): void {
    this.config.columnDefinition = this.config.dataService.ColumnDefinition;
     this.config.dataService.loadData().subscribe((data:any) => {
       this.config.data = data
       console.log("35",this.config.data)
     })
  }
}

table.service.ts

import { Injectable } from '@angular/core';
import { Observable, of, Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';

export interface translateTable {
  id: string
  name: string
  meaning: string
  type: Type
  textInLocales: TextInLocale[]
}
export interface Type {
  id: number
  name: string
}

export interface TextInLocale {
  id: number
  text: string
  description: string
}
@Injectable({
  providedIn: 'root'
})
export class TableService {
  columnCellDefinition = [
    {
      FieldName: 'id',
      FieldLabel: 'id',
      type: "string",
      sortable: true,
      visible: true
    },
    {
      FieldName: 'Name',
      FieldLabel: 'Name',
      type: "string",
      sortable: true,
      visible: true
    },
    {
      FieldName: 'meaning',
      FieldLabel: 'meaning',
      type: "string",
      sortable: true,
      visible: true
    },
    {
      FieldName: 'type',
      FieldLabel: 'type',
      type: "string",
      sortable: true,
      visible: true
    },

  ];
  constructor(private httpClient: HttpClient) { }
  loadData = (): Observable<translateTable> => {
    const url = `${(environment as any).url}${(environment as any).findTexts}?code=${(environment as any).APIKey}`
    return this.httpClient.get<translateTable>(url, { headers: { 'API-Key': environment.APIKey } });
  }

  loadColumnDefinition = () => {
    return this.columnCellDefinition;
  }


}

How to access service methods in child component when it is sent a input from parent component

Answer 1

parent.component.ts

import {Component, OnInit} from '@angular/core';
import { TableService } from 'src/app/services/table.service';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
  providers: [TableService]
})
export class ParentComponent implements OnInit {
  constructor( private tableService: TableService) {
  }
  public tableConfig: any;
  ngOnInit(): void {
    this.tableConfig = {
    dataService: this.tableService,
    defaultSorting: [],
    headline: "Tanslation Service",
    filterSupport: true,
   }
  }
}

assign config inside ngOnInit() and also below assignment is not correct with respect to service file.

this.config.columnDefinition = this.config.dataService.ColumnDefinition;

shared-table.component.ts

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

@Component({
  selector: 'app-shared-table',
  templateUrl: './shared-table.component.html',
  styleUrls: ['./shared-table.component.scss']
})
export class SharedTableComponent implements OnInit {
  @Input() tableConfiguration : any = {};
  public defaultConfig = {
    currentSearch: null,
    currentSorting: [],
    offset: 0,
    length: 50,
    data: [],
    columnDefinition: []
  }

  public config: any;

  constructor() { }

  ngOnInit(): void {
    this.config = {...this.defaultConfig, ...this.tableConfiguration};
    this.config.columnDefinition = this.config.dataService.columnCellDefinition;
     this.config.dataService.loadData().subscribe((data:any) => {
       this.config.data = data
       console.log("35",this.config.data)
     })
  }
}

I hope this will work