Add Bootstrap sass(scss) to Angular 2


  1. Update .angular-cli.json ( which is in root folder of your Angular2 application) for
    1. “styleExt”: “css” to “styleExt”: “scss”
    2. “styles”: [
      ] to “styles”: [
  2. Update the styles.scss in src folder ( create if does not exist) for adding lines
    1. @import “./assets/bootstrap-sass/variables”;
      @import ‘../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap’;
  3. Install bootstrap sass module npm install –save bootstrap-sass
  4. Copy _variables.scss file from node_modules/bootstrap-sass/assets/stylesheets/bootstrap to src/assets/bootstrap-sass folder.
  5. (Optional) Update the above file src/assets/bootstrap-sass/_variables.scss for bootstrap customization.
  6. Run ng serve to compile the Angular2 application and see the changes in browser.




You may need to update src/assets/bootstrap-sass/_variables.scss for fonts path,


$icon-font-path: if($bootstrap-sass-asset-helper, “bootstrap/”, “../fonts/bootstrap/”) !default;


$icon-font-path: if($bootstrap-sass-asset-helper, “bootstrap/”, “../node_modules/bootstrap-sass/assets/fonts/bootstrap/”) !default;



Getting Started with Angular2 and Bootstrap

Getting Started with Angular2 and Bootstrap

# Install Angular2 Cli
npm install -g @angular/cli

# Create new application
ng new application-name

# Start serving application, see browser localhost:4200
ng serve

# In src directory, install bootstrap using bower
bower install bootstrap –save

# Link bootstrap style to application, edit .angular-cli.json
# add new element to app->styles array

# Stop and again start serving the application and it is ready!

JavaScript “this” at simplest level

In JavaScript “this” thing confuses the beginners as well as experienced ones sometimes. There is lot of stuff on Internet (may be like this one) and almost each book on JavaScript emphasizes on explaining “this“.

Here lets go through very simplest definition (though informal one) which can help us in understanding “this“.

this” is a reference to object to which enclosing method belongs and if there is no enclosing method “this” is global object “window“.


1. In global context, without enclosing function
// window….

Here “this” is in global context hence simply it is nothing but reference to “window” object.
2. In global context, within enclosing function

function foo(){

// window

Here “this” is in enclosing function which belongs to global object “window” (you can call here),
hence here “this” is “window”.


3. In enclosing function which is method of some object.

var foo = {
    bar: function (){
// foo

Here “this” is in enclosing function “bar” which belongs to object “foo”, hence “this” is a reference to “foo” object.


4. Another varient of #3, but with one more level of nesting

var person = {
    name: “Sachin”,
    showName: function () { console.log(; },
    employee: {
        name: “Web Develoepr Sachin”,
        showName: function () { console.log(;}

// Sachin

// Web Developer Sachin

Even if this example shows nesting here, but if we simply follow our informal defination “person.showName” method’s “this” is “person” object and “person.employee.showName” method’s “this” is “employee” object.


Let me know your comments.

Happy coding 🙂

Javascript string functions

Knowing string functions is always useful and saves time to Google the correct function. Hence I have prepared list of most useful, usually used string functions.

First of all definition of String

In computer programming, a string is traditionally a sequence of characters, either as a literal constant or as some kind of variable.

In JavaScript context it inherits prototype of String object.
A string can be any text inside double or single quotes.

List of almost all kinds of string manipulations.

Creating a String:
var name = new String (“sachin”)
Or simply
var name = “sachin”

Changing a String
replace replaces first occurrence only.

Change case

// Custom title case function

var fullName = name + ” ” + “Gaikwad”
var fullName = name.concat(” Gaikwad”)

Stuff String or Char
// No direct method to stuff string/char in string

Stat- counting


name.split(” “).length

Char at position
name.charAt(0) //s

Check Substring
name.includes(“chi”) // true

Get first occurrence index or last occurrence index of other string resp.

Extract another string 
name.slice(2) // chin

Trim whitespace
name.trim() // removes whitespace ” sachin ” to “sachin”


Export/Import from/to other data type

name.split(” “) // gives array
nameArray.join() // gives string

parseInt(“123”)// string to integer
parseFloat(“12.3”) // string to float
“”+123 // number to string