Introduction
Copying and pasting a template to the project is easier but in the long run it can be trouble some since we have components like the nav bar and the footer sometimes forms and buttons that we have to reuse throughout the project so in this I’m going to talk about how to integrate a bootstrap web template to your angular project by breaking it to components.
Create /Start a new Angular Project
Install Angular CLI and using the following code in the command line where you have decided to create the angular project.
npm install -g @angular/cli
Then Create a new angular project by executing this code in the cmd
(note: when you execute the following code, you will ask a few questions regarding the project that you are about to create like enabling routing, SCSS or CSS things like that choose your preference).
ng new angular-test
to launch the newly created project, go to the newly created project folder by using cd {Project Name} and then execute the following code.
ng serve –open or ng serve
When you launch the angular app for the first time it will look like this,
Structure
Initially it looks like this,
Above is the look of the file structure that we have to preserve and use according to our need
All the file we edit and add are inside the src folder, inside the src folder we have three main folders app, assets, environment. All the components and pages are created inside the app folder while all the assets required for the project such as CSS files JavaScript files images goes inside the assets folder.
For this tutorial, we have to create a separate folder for pages and modules in the app folder.
Download a Bootstrap template
Next we will be downloading a bootstrap template to integrate with our angular app.For this go to www.startbootstrap.com or any preferred site to download your website template and for this example, I use the freelancer template from startbootstrap.
This site looks to be really simple one-page website but if it happens to redirect you to another part of the same website, we need to have the essential components to go back or navigate to other parts of the website hence the use components.
Creating folders and components
Creating folders won’t take any effort whatsoever right click on the app folder and add new folder naming pages and modules separately after that as the home page suggested we need to create components with and without routing as in for pages we need routing and for modules we don’t need routing we just have to import it and use.
We use the above code to generate components but to create components inside the pages and modules separately
Or
ng g c {component name}
where,
c – component
g – generate
We use the above code to generate components but to create components inside the pages and modules separately.
For this project I created components for header and footer as follows
Adding the assets to the project
Copy the assets folders from the bootstrap template to the assets folder of the project to import the styles and images from the template to the angular app.
After copying the folder to the app simply import the CSS and JavaScript as mentioned below
(Note: you should change the location mentioned in the imported files according to the location else the styles and scripts won’t get applied)
And run the project again to see if the imported styles are working such as styles
Adding the html to the respective components
Add the <nav></nav> part to the header.html file as shown below
And add the footer content to the footer component as follows
(from <footer> to </footer>)
In this case we have another section below that so I added that to the footer as well
Upon saving the files add the content to the app.component.html file as follows
After adding all the components save it and launch the project using
ng serve –open
output looks like this
(Note: the header and footer are together because we didn’t add any content to show in between so once we add the page contents in between the header and the footer this will look like a normal web page.)
And that’s how you add the header and footer to an angular app as components you can use these components thought out the project without a hassle and it also a good practice to use repetitive objects of a site as components, if a change is to made to such object you just have to edit only one file which is the original component.