Angular 4 tutorial – Make Angular 4 app using GitHub API

Angular 4 is here for some time. It is a good time to enhance your skills on angular 4. I find myself more powerful while using angular 4. You should know that there are not many differences between angular 2 and angular 4. So anything I will discuss here would work with angular 2. You probably know the angular team is aiming to call angular 4 or angular 2 is as just Angular. Let’s get started by knowing what we are going to build now. I will try to be as detailed as possible.

amgualr 4 tutorial step by step guide

So-called Angular 4 Tutorial

I would like to be true to you. Any tutorial is boring if it is discussing something. You will read the code but you will never gain confidence unless you build something practical with it. So I choose to build one practical web application  using angular 4.  The full source code is available on GitHub. You should first open the demo and play with it. In this web application, you can search developers in your city and also search developers on the basis of their working programming languages. It is a tiny app. We will also be using GitHub API. I chose GitHub API because here we do not need to have any secret API keys to make calls. So It is open. Angular 4 applications may have their own backend. Probably you will have your own backend. If you wish to make one backend for yourself you may learn from here. 

Prerequisites

You should have following things installed on your development machine. You must have the latest version of them.

Visit the respective links and install them. If you never tried typescript, do not be afraid, it is a good time to start with it. I will recommend you to use one good text editor with a typescript plugin installed. I am using atom with typescript plugin.

Here is one screenshot of the finished application.

angular 4 tutorial

Create the Angular 4 Application using Angular CLI

You can create angular 4 application without angular CLI. But It would be much painful to get started. There is a lot of things need to setup for a perfect development workflow. So I recommend you to use angular CLI. It makes your life easy. You can create a new angular 4 application running the following command.

You will notice that angular CLI generated a lot of files and folder structure. It will also install packages from the npm registry. If you have installed yarn as your package manager for nodejs, angular CLI will use it to download node packages.

You if see this line printed on the console  Project 'angular4-search-devs' successfully created. , then you are ready to serve the project. Just change directory to it and do  npm start . It will internally run  ng serve. Now if you go to localhost:4200, you should see “app works!”. This means you have successfully configured the angular 4 application.

If you would like to change the port  you can do that too via

Keep this server going in this console and open this project in another terminal. Now It is a good time to understand the angular 4 project structure.

Angular CLI generated project structure for Angular 4

I will not go to the detailed analysis of what each file does. But I would like to speak about the most important ones. Most of us we will spend a significant amount of time in the src/app folder. This folder contains codes for angular 4 components, services, modules, directives etc. tsconfig files acts as a configuration files for the typescript compiler.

From where this “app works!” coming

If you open src/app/app.component.ts , you will see like

As you can see that there is a property defined title which holds the value “app works” now if you see the src/app/app.component.html

So now you see that in this pair of curly braces angular is emitting the value of the title. Any angular 4 application must have one angular module. In our case, we have our module present at src/app/app.module.ts This file is one of the most important parts of our application. You can think of it as the heart of our web application. It holds all the imports and declarations. Actually, angular needs one angular module to be passed in the src/main.ts. main.ts actually bootstraps the entire application and loads in our Html.

Now let’s see the code for src/app/app.module.ts

As you can see, We are requiring our AppComponent and declaring it in the @NgModule. @NgModule is called a decorator in typescript. It basically holds the metadata for the following class. We are also instructing Angular to boot up AppComponent as our root component in the bootstrap field of the @NgModule decorator. Any new component we will write must be imported here and must be declared in the declarations array. If we write any services, it will go into the providers array.

Creating Our First Angular 4 Component via Angular CLI

Here we are creating serach-users component. Now open the src/app/app.component.html and replace everything with the following

Check your browser. It should show search-users works. Let’s add bootstarp3’s style sheet in our web app. We can do it via three way

1. adding the CSS file into the assets folder and link it in the src/index.html

2. directly pulling from the CDN and link it in the src/index.html

3. paste your bootstrap’s CSS code in the src/styles.css. This CSS would be available for all the components.

I chose the last option. There is one small advantage to it. We do not need to manually manipulate the index.html. Webpack will automatically include this styles.css.

We will start from extremely basic work. Your angular 4 project should now look like below

Now open src/app/search-users/search-users.component.html and paste the following code

There is nothing fancy. We just have two input boxes and one button to search. The best part of it that it is clean and blank. We will write our logic in our search-users component at  src/app/search-users/search-users.component.ts file. But you may wonder how will we refer the value of the two input boxes.

To get the value from the input boxes in an angular 4 component, you can use  #property to refer to that input box. So now our HTML should look like

Now open your component typescript file and let’s write our search method which will communicate with the backend via angular 4 services (we will write service in a while).

We can use this search method on the click event of our search button. We can do that using (click) attribute on the button element.

