I have CarsComponent that I multi time use ChartComponent in it's template as I mentioned in code snippet:

cars.component.html:

      <div class="row" *ngIf="selectedItemId">
        <div class="col-12 mb-2">
          <report-chart [LegendData]="xAxisData1"
                        [SeriesData]="yAxisData1"
                        title="میزان خروج وسیله ی نقلیه از مراکز تولید"
                        barChartColor="#ad106c"
                        (onReportClick)="getProductReport()">
          </report-chart>
        </div>
        <div class="col-12">
          <report-chart [LegendData]="xAxisData2"
                        [SeriesData]="yAxisData2"
                        barChartColor="#3398DB"
                        title="میزان ورود وسیله نقلیه به مراکز فروش"
                        (onReportClick)="getSaleReport()">
          </report-chart>
        </div>
      </div>

and and in my ChartComponent I use radio-button-group like this:

chart.component.html:

<nb-radio-group [(ngModel)]="selectedChart" class="d-flex justify-content-center">
  <nb-radio class="d-flex justify-content-center"
            *ngFor="let option of radioButtonsOptions"
            [value]="option.value">
    {{ option.label }}
  </nb-radio>
</nb-radio-group>

my problem is when report-chart load in cars-component selected radio button only show in one instance and I want to prevent affection of two instance to each other