CODEWITHSUNDEEP
javascriptcssangulartwitter-bootstrap
Trajan
Trajan

Reputation: 1440

Adding Bootstrap Theme/Template to an Angular App

I have just created the Angular & Asp.Net Core template as provided in the Visual Studio 2017 wizard. I have then downloaded the following template (in the lite free version), https://graygrids.com/item/classix-bootstrap-html5-classified-ads-listing-job-portal-web-template/. However I am unsure as to what to do with the files I have downloaded. It consists of a folder called assets (containing css,js,...) and bunch of html files.

How does one integrate this template with Angular?

For more information see, https://github.com/gf1721/Directory-ListingWebApp.

For clarification I am not talking about Bootstrap CDNs.

I have looked on the internet but surprisingly there doesnt seem to be single source explaining how to integrate themes with Angular. Nor does this seem to be a trivial problem. Im really struggling on this one, thankfully I havent bought a template yet!

Thanks

Upvotes: 2

Views: 3143

Answers (1)

VivaLaPanda
VivaLaPanda

Reputation: 838

You can't just copy a bunch of non-Angular files and turn them into an Angular project.

The best route would be to start scaffolding the desired components/routing for your app and then copy the template code into the components by hand. This isn't really something you can automate, and how you decide to break the template into components will be a design decision you have to make. It's less a matter of adding the template to your project then rebuilding the template in Angular.

As far as basic code goes, just add whatever Javascript/CSS dependencies the template requires into Angular (either in index.html or using Angular CLI's script option). Just look up how to add Bootstrap 4 into an Angular Starter or CLI app and that should get you started.

Additionally, be aware that adding JQuery heavy interface elements to an Angular project isn't usually desirable since you are essentially using two orthogonal DOM manipulation systems. I'm not saying don't do it, but you may find that elements in the template don't play nice when you try to bind them or interact with them through Angular's DOM manipulation.

Upvotes: 2

Related Questions