This weekend, I decided to give Angular 4.0 a try. I was very happy when I managed to create a rudimentary Reddit client with it in less than 15 minutes. Yes, I was able to effortlessly create a new component, a new service that can asynchronously fetch and process Reddit’s JSON data, and use both together in my app. In this tutorial, I show you how I did that.
To avoid weird errors, I suggest you use recent versions of both node and npm. I used npm v4.1.2, and node v7.7.4.
Without the CLI, working with Angular 4 is extremely hard. Therefore, the first thing you do is install it using npm.
We can now use the CLI to create a fully-configured Angular 4 project.
The above command might take several minutes to complete. The resulting project will be about 198 MB. Yes, that’s a lot of bytes for a blank project, but let’s ignore that detail for now.
Enter the project’s directory and run the app to make sure that it is configured correctly.
If everything’s okay, you should see a new browser window open and display a page with a short message.
Let us now create a new component that lists the hot posts from a specified subreddit. A component, as you might already know, usually has its own directory containing an HTML file, a TypeScript file, and a CSS file.
Using the CLI, you can create all those files with a single command:
The generated component is ready to be used, without any configuration changes. So, go to src/app/app.component.html and add the following line to it:
As you can see, by default, the component’s tag will have an app- prefix. It also has an an attribute called
subreddit, specifying the name of the subreddit it should display.
Additionally, give a more appropriate title to the page by opening app.component.ts, and changing the value of the
Your page should now look like this:
To be able to receive the value of the
subreddit attribute in your TypeScript code, add a field to the
MyRedditComponent class using the
Our rudimentary Reddit client will simply display the titles of posts, along with URLs. Therefore, let us now create a TypeScript class that can store the two values.
Create a new file called post.ts and add the following code to it:
To fetch data from Reddit’s servers asynchronously, we need a service. To create one, you can use the CLI.
You can now open my-data.service.ts and start adding your code to it. First, import the
Jsonp class because we’ll be using it to fetch Reddit’s data. We’ll also need the
Observable class for the asynchronous processing, and
map to process the result of the observable. Lastly, import the
Next, you can use dependency injection to initialize a
To actually fetch the data, create a new method called
fetchPosts(). Let it take the name of a subreddit as an argument, and let its return value be an
Observable of type
Inside the method, you can call the
get() method of the
Jsonp instance and pass a Reddit API URL to it. The URL must, of course, include the subreddit. It must also have a
jsonp parameter whose value is set to
You can attach the
map() function to the output of
get() and parse the JSON data returned by Reddit’s servers. For now, we’ll just loop through the
children array of the JSON data, and extract the post titles and URLs. We’ll, obviously, use those to populate
Post instances. Accordingly, add the following code:
Note that we can use the
json() function to convert the JSON string to a JS object.
Our service is now ready. However, it can’t be used until you also add
JsonpModule to your app module’s imports. Therefore, open
app.module.ts, and inside the
imports array, add
JsonpModule. After doing so, the array should look like this:
We’ll be using the service inside the
my-reddit component. Therefore, open my-reddit.component.ts and import the service, along with the
MyDataService as one of the
providers of the component. Additionally, use dependency injection to initialize an instance of the service. Also add an array of
Post objects as a member variable of the class. After all those changes, your class should look like this:
ngOnInit() method, just add a call to the
fetchPosts() method, subscribe to its observable, and assign its return value to the
posts member variable.
Finally, modify the HTML file associated with the component to actually display the contents of the
posts variable. Make sure you use the
*ngFor directive to loop through the posts.
If you go to your browser now, you should be able to see the posts from Reddit.
You now know how to use Angular 4. It was easier than you expected, wasn’t it?