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

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

Inflight IT

Inflight IT is a team of experts and enthusiasts on…

Thanks to César Cardoso

Nuno Rocha de Sousa

Written by

Being developer and tech consultant I am responsible for taking the projects through the right direction and bring the most significant talents to the team.

Inflight IT

Inflight IT is a team of experts and enthusiasts on software development and user experience design. We are a team ready to create and transform digital systems to an user experience centric approach. We design and develop for people.

Nuno Rocha de Sousa

Written by

Being developer and tech consultant I am responsible for taking the projects through the right direction and bring the most significant talents to the team.

Inflight IT

Inflight IT is a team of experts and enthusiasts on software development and user experience design. We are a team ready to create and transform digital systems to an user experience centric approach. We design and develop for people.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store