Hide a div generated dynamically via SCSS

I am working on hiding certain elements of an Angular page. I cannot change the source code, however I am able to upload an SCSS stylesheet which is applied to the page. The page I am working on has 2 dynamically generated buttons. The buttons look like

and the html/angular for the two buttons is as follows, from dev tools inspect.


<div ng-class="['gen-home-content', isSingleTile ? 'single-tile' : null]" class="ng-scope gen-home-content">
<div ng-repeat="tile in tiles" class="ng-scope">
<landing-page-app-tile tile-data="tile" class="ng-isolate-scope">
<button ng-click="goApp(tileData.url)" class="gen-app-tile">
<div class="tile-icon">
<img ng-src="../assets/personal_info.svg" aria-hidden="true" src="../assets/personal_info.svg">
</div>
<div class="tile-content">
<div class="tile-title ng-binding">
Personal Information
</div>
<div class="tile-desc ng-binding">
View and update your biographical and demographic information.
</div>
</div>
</button>
</landing-page-app-tile>
</div>
<div ng-repeat="tile in tiles" class="ng-scope">
<landing-page-app-tile tile-data="tile" class="ng-isolate-scope">
<button ng-click="goApp(tileData.url)" class="gen-app-tile">
<div class="tile-icon">
<img ng-src="../assets/direct_deposit.svg" aria-hidden="true" src="../assets/direct_deposit.svg">
</div>
<div class="tile-content">
<div class="tile-title ng-binding">
Direct Deposit
</div>
<div class="tile-desc ng-binding">
Create, view and update your direct deposit allocation(s).
</div>
</div>
</button>
</landing-page-app-tile>
</div>
</div>

My first thought was that since the containing div has the ng-class isSingleTile ? ternary expression but not the single-tile class, that the expression must be evaluating to null, and if I could apply the isSingleTile class to the div with the gen-home-content class, perhaps that would force a single-tile view (which I assume would be helpful to me). Using scss I tried these options

.gen-home-content div:notfirst-child) {
display: none !important;
}


and

.gen-home-content {
@extend .single-tile;
}


but these two styles did not resolve the issue. I do not know exactly what the single-tile class is, I tried searching for it but it was not in the existing stylesheet. I think it is related to mat-grid-list but I could not find specific documentation on it.

Any advice on how to hide the direct deposit button is appreciated.

Continue reading...