Yes, we need to pass the value property of the referenced input fields. Now if we go to the browser and write something in the input box and click on the button, we can see that in the dev console. That is cool.

Writing angular 4 service – GET request with HTTP service

It is time to communicate with the GitHub API via angular 4 services. We will use angular’s HTTP service to make one GET request to the GitHub’s API. We also use RxJS to use the newest hot topic that is Observables. You can use angular’s CLI to generate the basic code for our service.

Before writing the service, few things you must know. Any service you write, you must put a @Injectable() decorator to it. With this decorator, we are describing that this class can be injected to other classes constructor or simply other component class can use it without creating a new instance of the service class.

Any service we write, we must need to declare it at as providers in the app.module.ts file.

Do not be afraid, it is easy to write and use services for angular 4. We can generate the code for angular 4 services via

Now open app.module.ts file and replace the existing the code with the below one.

Now are ready to go for writing code for search-users service. We will have two basic public methods.

One method is to search users via place & programming language and one would be to get the details for one user. You may see the GitHub API guide to find more interesting end points.

Oohoo! That’s a lot of code. Okay, I will try to explain all of that. As I mentioned earlier, we have two public methods. There we are using angular’s HTTP service. The great part of it that it returns observable streams. To use them, we need to subscribe to those streams. That way we would consume the service data in our angular 4 component.

We are also bringing two operators (map and catch) from the RxJs library. In the map method, we convert our response object into a JSON object. Angular’s HTTP service basically tries to mimic the API of latest HTML5 Fetch. The rest of the code is self-explanatory.

Inject the service into the Angular 4 Component

Here we will be using search-users service into our component. First, we will require the service in the serach-users.component.ts then will inject it into our component class through the constructor.

As you can see we have passed the service through our constructor. With  this.serachService we can access our service’s public methods. Our component’s markup yet not ready to show the search results. Let’s first prepare them and then call our service from the search method. We will also clear the input fields when we hit enter and click on search. 

We will also loop through the results using *ngFor and We are also calling the search method when someone hit enters in either of the input boxes. For that, we are using  (keyup.enter). The class variable results is yet not declared. We will declare it in a while and will assign the data coming from the service to it.

Now open the search-users.component.ts file, and let’s declare some of the required class variables.

It’s time to consume the service in the search method. As I mentioned earlier that we will subscribe to the Observables. The first parameter is the result and the second param of the subscribe method gives the error.  We are only calling the service only if any of the two arguments of the search method is provided by the user. Otherwise, it doesn’t make any sense to call the search service. Now if you open the browser then you should see it working.

Now our basic functionality of the app is ready. Yahoo!

We will make our each result clickable and will fetch the details of that clicked item using the second method of the search service. I have also added the few bootstrap styles to angular 4 component to make it look good. You need to paste some CSS code in your src/app/search-users/search-users.component.css from here. Yes, no way I am going to paste css here. :p

 

Please go through the above code. We can show or hide a specific dom via *ngIf and We can also use [ngClass] to add or remove any class from a specific DOM element. We will only show the details of a user only if  results.length && selected comes truthy.

We are also appending click listener on each result via

While looping through the results array, we have the present iterating object stored into the user variable. If you have observed properly the GitHub API, user.login provides the username of the user.

So let’s create this getDetails method in our component class.

Now if you click a single user you can also view the details. How to hide this details pane? Just toggle the selected variable as we are doing here

I hope you learned the basics of Angular 4 and how to use them. If you have any questions or doubt or if you find any bug, please let me know in the comment box below. Have a nice day. You can also add more feature to it and make a Pull request. The link to the source code can be found on the GitHub. 

 

Thanks for spending time here. I am Sandeep Acharya. You can also check out how to make backend application in nodejs from here.

Time Pass Link: Few Conole Tricks You should know.

16 thoughts on “Angular 4 tutorial – Make Angular 4 app using GitHub API

  1. Hello,
    thanks for the great tutorial. I am unable to get the same structure
    for my project. Whenever I create project it is directly categorized under src/app, but not the same structure as above.
    Could you please elaborate on the path on the command prompt where the
    project component should be generated. Thanks.

    1. Hi Hamid,

      You are good to go. If you create a project with angular-cli, you will be mainly working in the src directory and that is fine. You have correctly created the project. What is the confusion? Can you elaborate? I am happy to help you.

  2. Thanks Sandeep for this great tutorial, it is really clear.
    I am giving my first steps in Angular4, so now I’ll try to add routing feature to your example.

  3. TypeError: __WEBPACK_IMPORTED_MODULE_2_rxjs_Observable__.Observable.throw is not a function
    Stack trace:
    [51]/SerachUsersService.prototype.handleError@https://sandeep1995.github.io/angular-4-search-devs/main.bundle.js:133:16

Leave a Reply

Your email address will not be published. Required fields are marked *