how to use single component to bind multiple dynamic table

Question

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

Jayakumar Balasubramaniam · 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.

Reena Lakra · Answer

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?

nithi mano · Answer

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 ?

Jayakumar Balasubramaniam · Answer

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

nithi mano · Answer

Hi, How to pass the data from one component to another for binding in a table in angular 4 or angular 5

Jayakumar Balasubramaniam · Answer

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

Jayakumar Balasubramaniam · Answer

Hi Nithi, I have update first question for on your doubt. Thanks for notifying Reena!

nithi mano · Answer

Hi, Excellent explanation.thanks

how to use single component to bind multiple dynamic table

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (8)