I am facing a challenge with a series of checkboxes that I create using mat-checkbox, including a corresponding Select all checkbox. What I want to achieve is to selectively hide the specific (and first) checkbox without affecting any other elements within mat-checkbox.
My checkboxes are default, and an example structure would look like this:
Once the elements are generated, the structure resembles the following:
<mat-checkbox _ngcontent-ici-c72="" class="mat-checkbox mat-accent ng-valid ng-dirty ng-touched"
ng-reflect-model="false" ng-reflect-options="[object Object]" d="mat-checkbox-1">
<label class="mat-checkbox-layout" for="mat-checkbox-1-input">
<div class="mat-checkbox-inner-container">
<input type="checkbox" class="mat-checkbox-input cdk-visually-hidden" id="mat-checkbox-1-input" tabindex="0"
aria-checked="false">
<div matripple="" class="mat-ripple mat-checkbox-ripple mat-focus-indicator"
ng-reflect-trigger="[object HTMLLabelElement]" ng-reflect-disabled="false" ng-reflect-radius="20"
ng-reflect-centered="true" ng-reflect-animation="[object Object]">
<div class="mat-ripple-element mat-checkbox-persistent-ripple"></div>
</div>
<div class="mat-checkbox-frame"></div>
<div class="mat-checkbox-background"><svg version="1.1" focusable="false" viewBox="0 0 24 24"
xml:space="preserve" class="mat-checkbox-checkmark">
<path fill="none" stroke="white" d="M4.1,12.7 9,17.6 20.3,6.3" class="mat-checkbox-checkmark-path"></path>
</svg>
<div class="mat-checkbox-mixedmark"></div>
</div>
</div>
<span class="mat-checkbox-label"><span style="display: none;">
</span>Select All</span>
</label>
</mat-checkbox>
Most of these components are dynamically created by Angular after page load, except for the span element holding the text "Select All."
I am trying to target only the first element containing the class mat-checkbox-inner-container. However, using CSS hides all elements with that class, not just the first one.
Additionally, my attempt to programmatically add a class via TypeScript has not yielded successful results. Here is the snippet of code I have tried:
checkHider():void {
let elem = document.getElementsByClassName("mat-checkbox-inner-container")[0];
elem.classList.add("hider");
}