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.
Related
I am new to Angular 6 and .Net Core 2.1. I've created a some application but now I need to make use of jquery events. I have installed Jquery packages to node_modules as well.
Could anyone please help me!!
Thanks in advance
Even in the angular-cli.json file, I've added the jquery files and my custom js file.
But still not working.
Below are my configuration and code
Solution Structure
You will find here an example link
I would recommend to keep JQuery out of your Angular project. You have to understand how Angular 2+ works and you will see that there is no need for JQuery.
With JQuery you were selecting an element in the page and modify it but with Angular the UI changes based on a model property. It is another way of thinking about the UI.
You can read more about the differences between the two here link. I also tried to use JQuery when I began using Angular because of my previous experience but I learned that was a mistake.
if you want to use jQuery u will need to put the files in the wwwroot folder. You can link it from there.
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?
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.
I am having problems with Foundation and the Accordion and Tabs modules. I created my project using the command line compass create <project name> -r zurb-foundation --using foundation and I then customized the style sheet using Sass and the _settings.scss.
Although, I can't get the Accordion and Tabs modules working and I don't understand why. I realized that both foundation.accordion.js and foundation.tab.js files do not come with, in the JS folder when creating a project like I did. I therefore decided to put them myself there from a standard downloading of Foundation but it is still not working. I obviously included the script tags for them at the end my Html page.
Do you guys know if there's any possibility to create a Foundation project using Sass that includes those two modules? I can't use the standard Foundation since I am like customizing everything.
Thanks for your help.
I finally found the answer to my problem. I used to create foundation projects using the command above. Although, I realized it is preferable to create the project using foundation new PROJECT_NAME (NodeJS and Bower are needed). Like this, everything comes along, including the foundation.accordion.js and the foundation.tab.js.
Actually, it is the last version of Foundation that is downloaded and everything works perfectly like this.
I would like to use meteor with a bootstrap admin, i.e. a bundle including several bootstrap plugins, script and everything typically made as a kind of framework for developing a web application.
Usually those bundles comes with a lot of dependencies, such as external links for fonts, IE hacks as well as their own shipped file of bootstrap, jQuery and other stuff. If we were in a regular php-like framework it would have been fine.
But in order to make such a template be "native" on meteor, I thought to refactor it in such a way that local dependencies (script and css basically) are stored into folders and not loaded via a <script src="…"></script> tag (otherwise the local path would not be found) but I doubt it is really the best practice, this is why I do consider 3 options:
To use the project/public folder in order to store all the bundle's dependencies (as if it would have been in php for example)
I might refactor the bundle's code by removing any script or style tag aimed to import the js or css into the page and add the corresponding js file aside so that meteor will dynamically load it during at runtime
Like in option 2 but instead of using the bundle's jQuery source files I would install the official jQuery's package for meteor (if existing).
The first (1) option should be the quickest one to get something running but it would not be very meteor native. The advantage however would be to keep the code near to the original one and being able to upgrade once a new version of the bundle would be released.
The 2 other options would be much more elegant (especially the third one) but it would involve a lot of refactoring and induce the risk of introducing bugs I did not expected.
My preference for now is the first option one but I'm afraid of not seing the drawbacks of this approach. Does someone have any experience in importing manually the CSS and JS files the "old fashion way" in meteor ? What is the risk of such an approach compared to using the "place in folder to include" way of meteor ?