Why are two of our Angular component templates taking up so much space of our bundle?

Question

I've been trying to figure out ways to reduce our Angular app's bundle size, so I used source-map-explorer to figure out where the bundle size is coming from. When I looked at the output below, I noticed that navmenu.component.html and date-range.component.html comprise about 30% of the bundle size or so.

source-map-explorer output

I'm wondering why are these template files so large? Is this an issue with the way the html is actually written or is this a problem with how the module is loaded into the app? Also, should I be looking at the html template or at the component file itself?

Here are the template files. If the problem isn't the template files, happy to include the component files and the module file as well.

navmenu.component.html

<div class="nav">
    <div class="nav-title">
        <div id="navMenuTitle">Test Title</div>
    </div>
    <div class="nav-menu">
        <div *ngIf="isFetchingData">
            <div id="navMenuLoader" class="loader"></div>
        </div>

        <div *ngFor="let section of menuSections; let sectionId = index;">
            <div *ngFor="let item of section.getMenuItems(); let i = index;">
                <!-- Direct Link -->
                <div (click)="collapseMobileMenu()" id="{{item.getMenuId()}}" *ngIf="!item.hasChildren()"
                    [routerLink]="[item.getLink()]" [ngClass]="{ 'selected': (item.menuId === selectedMenuItem) }"
                    class="nav-menu-item">
                    <div [matTooltip]="item.getLabel()" [matTooltipShowDelay]="1250" [matTooltipPosition]="'right'"
                        class="mainMenuItem">
                        <div>
                            <mat-icon [matBadge]="item.getAlertCount()" matBadgeColor="warn"
                                [matBadgeHidden]="item.getAlertCount() === 0" class="title-icon">{{item.getIconClass()}}
                            </mat-icon>
                        </div>
                        <div class="itemLabel">
                            <span id="menu-title-{{i}}">{{ item.getLabel() }}</span>
                        </div>
                        <div class="moreInfoContainer">
                        </div>
                    </div>
                </div>

                <!-- Children Links -->
                <div id="{{item.getMenuId()}}" *ngIf="item.hasChildren()"
                    [ngClass]="{'selected': (item.menuId === selectedMenuItem) }" class="menuItemContainer">
                    <div [matTooltip]="item.getLabel()" [matTooltipShowDelay]="1250" [matTooltipPosition]="'right'"
                        class="mainMenuItem" (click)="onMenuItemClick(item)">
                        <div>
                            <mat-icon [matBadge]="item.getAlertCount()" matBadgeColor="warn"
                                [matBadgeHidden]="item.getAlertCount() === 0" class="title-icon">{{item.getIconClass()}}
                            </mat-icon>
                        </div>
                        <div class="itemLabel">
                            <span id="menu-title-{{i}}">{{ item.getLabel() }}</span>
                        </div>
                        <div class="moreInfoContainer">
                            <mat-icon class="moreInfoIcon">chevron_right</mat-icon>
                        </div>
                    </div>

                    <!-- Direct Link -->
                    <div class="childMenuContainer" *ngIf="item.getState() === 'expanded'">
                        <div (click)="collapseMobileMenu()" *ngFor="let child of item?.getChildren(); let c = index;">
                            <a id="{{child.getMenuId()}}" [@fadeInAnimation] [routerLinkActive]="['link-active']"
                                [routerLink]="[child.getLink()]"
                                (click)="selectMenuItem(item); currentFacility(child.getLabel());">
                                <button [matTooltip]="child.getLabel()" [matTooltipShowDelay]="1250"
                                    [matTooltipPosition]="'right'" *ngIf="!child.hasChildren()" class="childMenuItem"
                                    mat-button>
                                    <span id="child-menu-title-{{c}}">{{ child.getLabel() }}</span>
                                </button>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="nav-footer">
        <a (click)="collapseMobileMenu()" id="userSettingsBtnFooter" routerLink="/user/settings">
            <div>
                <span>Settings</span>
            </div>
        </a>
        <a id="helpBtnFooter"
            href=""
            target="_blank">
            <div>
                <span>Help</span>
            </div>
        </a>
        <a id="logoutBtnFooter" (click)="logOut()">
            <div>
                <span>Logout</span>
            </div>
        </a>
    </div>
</div>

date-range.component.html

