StackBlitz: A simple Angular, scss and ng-bootstrap setup

Atualizado: Jun 16


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 😅.


https://github.com/stackblitz/core/issues/1


⚠️ 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 :)