javascripthtmlangularsassangularjs-ng-repeat

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 enter image description here

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:not(:first-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.

Solution 
  • .gen-home-content:not(.single-tile) > div:nth-child(2) { 
  display: none; 
}

    So check if single-tile is not present, I am guessing that is when you want to hide the other tile.

    Then use :nth-child(2) to hide the second element.