Integrating a bootstrap template into an angular project using angular components

Question

Since I am not a front-end developer and I am building a web app from scratch, I have downloaded a bootstrap template and tried to integrate it into a simple Angular project (generated by Angular CLI).
What I did is:
Copy the index.html file of the template in app.component.html:

app.component.html

<!DOCTYPE HTML>
<!--
    Parallelism by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
    <head>
        <title>Parallelism by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
    </head>
    <body class="is-preload">

        <!-- Wrapper -->
            <div id="wrapper">

                <!-- Main -->
                    <section id="main">

                        <!-- Items -->
                            <div class="items">

                                <div class="item intro span-2">
                                    <h1>Parallelism</h1>
                                    <p>A responsive portfolio site<br />
                                    template by HTML5 UP</p>
                                </div>

                                <article class="item thumb span-1">
                                    <h2>You really got me</h2>
                                    <a href="assets/images/fulls/01.jpg" class="image"><img src="assets/images/thumbs/01.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-2">
                                    <h2>Ad Infinitum</h2>
                                    <a href="assets/images/fulls/02.jpg" class="image"><img src="assets/images/thumbs/02.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-1">
                                    <h2>Different.</h2>
                                    <a href="assets/images/fulls/03.jpg" class="image"><img src="assets/images/thumbs/03.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-1">
                                    <h2>Elysium</h2>
                                    <a href="assets/images/fulls/04.jpg" class="image"><img src="assets/images/thumbs/04.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-3">
                                    <h2>Kingdom of the Wind</h2>
                                    <a href="assets/images/fulls/05.jpg" class="image"><img src="assets/images/thumbs/05.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-1">
                                    <h2>The Pursuit</h2>
                                    <a href="assets/images/fulls/06.jpg" class="image"><img src="assets/images/thumbs/06.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-2">
                                    <h2>Boundless</h2>
                                    <a href="assets/images/fulls/07.jpg" class="image"><img src="assets/images/thumbs/07.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-2">
                                    <h2>The Spectators</h2>
                                    <a href="assets/images/fulls/08.jpg" class="image"><img src="assets/images/thumbs/08.jpg" alt=""></a>
                                </article>

                            </div>

                        <!-- Items -->
                            <div class="items">

                                <article class="item thumb span-3"><h2>Kingdom of the Wind</h2><a href="assets/images/fulls/05.jpg" class="image"><img src="assets/images/thumbs/05.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>The Pursuit</h2><a href="assets/images/fulls/06.jpg" class="image"><img src="assets/images/thumbs/06.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>Boundless</h2><a href="assets/images/fulls/07.jpg" class="image"><img src="assets/images/thumbs/07.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>The Spectators</h2><a href="assets/images/fulls/08.jpg" class="image"><img src="assets/images/thumbs/08.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>You really got me</h2><a href="assets/images/fulls/01.jpg" class="image"><img src="assets/images/thumbs/01.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>Ad Infinitum</h2><a href="assets/images/fulls/02.jpg" class="image"><img src="assets/images/thumbs/02.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>Different.</h2><a href="assets/images/fulls/03.jpg" class="image"><img src="assets/images/thumbs/03.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>Kingdom of the Wind</h2><a href="assets/images/fulls/05.jpg" class="image"><img src="assets/images/thumbs/05.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>Elysium</h2><a href="assets/images/fulls/04.jpg" class="image"><img src="assets/images/thumbs/04.jpg" alt=""></a></article>

                            </div>

                    </section>

                <!-- Footer -->
                    <section id="footer">
                        <section>
                            <p>This is <strong>Parallelism</strong>, a responsive portfolio site template by <a href="http://html5up.net">HTML5 UP</a>. Free for personal
                            and commercial use under the <a href="http://html5up.net/license">Creative Commons Attribution</a> license.</p>
                        </section>
                        <section>
                            <ul class="icons">
                                <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                                <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                                <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                                <li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
                                <li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
                            </ul>
                            <ul class="copyright">
                                <li>&copy; Untitled</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
                            </ul>
                        </section>
                    </section>

            </div>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/jquery.poptrox.min.js"></script>
            <script src="assets/js/browser.min.js"></script>
            <script src="assets/js/breakpoints.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>

    </body>
