Angular 4 tutorial -- Words (821)

Angular 4 tutorial

Angular 4 is available and comes with many improvements and new features such as .

  • Size and performance

    Angular 4 apps are smaller by hundreds of kilobytes ,thanks to improvements to the View Engine which have reduced the size of generated components code by around 60% .

    The Animations are no longer part of Angular core which means that the apps which don't use them don't include the extra code in their final bundles .You can use animations in your apps by using BrowserAnimationsModule which can be imported from @angular/platform-browser/animations.

  • Improved *ngIf and *ngFor

    *ngIf now supports the else syntax ,for example It is easy now to write templates in this way

    <div *ngIf="ready ; else loading">
    <p>Hello Angular 4</p>
    <ng-template #loading>Still loading</ng-template> 

    If ready variable is false Angular will show the loading template.

    You can also assign and use local variables inside both *ngIf and *ngFor expressions ,for example

    <div *ngFor="let el of list as users; " >
        { { el } }

  • Adoption of Angular universal as part of Angular

    The Angular team has adopted Angular Universal which is a community driven project that allows developers to use server side rendering for Angular apps .It is available from @angular/platform-server.

You can find more changes on :

Angular 4.0.0 now available official Angular blog post

Angular 4.1.0 now available official Angular blog post

Getting started with Angular 4

You have many options if you want to get started with Angular 4 ,you can either install it by hand ,use the Angular 4 CLI or upgrade from an existing Angular 2 project depending on your needs .

But before that ,lets first check the dependencies you need to have .Just like Angular 2 you need to have both Node.js and NPM installed on your machine .So go ahead open your terminal and type the following

node -v

If you get the version of an installed Node.js then you already have the platform installed .If the command is unknown by your terminal then you need to install Node.js .

Installing Node.js is easy and straightforward ,you just need to visit their official website

Grab the installer for your operating system and follow the instructions .

You don't have to install NPM or Node Package Manager separately ,it will be installed with Node.js

Now if you reopen your terminal under Linux/MAC or command prompt under Windows and execute

node -v 

You should get an output displaying your Node.js installed version

Updating to Angular 4 from Angular 2

If you have already an Angular 2 project and want to update it to Angular 4 ,you can do it simply by installing a few npm packages .

On Windows

Just copy and paste the following command in your prompt

npm install @[email protected] @[email protected] @[email protected] @[email protected] @[email protected] @[email protected] @[email protected] @[email protected] @[email protected] @[email protected] @[email protected] [email protected] --save

On Linux and MAC

Copy and execute this on your terminal

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,[email protected] [email protected] --save

Installing the Angular CLI

The Angular CLI is a handy command line utility built by the Angular team to easily and quickly generate new Angular apps and serve them locally .It can also be used to generate diffrent Angular constructs such as components , services ,pipes etc .

Before you can use the Angular CLI ,you need to install it via npm ,so go ahead open your terminal or command prompt and enter :

npm install -g @angular/cli

To check the version of your installed Angular CLI ,type

ng -v
You can also run ng -v from inside an Angular project to get the version of used Angular

Generating an Angular 4 project/app using the CLI

Using the CLI ,you can generate an Angular 4 project with a few commands ,the CLI will take care of generating the project files and install all required dependencies .

Open your terminal or command prompt and run

ng new angular4-project 

After finishing installation .

cd angular4-project 
ng serve 

Your project will be served locally from http://localhost:4200.

Generating an Angular 4 from GitHub repository

You can also clone a quickstart Angular project from GitHub to generate a new Angular 4 project

git clone  my-proj
cd my-proj
npm install
npm start

You can find more information here


We have seen different ways to create a new Angular 4 project or updating an existing Angular 2 project to version 4 .

See you on the next Angular 4 tutorial

mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.