How to change the header color with App layout of angular components in AngularDart

Issue

How can I change the background color with app layout of angular components in an AngularDart project. I tried it but nothing affected the background blue color.

layout_component.html

<header class="material-header shadow">
<div class="material-header-row">
    <material-button class="material-drawer-button" icon (trigger)="drawer.toggle()">
        <material-icon icon="menu"></material-icon>
    </material-button>
    <span class="material-header-title">Mobile Layout</span>
    <div class="material-spacer"></div>
    <nav class="material-navigation">
        <material-button class="material-drawer-button" icon (trigger)="">
            <material-icon icon="favorite"></material-icon>
        </material-button>
    </nav>
    <nav class="material-navigation">
        <material-button class="material-drawer-button"
                         icon
                         popupSource
                         #source="popupSource"
                         (trigger)="basicPopupVisible = !basicPopupVisible">
            <material-icon icon="more_vert"></material-icon>
        </material-button>
        <material-popup defaultPopupSizeProvider
                        enforceSpaceConstraints
                        [source]="source"
                        [(visible)]="basicPopupVisible">
            <div class="basic">
                Hello, I am a pop up!
            </div>
        </material-popup>
    </nav>
    <nav class="material-navigation">
        <div href="#AppLayout">SIGN IN</div>
    </nav>
</div>

layout_component.css

.material-header-row {
background-color: black;
}

.basic {
    height: 200px;
    padding: 16px;
}

Thank You

Solution

If you add the style to a parent component (AppComponent) you can use ::ng-deep to pierce through component style encapsulation boundaries (from parent into children)

::ng-deep header.material-header {
  background-color: black;
}

::ng-deep .material-header-row {
  background-color: black;
}

Update

For above selector, the specificity wasn’t high enough to override the background color.

This worked for me:

::ng-deep header.material-header.material-header {
  background-color: black;
}

If you add the styles to index.html, ::ng-deep isn’t required.

Angular rewrites styles selectors added to components to match the classes like class="_ngcontent-qbq-3" it addes to each component (with a different number for each) to enforce style encapsulation.

Styles added to index.html are not rewritten and these classes are ignored.

You also might need ::ng-deep for HTML added with [innerHTML]="..." or someElement.append(...) because HTML added this way doesn’t get the classes added and selectors for CSS added to components will therefore not match after the rewrite anymore.

Answered By – Günter Zöchbauer

Answer Checked By – Jay B. (FlutterFixes Admin)