using angular 5 for new project - javascript

I am using angular 5 for my new project. and as it is said that jQuery is not recommended for angular-5, i am using ng-bootstrap which do not require 3rd party libraries. I am also using angular-material. I have following problems faced.
There is No documentation for table in ng-bootstrap.
If i use angular material, for tabs there are no more options for customising tabs the way i want. Only restricted options are available.
If i use both ng-bootstrap and angular-material, i feel unecessarily complexity will be increased.
if i use any one of them 1st and 2nd problem will not be solved.
i don't have proper documentation for problems i am facing.

Based on my own experience:
Angular-material is not mature enough for a serious project. Go with ng-bootstrap (not native bootstrap), and in case you need to work with tables, go with an additional table lib for angular like https://github.com/swimlane/ngx-datatable

Related

Using Bootstrap and ng-bootstrap is good?

I have two modules in my angular website , one is "bootstrap" and another one is "ng-bootstarp".
Does both modules are required , or any one is needed?
I am planning to keep only "ng-bootstarp" 4.0.0.0 and to remove "bootstrap"
Is this fine?
Also let me know the steps to remove "Bootstrap" ?
Can i just go ahead and delete the bootstrap from the ng_module folder or do i need to use any commands?
Don't delete it unless it's causing issues, Bootstrap is intended to be installed alongside ng-bootstrap.
Bootstrap is supposed to be installed when using ng-bootstrap, because ng-bootstrap
relies on Bootstrap's CSS, but it replaces everything else that comes with Bootstrap, as you can see in their dependencies. The CSS is then set in your angular.json or imported into the main styles.css
That said, the non-CSS parts of Bootstrap are unused and could be deleted, but if you're using a package manger, e.g. NPM, this could cause issues when updating and you'll need to repeat this process each update.
As pointed out by #Eliseo, an alternative to using the normal Boostrap with everything included is to use bootstrap-only-css, which can be installed using NPM or Bower, details here. This isn't an official Boostrap distribution as far as I can tell, so keep that in mind.
TLDR: there's no good reason to delete Boostrap.
Angular Material is the official UI framework for Angular, and is maintained (aside from open-source contributors) by Google engineers.
The community is fantastic, the documentation is excellent, and all of the components and utilities are designed to be used with Angular specifically. The source is a case-study in how to write code the Angular way.
It is for the reasons outlined above that I picked AM to be our company’s preferred UI framework.
I haven’t used Bootstrap in a very long time and I would not consider using it in a new project now.

jquery datatables from datatables builder into react component

I've been trying to get jQuery datatables to work in a react component. My app doesn't use bootstrap but I want to use it for my tables so I've scoped bootstrap to a class so i can use it in a div without affecting the rest of the application.
I read the following article Integrating React and Datatables — not as hard as advertised, but the article presents a use case that is more basic than I think many jQuery datatables users use. npm datatables doesn't give you access to extensions (search, scroller, button functions, etc), and everything that comes without the extensions is easy enough that you might as well use an existing react table like primereact, react-table, griddle, react-data-grid, reactabular, fixed-data-table, or react-virtualized.
These offer many options but when tested, had at least 1 or more problems that prevented it from being easily adopted and use all the features needed. Some have issues i think I could help fix after I'm more seasoned with react, but I'm not there yet. I've used jQuery datatables in many production environments without any problems. It's a major sticking point moving to react.
So after weeks of searching and testing and trying to work through bugs, I'm back to trying to bring jQuery datatables into my react app. I realize it's not the "react way" but based on the react docs it's possible and there's a proper way to approach it. I don't need it to react with anything outside of its container or div i place it in.
Using the builder is the recommended way to download datatables so you can get your customized components. I'm also downloading rather than using the CDN because this is a local app and needs to work when there is LAN but no WAN access. I'm using create-react-app and I tried to download datatables from here to a folder in my project and had the following problems:
hot-reload started taking forever (>1min)
the page itself was moving at a crawl
extensions didn't seem to be working (could have been locked up?)
How do you use jQuery datatables in a react app while still being able to use the datatables extensions and without killing the hot-reload for create-react-app? Can anyone provide a working example?
Update
Apparently jQuery datatables has made some major updates since the last time I tried to use their builder and now it includes a way to npm install the extensions too. I'll post a github of a working solution if i find one before someone else can update.
Update
Here is a github i made of a react version that is partially working and a basic html/js/css version that is fully working. The readme tells what is working and not working. Can anyone show me why this not working properly?

Angular2 JQuery Plugin Integration

Though this question asked quite a few times, there is no clear answers. I am beginner in Angular2. Please correct me if I am wrong. Is it wise to integrate JQuery plugins with Angular2. Imagine a JQuery plugin like JQuery UI with no proper typings available. How to implement that in Angular 2. What are the problems of using JQuery with Angular2. This question is already asked but answer is not useful.
It's clear and obvious that jQuery and
Angular are two different frameworks written above JavaScript. So it
is not recommended to use both the frameworks at same time on a single
project (either use jQuery or use Angular).
There are UI components available that are re-written using Angular without the dependency of jQuery. You can check ng-bootstrap and ngx-bootstrap which have almost all Bootstrap components written completely with Angular.
Alternatively, there is another complete UI framework for Angular based on Google's Material Design specs named Angular Material. Currently Angular Material for Angular 2 is in beta.
Also there are bundle of official UI resources that you can use and drive smoothly with Angular.

is angularjs still frowned upon to build widgets that installs on 3rd party websites when compared to jquery?

I read a stackoverflow post stating that using jquery to build a widget is better than angularjs. Their reasoning was because angularjs widget might interfere with the angularjs installed on the websites browser.
Link to the post: How to use AngularJS to build javascript widgets for public use?
It was posted in 2013, so I'm not sure if angularjs was updated to fix this issue.
If the applications are all using Angular then Angular widgets are the best asbthey give you more power and tie into the framework itaelf naturally.
If you are talking about general widgets then you want as few dependencies as possible. If you create a an Angular widget is will not be usable without Angular and people using other frameworks will not accept pulling in Angular to use your widget.

Adding AngularJs to a Bootstrap Theme

I am using a certain Bootstrap Theme purchased from ThemeForest for building a Web Application Project.
To be specific the theme referred to is - http://themeforest.net/item/modern-responsive-admin-dashboard-template/11004840
I have already completed the Frontend using that theme. Now when I start adding in the backend and integrating, I feel it might be more effective to use AngularJS than use Jquery to manipulate the DOM and the objects.
Can I just start using AngularJS for the dom manipulations in the same project? Or will I be facing any problems? I would like to check if there will be any conflicts arising out of me using both together ?
If there are any tutorials, please refer that to me. Thanks
Angular and bootstrap are 100% compatible. Just add the script tag for angular into your bootstrap project and you have a hybrid angular bootstrap project.
You will have no problems at all. If you're looking for examples of open source AngularJS projects which used Bootstrap, there are multitudes. Here's one of my own over on Github: https://github.com/JohnMunsch/PaperQuik
Note: In addition to being able to just use the two together, there's also projects like Angular Strap which provide Angular directives to wrap the various components (both JavaScript and not) provided by Bootstrap and make it easier to integrate them into your AngularJS code.

Categories