Tl;dr
Just clone the workspace bellow and you are ready to go.
Angular 8, Sass and Bootstrap 4.x.x workspace
We love Stackblitz at Inflight IT. It helps us to easily create a workspace where we can put our experiments and, mainly, the firsts drafts of our sharable components and, since one of our projects uses AngularJS (8.x), scss and ng-bootstrap (with Bootstrap v4.x.x), we often need a workspace like this one to do some magic 🎩.
Let’s craft our hammer
1. Angular
First and foremost we create a new Angular workspace and there we have an Angular project set up for free 👌🏻
Stackblitz.com — start a new workspace
2. Scss
After creating a new Angular workspace, in order to add Scss we need to change all style files extension to [filename].scss — yes, it is as simple as that 😅.
⚠️ Don’t forget to change all the style imports — In a brand new Angular workspace you need to change app.component.ts and angular.json files.
app.component.ts
angular.json
3. ng-bootstrap
The following steps are exactly the same as those we have to do in a local set up: Install bootstrap NPM package, import the main module to AppModule and add Bootstrap style.
Install ng-bootstrap
Stackblitz has an in-browser NPM client that consists in a simple input where we can add NPM packages just by typing in the NPM package name.
Stackblitz — Dependencies section
Since we are using Angular 8x, make sure that ng-bootstrap@5.x.x is installed (dependencies table)
Import main module to NgModule
Just by following ng-bootstrap installation guide, add the following code to app.module.ts
app.module.ts — include main ng-bootstrap module
Import Bootstrap style
Finally, we include bootstrap.min.css in our index.html file and we are ready to go!
index.html — include bootstrap style
Time to give it a go!
Using this workspace, get a random component from ng-bootstrap components page, c&p the code and add it to app.component.ts.
Good coding :)
Comments