Create your account

Already have an account? Login here

Create account

Angular 2 Templates & Integrating Foundation & Bootstrap

By Gary simon - Oct 25, 2016

In this tutorial, we're going to walk through some basic templating concepts in Angular 2, as well as how to integrate CSS frameworks such as Foundation and Bootstrap.

But first, if you prefer watching videos, you can check out our video specifically on this topic:

Angular 2 with Preprocessors (SASS, Stylus, Less)

The Angular 2 Client (angular-cli) allows you to add a --style= option at the end of the ng new command. This allows you to crank out a new Angular 2 project ready to go with your favorite css preprocessor. Here's what the command looks like:

ng new project-title --style=scss

Note: You can use --style=scss or sass, less, or styl for stylus.

Templating Basics

Your HTML and CSS are defined within the @Component decorator within the component file. There are two ways in which you can specify both HTML and CSS.

Below, you can use the property templateUrl for HTML and styleUrls for CSS to define the location of an external HTML and CSS file:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

You can however choose to write the HTML and CSS inline, within the @Component decorator meta data with the property template for HTML, and styles for CSS:

@Component({
  selector: 'app-root',
  template: '<p>My HTML Here!</p>',
  styles: ['p { font-weight: strong; }']
})

If you wish to write multi-line HTML and / or CSS, you must change the single quotes ('') to backticks (``):

@Component({
  selector: 'app-root',
  template: `
  <p>My HTML Here!</p>
  <div>More HTML here!</p>
  `,
  styles: [`
  p { font-weight: strong; }
  body { background: #000; }
  `]
})

When should you use inline HTML and CSS?

Generally speaking, if your component only requires minimal HTML or CSS, it's best to use inline within the component decorator as it increases speed because it doesn't require loading an external file.

If your component consists of a lot of HTML or CSS, it's best to delegate that coding in separate files.

 

Integrating CSS Frameworks through Hosted CDN's

A quick and easy method of integrating CSS frameworks like Bootstrap or Foundation is to simply link to a hosted version of the framework within the <head> tags of the index.html file located in the app folder. 

For Bootstrap CDN, you can use:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

For Foundation CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation-flex.css">

 

Hosting CSS Frameworks within an Angular 2 Project

For both Foundation and Bootstrap, you can use the npm to install node packages that contain the files to these frameworks.

For Bootstrap the npm command to run in the project folder is via the command line is:

npm install bootstrap@next --save

 Then in the angular-cli.json file located in project root folder, add:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.scss"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

And that's it!  You can now write bootstrap-specific HTML.

 

For Foundation the npm command to install it via the command line is:

npm install foundation-sites --save

Then, in angular-cli.json:

"styles": [
   "../node_modules/foundation-sites/dist/foundation-flex.css",
   "styles.scss"
],
"scripts": [
   "../node_modules/foundation-sites/vendor/jquery/dist/jquery.min.js",
   "../node_modules/foundation-sites/dist/foundation.min.js"
],

And that's it as well! You can now start writing Foundation-specific HTML.


Share this post




Say something about this awesome post!