Tools - Do you know the best UI framework for Angular?

The main contenders for the best UI framework for Angular are:

• Angular Material (Recommended) - https://material.angular.io/
• Bootstrap - https://getbootstrap.com

Making the choice of which to use will depend on several factors related to your project:

1. The look and feel of the site that your client is seeking
2. The range of components that will be required in the application
3. The developers' familiarity with the framework
4. The designers' familiarity with theming in the framework

Angular Material

Angular Material has a very specific design metaphor, and if the look and feel is one that your client likes, then consider using it. But if the Material metaphor doesn't match the rest of the client's applications, then it may not be a good choice.

Here are some reasons to use Angular Material:

✅ More popular than Kendo and Ant Design (see npm trends comparison)

✅ Good out-of-the-box grid customization and column sorting is included. Easy to add filtering (different way than Kendo).

✅ Free and open source.

Angular Material uses Angular components for its widgets. This means that the HTML rendered in the browser will include directives, divs, and classes that are not present in the component template HTML. It is for this reason that Designers without a good understanding of Angular may have difficulties tweaking the look of the Angular Material components.

Here are some tips for working with Angular Material:

• Information regarding theme can be found here: https://material.angular.io/guide/theming
• Tweaking individual components can be done by wrapping it in a CSS class and using ng-deep: https://blog.angular-university.io/angular-host-context/ If you prefer, all such modifications can be done in a separate SCSS file that is then added into styles.scss. Make sure you use a wrapper class so you do not change all other same Angular Material components in the project.
• Add the Flex Layout library to your project to take advantage of Flexbox. It makes it easy to use Flexbox classes via directives in your Angular HTML templates. Here is a demo website for Flex Layout: https://tburleson-layouts-demos.firebaseapp.com/#/docs
• For the creation of custom Angular Material components, the CDK can be used: https://material.angular.io/cdk/categories
• If you need additional colours for the standard 'warn', 'primary', and 'accent', you can add that into global SCSS files:

.mat-success {
  color: $white !important;
  background-color: $success !important;
}

Now you can do following:

<button mat-raised-button color="success">Primary</button>

Bootstrap

Bootstrap is the obvious choice if your UI design requires extensive customization. Bootstrap makes it easy to theme your application's design and to tweak the design of individual components. In addition to components, Bootstrap 4 provides powerful layout and theming capabilities. These features make it popular with Designers.

There are two popular bootstrap-based Angular component libraries - ng-bootstrap and ngx-bootstrap. Both support Bootstrap 4 and provide a rich choice of components.