<div id="datePicker" class="flex-row column">
    <div class="flex-column">
        <!-- Start Date & Time -->
        <div class="flex-row space-between">
            <mat-form-field class="date-picker-field">
                <mat-label class="date-offset-label">Start Date</mat-label>
                <input class="date-time-input date-offset" (dateChange)="emitChanges()" matInput [matDatepicker]="mini"
                    id="datePickerStartDate" placeholder="Start Date" [formControl]="start_date" [max]="end_date.value"
                    required>
                <mat-datepicker-toggle matTooltip="Click to select start date." matPrefix id="datePickerStartDateToggle"
                    matSuffix [for]="mini"></mat-datepicker-toggle>
                <mat-datepicker startView="year" (monthSelected)="setUtcMonth('start', $event, mini)"
                    id="datePickerStartDatePicker" #mini>
                </mat-datepicker>
            </mat-form-field>
            <mat-form-field class="time-picker-field" *ngIf="mode === hourMode">
                <mat-label>Start Time</mat-label>
                <input placeholder="Start Time" matInput id="startTime" (change)="setStartTime()" class="date-time-input timeInput"
                    type="time" [max]="endTime" [(ngModel)]="startTime"
                    onkeydown="return (event.which == 8 || event.which == 46) ? false : true" required />
                <mat-hint align="end" class="red" *ngIf="!range?.validTimeRange">Invalid</mat-hint>
            </mat-form-field>
        </div>

        <!-- End Date & Time -->
        <div class="flex-row space-between">
            <mat-form-field class="date-picker-field">
                <mat-label class="date-offset-label">End Date</mat-label>
                <input class="date-time-input date-offset" (dateChange)="setToEndOfDay(); emitChanges();" matInput [matDatepicker]="maxi"
                    id="datePickerEndDate" placeholder="End Date" [formControl]="end_date" [min]="start_date.value"
                    [max]="maxDate" required>
                <mat-datepicker-toggle matTooltip="Click to select end date." matPrefix id="datePickerEndDateToggle"
                    [for]="maxi"></mat-datepicker-toggle>
                <mat-datepicker startView="year" (monthSelected)="setUtcMonth('end', $event, maxi)"
                    id="datePickerEndDatePicker" #maxi></mat-datepicker>
            </mat-form-field>
            <mat-form-field class="time-picker-field" *ngIf="mode === hourMode">
                <mat-label>End Time</mat-label>
                <input [min]="startTime" placeholder="End Time" matInput id="endTime" (change)="setEndTime()"
                    class="date-time-input timeInput" type="time" [(ngModel)]="endTime"
                    onkeydown="return (event.which == 8 || event.which == 46) ? false : true" required />
                <mat-hint align="end" class="red" *ngIf="!range?.validTimeRange">Invalid</mat-hint>
            </mat-form-field>
        </div>
    </div>

    <!-- Select Date Preset -->
    <div *ngIf="mode !== monthMode && canSelectPreset" class="flex-row presetBtn">
        <app-button (click)="$event.stopPropagation()" color="accent" id="userMenuBtn"
            [text]="'Select Date Preset'" [matMenuTriggerFor]="menu" class="date-range-buttons">
        </app-button>
        <mat-menu id="userMenu" #menu="matMenu" [overlapTrigger]="false">
            <button class="matMenuItem" id="datePickerPast30Days" (click)="setTime('month')" mat-menu-item>
                <span class="datePickerPresetOptions">past 30 days</span>
            </button>
            <button class="matMenuItem" id="datePickerPast7Days" (click)="setTime('week')" mat-menu-item>
                <span class="datePickerPresetOptions">past 7 days</span>
            </button>
            <button class="matMenuItem" id="datePickerPast24Hours" (click)="setTime('day')" mat-menu-item>
                <span class="datePickerPresetOptions">past 24 hours</span>
            </button>
            <button *ngIf="canSelectTodayPreset" class="matMenuItem" id="datePickerToday" (click)="setTime('today')" mat-menu-item>
                <span class="datePickerPresetOptions">today</span>
            </button>
        </mat-menu>
    </div>

    <!-- Search -->
    <div *ngIf="mode === monthMode" class="flex-row searchBtnContainer">
        <app-button (click)="outputSearch()" color="accent" id="searchMenuAppBtn"
            [text]="'Search'" class="date-range-buttons" buttonId="searchMenuBtn">
        </app-button>
    </div>
</div>

I've tried to look for pieces of the template files that I can cut out or refactor. I'm thinking the issue isn't in the template files themselves, but not quite sure.

EDIT: Eventually, I figured it out. The culprit was the scss files for these two templates. I realized that in both template scss files, I was importing the root app.component.scss file, which was in turn, importing a couple of large theme files from ag-grid-community. So, I just had to remove these redundant imports, which took off about 1mb of size from the template files.