Angular 4 Popup Window Example

Angular 4 Popup Window

In this Angular modal tutorial we will be creating Angular 4 popup window modal by creating a button which will trigger the popup window function.

First open CMD and run:

npm install ng2-opd-popup


import {PopupModule} from 'ng2-opd-popup'

Continue reading

Angular 4 HTTP Get Example

Angular HTTP Service

In this tutorial i will be showing you how to create a simple text input which will accept a city name, then it will request the weather of that city from OpenWeatherMap free API service.

Angular 4 HTTP Get Example

Click here if you prefer the Angular HTTP get example video tutorial.

Perquisites: Continue reading

Angular 4 Structure

Angular 4 Structure/Architecture

Angular 4 Structure

In Angular 4 structure section we will take a look on Angular 4 main structure, i will be trying to give a simple definition for each.

Angular 4 Application

Angular 4 consists of  Components, Services, Modules, Directives, and Dependency injection let us now take a look on each. Continue reading

What is Angular 4 Service and How to Use it

How to Create Service in Angular 4

How to Create a Service in Angular 4

What is Angular 4 Service and How to Install and Use the Service.

If you did not create your first Angular 4 project yet you can check click here to learn how to create Angular project.

What is Angular Service

While creating an application you will have piece of code or method that you want to use and call in a different places, instead of repeating it you can insert it in a new reusable file which called service and call it 'inject it ' from different components whenever needed by importing it at the beginning of the code. Continue reading

What Are Components in Angular 4

What Are Components in Angular 4

Components are the main magic feature which Angular has, imagine it that way, you have a website or web application which is a single page application, it starts with a single page which has the main component \ but from there you can have each part of this site loaded from different component which includes different (script and html).

Components live in /src/app, components are structures by thre main parts

Angular 4 Components
#1 Import section is where you import the needed component from angular, so some components will have dozens of imports needed as a dependency fo used code.
#2 The decorator as in that figure it starts with @component which that is the part that defines it as a component, then there are several properties for that component, in that figure example the selector is showing the name of the component while templateUrl and styleUrls showing both the html and css which wll be connected to that component.
In that section you can add other properties too which we will be discussing in later articles.

#3 This is the main class which holds all the functions and code needed for that component.

Click here to learn how to create Angular 4 components.


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

Simple page binding in Angular 4

Angular 4 Binding

In this tutorial i will show you how to make a simple Angular 4 binding.




After creating your Angular 4 / Angular 2 project , you will have the folders/files structure, simply add the following in each file for binding.

app.component.html , notice how below the [(ngModel)] directive is used.

<input type="text" [(ngModel)]="pageTitle">

Continue reading