ng-bootstrap - Typeahead dropdown width

Question

I started using the ng-bootstrap Typeahead component and I\'m pretty happy with that.

One thing I would like to achieve is to get the dropdown items to have the same

Answer 1

Expanding on Nandita Sharma's answer, when turning off ViewEncapsulation in Angular it's probably a good idea to scope any CSS rules to the component. This will avoid generically named classes from leaking out in the global CSS scope.

A really simple way of doing that is to scope everything inside of the component's selector:

// Name of the component containing the typeahead
app-parent-selector {
  // Rules added here won't leak out into the global CSS scope
  .dropdown-menu {
    width: 400px;
  }
}

It would also be wise to avoid any approach that uses shadow-piercing descendant combinators (::ng-deep, /deep/ or >>>) because support for them is gradually being removed from all major browsers and will eventually be removed from Angular.