To make an Angular 4 development easier and faster we use an Angular 4 command-line interface or Angular-CLI. The Angular 4 CLI is a great feature that made by official Angular developers. An interesting thing in this new Angular 4 is smaller and faster bundle and the new feature on "*ngIf". That's the feature that we will try in this getting started tutorial.

Table of Contents:

Let's the journey begin.



Install Angular CLI

For making quick Angular 4 development, we will use Angular CLI. Before you start to install Angular CLI, make sure you have installed the latest Node.js on your machine. After that, open terminal or Node command line then type this command.

sudo npm install -g @angular/cli

You will see a message like below if installation successfully.

To view available CLI commands type this.

ng help

And this is the useful command that will make development faster.

Scaffold Usage Component ng g component my-new-component Directive ng g directive my-new-directive Pipe ng g pipe my-new-pipe Service ng g service my-new-service Class ng g class my-new-class Guard ng g guard my-new-guard Interface ng g interface my-new-interface Enum ng g enum my-new-enum Module ng g module my-module



Create New Angular 4 Project

To generate a new Angular 4 Project, go to your projects folder then type this command.

ng new angular-app

That command will generate an Angular 4 project and install NPM packages, so wait for minutes. Now, type this command to run the Angular 4 application.

npm start

or

ng serve -o

It will open the browser automatically then go to this URL http://localhost:4200. You should see this in the browser.

Now, open or view file package.json from the root of the project folder. You will see Angular 4.0.0 and Typescript 2.2.1 dependencies.



Generate Angular 4 Component

To generate an Angular 4 component, type this command.

ng g component cities

Open and edit file src/app/cities/cities.component.ts then add an array of cities below the Class name.

cityList = [ { city_name: "Bandung", prov_name: "Jawa Barat" }, { city_name: "Jakarta", prov_name: "DKI Jakarta" }, { city_name: "Surabaya", prov_name: "Jawa Timur" }, { city_name: "Yogyakarta", prov_name: "DI Yogyakarta" }, { city_name: "Semarang", prov_name: "Jawa Tengah" }, { city_name: "Medan", prov_name: "Sumatera Utara" }, { city_name: "Tangerang", prov_name: "Banten" }, { city_name: "Denpasar", prov_name: "Bali" }, { city_name: "Makasar", prov_name: "Sulawesi Selatan" }];

Open and edit src/app/cities/cities.component.html then add these lines of City List iteration and displayed as a list in the Angular template.

<ul *ngIf="cityList.length>0; else loading"> <li *ngFor="let city of cityList"> {{ city.city_name }} - {{ city.prov_name }} </li> </ul> <ng-template #loading>No cities found</ng-template>

There's nothing special compared with Angular 2 except *ngIf has 'else' statement which points to the template with the text "No cities found" that will show if cities have no value.



Create An Angular Router for The New Component

To make the new component accessible, we have to make routing for it. Open and edit src/app/app.module.ts the add this import of Angular RouterModule.

import { RouterModule } from '@angular/router';

Now, create the route for cities component inside @NgModule imports section.

imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot([ { path: '', redirectTo: 'cities', pathMatch: 'full' }, { path: 'cities', component: CitiesComponent } ]) ],

Next, replace all tags in src/app/app.component.html with this Angular <router-outlet> tag.

<router-outlet></router-outlet>

Finally, run this app and see the result on the browser.

This tutorial is experimental, don't try it yet in the production app.

If you don’t want to waste your time design your own front-end or your budget to spend by hiring a web designer then Angular Templates is the best place to go. So, speed up your front-end web development with premium Angular templates. Choose your template for your front-end project here.

That just the basic. If you need more deep learning about MEAN Stack, Angular, and Node.js, you can take the following cheap course:

Thanks!