top of page

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

Atualizado: 16 de jun. de 2021


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 👌🏻 — 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.



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


bottom of page