How to apply CSS dynamically on child component called twice in parent [Angular]

Question

Sorry guys. I'm not able to frame question very well as the problem is itself very tricky. I've a month-picker and on top of it I've a time-selector widget. So here month picker is a child of timeselector component. See this screenshot: On click of calendar-icon the widget pops up. You can see that inside the time-selector I'm calling the month picker two times. First time for current Year-to-Date and second for the Previous year-to-date . You can also see a Comparing switch between the two. Now my task is to turn the second month-picker box into red or just disable it when the switch is turned off. I'll show you the code now.

timeselector.component.html (*please ignore tag names as they are custom made)

...
<combobox></combobox>
<app-monthpicker></app-monthpicker>

<toggle-switch (onChange)="handleChange($event)" [(ngModel)]="toggle"></toggle-switch>

<combobox></combobox>
<app-monthpicker [class.iamDisabled]="isDisabled"></app-monthpicker>
...

timeselector.component.ts

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

@Component({
    ...
})
export class TimeselectorComponent {
    isDisabled=false;

    handleChange(e) {
         this.isDisabled = !this.isDisabled;
     }
}

timeselector.component.css

.iamDisabled {
    color: red !important;
}

But i'm not getting any design on the second month-picker even when the switch is off. I want to show you the code of month-picker also.

monthpicker.component.html

<div class="dropdown">
  <span>
    <div class="range-box">
      <p>{{ lboundMonth }}-{{ lboundYear }}</p>
      <p>{{ uboundMonth }}-{{ uboundYear }}</p>
    </div>
  </span>
  <div class="my-table-div dropdown-content">
    <div class="year-div">
      <!-- Displaying years and months here-->
    </div>
  </div>
</div>

Clearly If I apply css in monthpickcr source code. It will be applied on both the components calls(upper and lower). Please tell me what should I do in this situation. I want to disable or lets say just turn the second monthpicker font color red when the switch is turned off.

Answer 1

I'm sharing a solution. We cant say it's a proper solution, it is a quick fix you can say (*not recommended).

1. Set background color to something off white so that it looks like some overlay.
2. Set the opacity so that it does not hide the entire field.
3. Disable hover effect so that month-picker doesn't turns up.

timeselector.component.css

.iamDisabled {
  background-color: whitesmoke;
  opacity: 0.3;
  pointer-events: none !important;
}

Please feel free to share a better solution.