I am drafting a web app with Angular 19 and Material, and I came across an issue with buttons arranged in a toolbar.

The issue is that I can't get a CSS rule to work on the buttons so that the specification margin-right: 8px applies to each button.

My intention

Since I'm using Material and it defines no spacing between buttons in a toolbar, I've chosen to create a component that will wrap a mat-toolbar and apply a specific CSS class to it so that buttons are spaced. My component's template is this:

<mat-toolbar class="app-toolbar">
    <ng-content></ng-content>
</mat-toolbar>

The accompanying CSS is:

.app-toolbar {
    button {
        margin-right: 8px;
    }
}

The issue

No matter how I express the selector, be it button, &>button or button+button, I can't seem to affect the right margin of any buttons in the toolbar. Here is the rendered HTML:

<app-toolbar _ngcontent-ng-c1959984292="" _nghost-ng-c2441739416="">
  <mat-toolbar _ngcontent-ng-c2441739416="" class="mat-toolbar app-toolbar mat-toolbar-single-row">
    <button _ngcontent-ng-c1959984292="" mat-raised-button="" mat-ripple-loader-class-name="mat-mdc-button-ripple" class="mdc-button mdc-button--raised mat-mdc-raised-button mat-unthemed mat-mdc-button-base">
    …

There's obviously something at play that evades me. It seems like the styling does not apply to projected content but I haven't found that specific info in the official documentation. I've found "You cannot add directives, styles, or arbitrary attributes to <ng-content>." from /guide/components/content-projection but that's about it.

The workaround I ended up using

Since mat-toolbar has display: flex, I ended up adding column-gap: 8px. The CSS is now:

.app-toolbar {
    column-gap: 8px;
    padding:0;
}

Even though I have a solution to this specific use case, I still want to understand what's at play. I hope someone knowledgeable has an answer for me. Thx.

I am drafting a web app with Angular 19 and Material, and I came across an issue with buttons arranged in a toolbar.

The issue is that I can't get a CSS rule to work on the buttons so that the specification margin-right: 8px applies to each button.

My intention

Since I'm using Material and it defines no spacing between buttons in a toolbar, I've chosen to create a component that will wrap a mat-toolbar and apply a specific CSS class to it so that buttons are spaced. My component's template is this:

<mat-toolbar class="app-toolbar">
    <ng-content></ng-content>
</mat-toolbar>

The accompanying CSS is:

.app-toolbar {
    button {
        margin-right: 8px;
    }
}

The issue

No matter how I express the selector, be it button, &>button or button+button, I can't seem to affect the right margin of any buttons in the toolbar. Here is the rendered HTML:

<app-toolbar _ngcontent-ng-c1959984292="" _nghost-ng-c2441739416="">
  <mat-toolbar _ngcontent-ng-c2441739416="" class="mat-toolbar app-toolbar mat-toolbar-single-row">
    <button _ngcontent-ng-c1959984292="" mat-raised-button="" mat-ripple-loader-class-name="mat-mdc-button-ripple" class="mdc-button mdc-button--raised mat-mdc-raised-button mat-unthemed mat-mdc-button-base">
    …

There's obviously something at play that evades me. It seems like the styling does not apply to projected content but I haven't found that specific info in the official documentation. I've found "You cannot add directives, styles, or arbitrary attributes to <ng-content>." from https://angular.dev/guide/components/content-projection but that's about it.

The workaround I ended up using

Since mat-toolbar has display: flex, I ended up adding column-gap: 8px. The CSS is now:

.app-toolbar {
    column-gap: 8px;
    padding:0;
}

Even though I have a solution to this specific use case, I still want to understand what's at play. I hope someone knowledgeable has an answer for me. Thx.

• angular

1 Answer 1

Technically the content inside ng-content is initialized outside the component and then projected inside, so the CSS might not apply to elements defined outside the component.

First solution, you can define it at the global-styles.scss level, so that the view encapsulation does not restrict it to a single component.

global-styles.scss

.app-toolbar {
    button {
        margin-right: 8px;
    }
}

Second solution, is to use a combination of :host (Applies only to this component) and ::ng-deep (frowned upon by angular for usage) so that the styles are able to affect the children.

:host ::ng-deep .app-toolbar {
    button {
        margin-right: 8px;
    }
}