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

`dataService.ColumnDefinition` does not exist in the code you provided, so there's that. I think you meant to write `dataService.columnCellDefinition`. You should define a proper type instead of using `any`, you wouldn't be making mistakes like that. If you plan on allowing multiple services, you should create an interface that is implemented by those services, then you can declare the property as that type. — Chris Hamilton, Aug 18 '22 at 07:39
Without the typo this should work fine. Here's an example: https://stackblitz.com/edit/angular-ivy-ao9auk?file=src/app/child/child.component.ts — Chris Hamilton, Aug 18 '22 at 08:06

score 2 · Accepted Answer · answered Aug 18 '22 at 07:52

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

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

1 Answers1