Install bootstrap in your Angular 4 / 2 Project

Open CMD/Terminal

npm install --save bootstrap

In the Angular 2/4 folder structure you will find the angular-cli.json which is used for configuration, part of it as see below in the figure, the styles section which will be used to add the bootstrap.


When we did run the npm install bootstrap, it was added into the modules. Continue reading

Sublime text 3 – Angular 4 Snippet


As soon as i learned creating my first Angular 2 / 4 project, i thought to search for the best Angular 4/2 IDE and i found a lot but after testing all of them i enjoyed using Sublime text 3, i tried several snippets and plugins but this one was the best deal.

Angular2/4 Snippets for Sublime Text 3

This package provides snippets and completions for Angular2. Sublime Text uses fuzzy searching for snippets/completions, therefore you can trigger either without having to write out the whole trigger.


Package Control

Notice: submission to package control is still pending so 'Manual' install is the only option at this time.

  • Open the Command Palette (Ctrl + shift + p )
  • Install Packages
  • Search Angular2 Snippets

Source: Angular 2 Snippets

Angular? What? Why?

What is  Angular ?
Simply Angular is a JavaScript Framework which is amazing tool to create a Front End reactive Single Page website.
What is a Single Page Application?
More or less like you mobile application, everything you see in the same page and rendered in the browser, and whenever you need a data it's happened in the background without changing the page you are on.
How it's done?
Angular is changing the dom without the need to change the page.
Angular 2 vs Angular 4

  • Angular 1 was the first AngularJS and it was a great user experience.
  • Angular 2 was a rewrite and totally new and has nothing to do with Angular 1 , so if you don't know any of them then i don't advise you to learn Angular 1 and just jump to 2.
  • Angular 4 is not a complete rewrite but just some tweaks to Angular 2, Angular 3 was skipped for versioning conflicts.

Create your first Angular 4  / Angular 2 Project