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?
3 Answers
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.
2 Comments
SamCodes
If we use Angular Material for date picker we will use selector : <md-datepicker> If we use ng-Bootstrap for the same it will be: <ngb-datepicker> So, how does the confusion arise and where?
Christopher
Each library is designed with standalone features in mind, for example you may not be able to mix up
card elements from Angular Material 2 (md-card) with some from ng-bootstrap. But it may also cause problems in your design.The main conflicts are theme / style related,eg, buttons in different ui library may have very different look.
Comments
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.
