Multiple UI component libraries in Angular 2

Question

I'm new to Angular 2+. From Angular resource page got to know different UI components library. Is it possible to use multiple UI components library for better look of UI such as one UI for data-grid , another for side-menu ? How to do it then?

Answer 1

It is indeed possible, but not recommended.

You should consider using a unique UI component library for a couple of reasons:

• Design patterns may conflict from one library to another.
• It is generally not recommended to use two different UI component libraries as they may create conflicts (for example Bootstrap 4 may conflict with Angular Material 2 because bootstrap uses a grid system that is based on CSS display table and Angular Material is using display flex, if I recall).

If you truly wish to do it, then you should simply try to go through the "Get started" or installation process of each UI Components and use them as you wish.

Links for Angular Material 2 & Bootstrap 4 respectively.

Answer 2

主要冲突是主题/风格相关的，例如，不同ui库中的按钮可能具有非常不同的外观。

Answer 3

It is possible but it is recommended to stick to one UI library.

To give you an example, here's 2 UI libraries. Angular Material and ngx-bootstrap ( For instructions on how to add it to your project, just go to their official pages )

Let's say I want to use the md-card from angular material. My template would look something like this

<md-card>
I'm from angular material.
</md-card>

Now I want to use the datepicker from bootstrap. I can just insert it like this

<md-card>
 I'm from angular material.
  <datepicker [(ngModel)]="dt"></datepicker>
 </md-card>

You have now two different ui libraries, but as you can imagine, the design might not be desireable.