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:
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=scssNote: You can use --style=scss or sass, less, or styl for stylus.
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; }
`]
})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.
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">By the way, check out our new Free Bootstrap 4 Course!
For Foundation CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation-flex.css">
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 --saveThen 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 --saveThen, 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.
