Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.

In this Angular tutorial, you will learn how to create an app to compare bus fares. We will be using Angular IDE to create our application, which will fetch bus fare data using goibibo’s web services.

Creating a New Angular Project

In the new Angular project wizard, enter BusFareCompare as the project name. We used Angular CLI version 1.1.0, Node.js version 6.11.2, and NPM version 3.10.10 in our tutorial, but you are free to use more recent versions.


Click Finish to complete the creation of a new Angular 4 project. In the Terminal+ view, you can see commands being executed by Angular CLI. After the installation of all the modules is complete, we are now ready to continue with development.

Adding Angular Material

To style our application, we will be using Angular Material, which is a set of high-quality UI components developed by the Angular team, based on the Google Material design specification. These components help us to build applications with an attractive, yet familiar UI, giving users a consistent experience across devices. To install HammerJS, Angular Material and Angular CDK, type and execute the following commands in Terminal+.


Modern Angular projects already include the Angular animations module (@angular/animations), but if you happen to be following along with an older version of the CLI or Angular, please install that as well.

Next you add the indigo-pink Angular material theme by adding the following line to your /src/styles.css file

For more on Angular Material, please see our previous post, Building Applications with Angular Material.

Creating the Search Card Component


To create a new Angular component in Angular IDE, we use the menu File > New > Component. In the New Angular CLI Component wizard, enter search-card as element name. Under the advanced section, make sure Do not create code in its own directory(--flat) is checked, as we want to have a flat directory for this project. Now click Finish to complete creation of the search card component. Four new files are created in the src/app folder – search-card.component.css, search-card.component.html, search-card.component.spec.ts and search-card.component.ts were created, and the content of app.module.ts is updated. Let us take a look at some of the things to note when we create a new component via Angular CLI using Angular IDE.

Important File Changes

The file named src/app/search-card.component.ts is the component file for our newly created Search Card component, and its content is below:

At the top of the file, Component and OnInit are imported from @angular/core (each Angular library name begins with the @angular prefix). Component is a decorator function that we use to notify Angular that a class is an Angular component, and OnInit is a trait that our component must inherit in order to respond to the ngOnInit lifecycle hook. You can read more about Angular lifecycles here.

Looking at the metadata passed to the @Component decorator in our component, we see that in order to use this component in an Angular template, the html tagname will be app-search-card, as specified by the selector metadata attribute. Also, this component will use the content of src/app/search-card.component.html as its Angular template and be styled with src/app/search-card.component.css.

We can now use the search card component in our app component, because app.module.ts has been updated as follows: SearchCardComponent is imported, and added to the declarations property of the @NgModule metadata. So update the content of src/app/app.component.html to be

Storing user search input

In order to search for bus rates, we need the user to input the following information:

  • Trip type (One way or return trip)
  • Origin
  • Destination
  • Departure date
  • Return date (if trip type is return)

Let us create a search card interface to be used to type-check the data from the templates in accordance with our requirements above. Use File > New > Interface and type SearchCardInterface into the Name field, and search-card.interface.ts as the File name. Ensure that the source folder is set to /BusFareCompare/src/app. Click Finish and update the content of the newly created file as follows:


Next we update src/app/app.module.ts to import a bunch of modules.  The file changes are shown in the code below:

Creating the Search Service

Let us create a search service, which uses the data collected from user input to make an API request for bus tickets available. As we mentioned earlier, we will be using the API provided by goibibo, so head over to the developer portal to create an account so you can follow along. You will need to obtain an App Id and App key that you will use later in the search service.

We create the search service, by using the menu File > New > Service. In the new service wizard, enter the search-card element name and click Finish.


You should import SearchCardInterface in your search-card service, and also create a getSearchResults method in it, which takes the user input, bound to model: SearchCardInterface, and gets search results from the goibibo API. The code snippet for the getSearchResults stub is below:


Let us now connect this stub method to the onSubmit method of our search-card component. The content of src/app/search-card.component.ts should be

Notice that we did not add SearchService to the provider of the search-card component. We will add it to src/app/app.component.ts because we want all the children of app component to use the same instance of search service. The content of src/app/app.component.ts should be updated as follows:


Let us enter the following code in src/app/search-card.component.html

Add some style in src/app/search-card.component.css

Updating getSearchResults stub

We are going to user the user input to make an HTTP request to the API, and for this, we will need the Angular HttpClient. Let us include HttpClientModule among the imports in src/app/app.module.ts

Next we inject HttpClient in our search service, and also develop the code for the getSearchResults method in src/app/search-card.service.ts. Remember to replace the APPID and APPKEY text in the snippet below with the Id and Key you obtain from the developer portal!

Creating the Search Result Component

Create a new component, SearchResultComponent with the element name search-result and ensure that in the Advanced section of the New Angular CLI Component wizard, you have the --flat option checked. First, we include our newly created component in our app component by updating src/app/app.component.html

Next, we will add search result component to subscribe to the search service in order to get search results. Let us do this by updating src/app/search-result-component.ts

We will display some part of the API response in a simple table, so let us update the template of our search result component, src/app/search-result.component.html

Note: At the time of this writing, due to a bug in Angular IDE, you may see incorrect validation errors reported against this file, for the items within the ngFor loop. This is a known issue that will be fixed shortly.


We style the search result table, by including our style rules in src/app/search-result.component.css

Running the app

Let us run our Angular app.  There is a server view in Angular IDE, and in order to open it, select Window > Show View > Servers. Right click on BusFareCompare under the Angular CLI node and click Start Server. Angular IDE serves the application on localhost port 4200 by default, so open up in your browser to see the running app.


Leave “one way trip” selected, enter Bangalore in the origin field and Hyderabad in the destination field, set an appropriate departure date, and click the Let’s Go button.


The search results are then displayed as below:



There are a few obvious improvements that can be made to this app:

  • Storing the API key on the client side is probably not acceptable in most scenarios.
  • Loading animations can be added during search.
  • Return date field should be disabled if “One way” is selected, no results will be displayed if the return date is earlier than the departure date.
  • Using the Angular Material table component would improve the results display significantly.
These, and other small enhancements, are left as an exercise for the reader. We hope you enjoyed developing a real-world Angular application with Angular IDE!

Related Posts

CodeMix – Better with You! Thanks to detailed feedback from our awesome users, our team has been hard at work adding stability, reliability and performance fixes, and enhancements, to CodeMix. Read on for the deets on what’s new in CodeMix over the last month.Editing & ValidationWhen editing TypeScript files, error markers were sometimes not cleared when the error was fi...
A Day with Dani: Eclipse Plugin for Awesome Worksp... DevStyle Rescued My Workspace!As a new developer working in Eclipse, nothing was worse than doing a project and looking at an outdated, plain workspace. It was boring, and took away from the excitement and learning these projects had to offer. This was an IDE I would be using almost every day, so when I learned about the DevStyle plugin for Eclipse...
Happy Holidays – from Our Family to Yours! It’s that time of the year again - the time to enjoy a break from the everyday duties, accompanied by our loved ones! At Genuitec we would like to wish you a wonderful holiday season filled with great times and awesome food! We already got our party hats out (as you can see)! Our U.S. offices will be closed on December 25th and 26th, as well as Jan...
Introducing DevStyle – Rebooting EclipseR... Yesterday we released the first production version of DevStyle, a free add-on for Eclipse. DevStyle seeks to dramatically improve the Eclipse user experience for millions of developers with the introduction of modern developer ergonomics and the beautiful styling you’ve come to expect from products in 2017.Over the years, the Eclipse evolution has ...

Posted on Sep 8th 2017