</html>

And of course I have copied the assets of the template into the assets folder and modified the files paths.
This kindof works.
So here are my questions:

Can this way of integrating a bootstrap template cause errors?
Am I doing this the right way?
If not, would you care to tell me what I'm doing wrong?

Did you changed the path for the css file in the app.component.ts file — Lahiru Mirihagoda
– Lahiru Mirihagoda, Commented May 3, 2019 at 8:22

Swapnil · Accepted Answer · 2019-05-08 12:24:40Z

For Angular 2+, similar question is answered here

Yes it is possible but you will have to do 'some' tweaking.

Template

First of all import all your js script plug-ins through npm if they are available there.

npm install (plug-in name) --save

OR You can add those script js files in project and Then you will have to edit your angular.json to include js plug-ins (js & css) for example as below:

Update

"styles": ["styles.css", "assets/css/noscript.css"], "scripts":["assets/js/jquery.min.js","assets/js/jquery.poptrox.min.js","assets/js/browser.min.js","assets/js/breakpoints.min.js","assets/js/util.js","assets/js/main.js"],

Put the path to styles & scripts in to array

Then you should add main template css file in to predefined styles.css (You can add all your main.css contents in style.css which is automatically created while project creation)

Next you should break up your page(s) in to component(s) (view components and 'tag' components).

Now about custom app dev:

Add your custom - js in to .component.js - css in to .component.css - html in to .component.html

Update

Have a look at this, I've created a sample app with your template. You can edit it further.

Also, this line wasn't clear: "Then you should add main template css file in to predefined styles.css". Would you mind explaining it a bit more?
And, if it's possible to explain the difference between view components and tag components. That would be great
Updated the answer. In case your template is single page you really don't need to create unnecessary Components, you can add you inner html( div with id Wrapper) in app.html and get it working.
Do you mean I shouldn't add the header and footer part? Just the inner html?

Shashan Sooriyahetti · Accepted Answer · 2019-05-03 11:07:58Z

There are two ways to implement specifically,

Using ng-bootstrap (Ng-Bootstrap).
Create a new angular app. Just include bootstrap resource js file, css file and jquery on angular.json or index.html . Then you can just grab the needed html from bootstrap website and implement your solution.

If you are stuck anywhere I can help you :)

Hey I'm using very similar my own solution for my projects. (2nd way)

Answers to your questions,

You don't need to copy whole page. You can break into component when you import bootstrap resource into index.html. For example you can have a one header.componenet and one footer.componenet and a body.componenet so it is easier to maintain.
You are doing it slightly wrongly because you don't implement it in angular way.
answered above.

Hello Shashan, thanks for the answer. However, what I truly need is implement a ready-made template(it has index.html and assets files) into my angular project. Not build the template myself. It is already built. I just want to integrate it properly in my project.
@AhmedGhrib yo sorry. But still bro for the maintainability you have to get the ready made template and integrate it into your app in component wise. it is kind of building the template your self but without html coding. Only what you want to do is identify the components :)

THess · Accepted Answer · 2020-03-10 11:23:48Z

2

Here is a angular bootstrap starter code. It contains 3 layouts to start with. Built with latest angular and bootstrap.

Source code: Ready to use Angular Bootstrap Template

edited Mar 10, 2020 at 11:23

THess

1,0071 gold badge15 silver badges21 bronze badges

answered Mar 10, 2020 at 9:45

Atif

373 bronze badges

Collectives™ on Stack Overflow

Integrating a bootstrap template into an angular project using angular components

3 Answers 3

6 Comments

2 Comments

Comments

Linked

Hot Network Questions