Create the Project

The first step is to create a new Angular project using the New Angular Project wizard. To get started, select File>New>Angular Project. Type in a name for the project, and then click Finish to accept the default settings. The Angular IDE sets up a new project using the angular-cli.

See the Angular App in Action

After the project has been created, the project is listed in the Servers view. Let’s launch the Angular dev server. Yes, we could code more in the project first, but let’s dive in and see the application come up—because yes, it’ll actually update as you start to code it.

To start the server, go to the Servers view and expand Angular CLI. Select the project you created and click the Start button . A new tab opens in the Terminal+ view running “ng serve”. For more information on how Angular 2 applications run, see the Running the Angular Server.

Create a Random Words Component

To show a random word, you will first need to create a component that will display it. To create the component, select New>Angular>Component. The component is created in the app directory of your project.

Let’s create a component named RandomWords.

Once created, you’ll need to replace the contents of the component (src/app/random-words/random-words.component.ts) with the following source:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-random-words',
  templateUrl: './random-words.component.html',
  styleUrls: ['./random-words.component.css']
})
export class RandomWordsComponent implements OnInit {
  @Input() words: Array<string>;
 
  constructor() {}

  ngOnInit() {
  }
}

Note: @Input() words: Array<string>; means that the component accepts an array of string that can be set through “words” input property, we will come back to this later.

Then set the content of src/app/random-words/random-words.component.html to the following:

<ul>
  <li *ngFor="let word of words">{{word}}</li>
</ul>

This will render a list with the content of the “words” property defined in random-words.component.ts. The ngFor directive is used to iterate through the items, in our case the “words” property. The current item in the iterable is being referenced by using “word”. We use {{word}} to print out the contents of “word”.

Update the Application to Show Some Words

AppComponent will be in charge of feeding the random words (through randomWords property) to RandomWordsComponent. For now let’s just use “hello” and “world”.

Replace or update the src/app/app.component.ts file to define some random words. Later you’ll update this to use a web service to get legitimately random words.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Random Words!';
  randomWords = ['hello', 'world'];
}

Now, let’s tell Angular to render the new RandomWords component and pass a set of words to that component that we defined above. Make the following changes to src/app/app.component.html:

<h1>
  {{title}}
</h1>

<app-random-words [words]="randomWords"></app-random-words>

Take a look at your browser! If everything was done correctly, you should now see hello and world shown for your application automatically. Congratulations, you’ve integrated your first component.

Get Random Words from a Web Service

OK, let’s make it interesting. You’ll now update the display of random words to come from a remote web service instead of hard coding it.

To begin, you’ll need to create a new service using the New>Angular>Service wizard. For more information, see Creating an Angular Service. Then, replace the contents in src/app/services/random-word.service.ts with the definition below:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';

const SERVICE_URL = 'http://www.setgetgo.com/randomword/get.php';

@Injectable()
export class RandomWordService {

  constructor(private http: Http) { }

  getNew(): Observable<string> {
	return this.http.get(SERVICE_URL)
  	.map((response: Response) => response.text()); 	 
  }
}

Once created, you can then consume the service inside your AppComponent allowing dynamic generation of words loaded from the web service. Make the following changes to src/app/app.component.ts:

import { Component } from '@angular/core';
import { RandomWordService } from './services/random-word.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [RandomWordService],
})
export class AppComponent {
  title = 'Random Words!';
  randomWords = [];

  constructor(private randomWordsService: RandomWordService) {}
 
  getNewRandomWord() {
	this.randomWordsService.getNew().subscribe((word) => {
  	this.randomWords.push(word);
	});
   }
}

Let’s add a button that will trigger the service to get a new random word and add it to the list, we need to update src/app/app.component.html with the following:

<h1>
  {{title}}
</h1>

<button (click)="getNewRandomWord()">Get New Random Word</button>

<app-random-words [words]="randomWords"></app-random-words>

However, before this will all work, the NgModule will need to be updated for the application to allow everything to work together. Update src/app/app.module.ts with the following code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import 'rxjs/add/operator/map';

import { AppComponent } from './app.component';
import { RandomWordsComponent } from './random-words/random-words.component';

@NgModule({
  declarations: [
	AppComponent,
	RandomWordsComponent
  ],
  imports: [
	BrowserModule,
	FormsModule,
	HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And that’s it! If you followed all the steps correctly, you’ll now have up an application that will show random words.