Give dynamic ID to a div which comes from other parent component

Question

I have a chart component like below:

<div id="chart">
    <ngx-charts-bar-horizontal [view]="view" [trimYAxisTicks]="false" [xAxisTickFormatting]="convertDecimalToNumber" [scheme]="colorScheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showDataLabel]="showDataLabel" [xAxisLabel]="xAxisLabel" [barPadding]="40">
    </ngx-charts-bar-horizontal>
</div>

I am manipulating all the styles of this chart by it's parent div here which has id="chart", but I need above same component 2 times in a parent component! So that creates problem with same 2 ids.

So, I decided to pass div's id from parent component as an @Input() like below:

<div class="container">
    <!-- Other tags -->
    <child-component [chartId]="users"></child-component>
    <!-- Other tags -->
    <child-component [chartId]="visuals"></child-component>
    <!-- Other tags -->
</div>

Edit on child component:

TS File:

@Input() chartId: string;

HTML:

<div [id]="chartId">
    <ngx-charts-bar-horizontal [view]="view" [trimYAxisTicks]="false" [xAxisTickFormatting]="convertDecimalToNumber" [scheme]="colorScheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showDataLabel]="showDataLabel" [xAxisLabel]="xAxisLabel" [barPadding]="40">
    </ngx-charts-bar-horizontal>
</div>

I tried these techniques: [id]="chartId", [attr.id]="chartId", id="{{chartId}}"

but none of above worked to set the dynamic id from Input.

Hi @Hope can you tell me what values you are getting in ` chartId` of `
`? — coderman401, Feb 28 '20 at 09:09
okay, I posted the answer you can try and let me know if it works for you or not. — coderman401, Feb 28 '20 at 09:23

score 4 · Accepted Answer · edited Mar 02 '20 at 05:59

4

HTML:

<div id="chart"> </div>

component:

@Input() chartId: string;
ngOnChanges(): void {
    const parent_div = document.getElementById('chart');
    parent_div.setAttribute('id', this.chartId);
}

In your child component give some initial id as a default value and use ngOnChanges to update the id.

edited Mar 02 '20 at 05:59

coderman401

582
3
17

answered Feb 28 '20 at 10:28

Palak Jadav

1,202
1
11
23

coderman401 · Answer 2 · 2020-02-28T09:32:23.230

In parent component.html:

<div class="container">
    <!-- Other tags -->
    <child-component chartId="users"></child-component>
    <!-- Other tags -->
    <child-component chartId="visuals"></child-component>
    <!-- Other tags -->
</div>

and in your child component.ts:

@Input() chartId: string;

and in your child component.html file:

<div id="{{ chartId }}">
    <ngx-charts-bar-horizontal [view]="view" [trimYAxisTicks]="false" [xAxisTickFormatting]="convertDecimalToNumber" [scheme]="colorScheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showDataLabel]="showDataLabel" [xAxisLabel]="xAxisLabel" [barPadding]="40">
    </ngx-charts-bar-horizontal>
</div>

EDIT

If the above solution didn't work for you try this:

in the parent component.ts file declare two variables:

users: string = 'yourID1';
visuals: string = 'yourID2';

and in parent component.html:

<div class="container">
    <!-- Other tags -->
    <child-component [chartId]="users"></child-component>
    <!-- Other tags -->
    <child-component [chartId]="visuals"></child-component>
    <!-- Other tags -->
</div>

I hope this will help

score 0 · Answer 3 · answered Feb 28 '20 at 09:16

0

Sometimes the problem is at your ViewEncapsulation level. Even more, if you're trying to style a dom element inside your <ngx-charts-bar-horizontal/> .

I think you may use the ViewEncapsulation.None option inside your ChildComponent.

answered Feb 28 '20 at 09:16

jafar_mnkd

112
6

Okay i will try that, but can you tell me which method will work from the methods I have tried for ID? – Hope Feb 28 '20 at 09:18
1

**id="{{chartId}}"** . – jafar_mnkd Feb 28 '20 at 09:32

Give dynamic ID to a div which comes from other parent component

3 Answers3