CODEWITHSUNDEEP
angular
SamCodes
SamCodes

Reputation: 394

Multiple UI component libraries in Angular 2

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?

Upvotes: 3

Views: 2276

Answers (3)

brijmcq
brijmcq

Reputation: 3418

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.

Upvotes: 1

jackjoy
jackjoy

Reputation: 101

The main conflicts are theme / style related,eg, buttons in different ui library may have very different look.

Upvotes: 1

Christopher
Christopher

Reputation: 1772

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.

Upvotes: 3

Related Questions