How to customize the CSS for ng-bootstrap controls using Angular 2 / Bootstrap 4

Question

I am using two ng-bootstrap components ngbDropdown and ngb-pagination and I would like them to align themselves vertically next to each other.

The ngb-pagination component creates this HTML with a class of .pagination with a margin of 1rem

<nav>
  <ul ng-reflect-class-name="pagination pagination-sm" class="pagination pagination-sm">
  </ul>
</nav>

I have attempted to alter the class withing my Angular 2 component using the following.

@Component({
    selector: 'wk-company-list',
    template: require('./list.html'),
    styles: [`
        .pagination {
            margin-top: 0;
            background-color: greenyellow;
        }
    `]
})

Here is the full HTML off the page with these two controls

<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
             [gridOptions]="gridOptions"
             rowSelection="multiple"
             (cellClicked)="onCellClicked($event)"
             (selectionChanged)="onSelectionChanged($event)">

</ag-grid-ng2>


<div class="align-middle">

    <span ngbDropdown class="d-inline-block">
        <button class="btn btn-outline-primary btn-sm" id="dropdownMenu2" ngbDropdownToggle>25</button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
            <button class="dropdown-item">25</button>
            <button class="dropdown-item">50</button>
            <button class="dropdown-item">100</button>
            <button class="dropdown-item">200</button>
            <button class="dropdown-item">1000</button>
            <span class="text-muted">Total: {{vm.pagination.total}}</span>
        </div>
    </span>
    <span class="float-xs-right">
        <ngb-pagination
                style="margin-top: 0"
                (pageChange)="onPageChange($event)"
                [(page)]="vm.pagination.no"
                [pageSize]="vm.pagination.size"
                [collectionSize]="vm.pagination.total"
                size="sm"
                [maxSize]="5"
                [ellipses]="false"
                [rotate]="true"
                [boundaryLinks]="true">
        </ngb-pagination>
    </span>
</div>

Clemens Sum · Accepted Answer · 2017-02-15 13:43:25Z

8

Have you tried using the /deep/ or >>> selector inside your component styles?

To cite the angular docs:

Component styles normally apply only to the HTML in the component's own template.
We can use the /deep/ selector to force a style down through the child component tree into all the child component views. The /deep/ selector works to any depth of nested components, and it applies both to the view children and the content children of the component.

See https://angular.io/docs/ts/latest/guide/component-styles.html for reference.

answered Feb 15, 2017 at 13:43

Clemens Sum

1,1108 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steven Stark Over a year ago

this is being depreciated, and until then it's suggested to use ::ng-deep

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

Игорь Демянюк · Accepted Answer · 2017-03-21 14:05:01Z

6

For example:

ngb-pagination /deep/ .page-item.disabled .page-link {
    background-color: greenyellow;
}

answered Mar 21, 2017 at 14:05

Игорь Демянюк

1,22712 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to customize the CSS for ng-bootstrap controls using Angular 2 / Bootstrap 4

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related