how to use single component to bind multiple dynamic table

nithi mano

8y861Angular

how to use single component to bind multiple dynamic table content in angular 4 or 5

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jayakumar Balasubramaniam8y ago
Accepted answer
1) Can I use iput and output decorator for components which doesnot have parent child relationship?

Edited: No we can't use Input and Output decorator without parent child relationship, if you want to pass values between the components without parent child relationship you can use, Service or url params.

2) For services- is it compulsory to have parent child relationship for components?

It's not compulsory to have parent child relation ships to use services

3) Can I get exmaples for service ?

Below is step by step code for a sample service and it's usage

Sample Service
import { Injectable } from '@angular/core';

@Injectable()
export class SampleService {
  public sharedValue:string="";

  constructor() { }

}
First Component
import {
    Component
} from '@angular/core';

import {SampleService} './SampleService.ts'
@Component({
    selector: `my-first-component`,
    template: `'value to second component'>`
})
export class FirstComponent
{
   constructor(private _service: SampleService) {
_service.sharedValue="Value from first component"
}
}
Second Component
import {
    Component
} from '@angular/core';

import {SampleService} './SampleService.ts'
@Component({
    selector: `my-second-component`,
    template: `{{receivedValue}}`
})
export class SecondComponent
{
    receivedValue:string="";

   constructor(private _service: SampleService) {
receivedValue=_service.sharedValue;
}
Make sure register your component and services in app.module.ts file.
+1
Jayakumar Balasubramaniam8y ago
Hi Nithi,

I have update first question for on your doubt.

Thanks for notifying Reena!
0
Reena Lakra8y ago
Hello Jayakumar Sir,

Could you please explain to me that in the below lines :
@Component({
    selector: `my-first-component`,
    template: `'value to second component'>`
})
How second-component is not a child of first component?
Because according to my view, it is called in the first component, so, it is the child of the first component.
Could anybody explain this concept to me?
+2
nithi mano8y ago
Hi,
Excellent explanation.thanks
0
nithi mano8y ago
Thanks for your explanation

My doubts
1) Can I use iput and output decorator for components which doesnot have parent child relationship?

2) For services- is it compulsory to have parent child relationship for components?

3) Can I get exmaples for service ?
+1
Jayakumar Balasubramaniam8y ago
Okay, to pass data from one component to another you can use few techniques let me explain 2 of them here.

1. If you are using any common Service you can declare a object in service and set value to that from first component and get it in second component.

2. You can use @Input decorator, like below

This will be your first component where we are going to pass value to second component
import {
Component
} from '@angular/core';
@Component({
selector: `my-first-component`,
template: `'value to second component'>`
})
export class FirstComponent
{
}
Here we recieve the value in second component in inputValue variable.
import {
Component, Inject,
Input
} from '@angular/core';
@Component({
selector: `my-second-component`,
template: `
received value {{inputValue}}
`
})
export class SecondComponent
{
@Input() public inputValue: string="";
}
Thanks,
Jayakumar B
+1
nithi mano8y ago
Hi,

How to pass the data from one component to another for binding in a table in angular 4 or angular 5
+1
Jayakumar Balasubramaniam8y ago
Hi Nithi,

I'm not clear with your question, can you brief it, Defenitely I can help you.
+1