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
CodePudding user response:
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