Angular 5 HTTP using Observables – Part 1

WRITTEN BY GARETH DUNNE @JSDIARIES

Angular 5 Data Binding

One of the more advanced aspects of frontend development to know as an experienced UI developer is the creation of reactive data sources.

No matter what kind of data you want to show your user, in order to take advantage of web applications you should really have your data be dynamic and reactive.

In comparison to libraries like React.js, Angular 4 enables you to create data that is shareable to all of your UI components via a service .

In Angular,  we can use Observables and Subjects to make this data reactive and as a result refresh our UI. This is achieved by using an external reactive JavaScript library called Rxjs.

I won’t be going into too much detail on what goes on behind the scenes of the Rxjs library but just know that it is an important aspect of using data in the Angular project.  In this tutorial I will demonstrate how to use it as dynamic data retrieving tool.

And while Rxjs is also available to be used with React, in my personal opinion it is much easier and it better fits the architecture to be used in combination with Angular 5.

Redux is more commonly used in combination with React for the data flow and state management of a project but the details of that can be found in another post here.

In this tutorial, I want to demonstrate how you can make your own reactive data source using BreweryDB’s APIs. I also want to show how modern frontend frameworks like Angular allow us to create seamless user interfaces that respond to the changing of data.

In this part, we will just start with setting up the project.

On a side note, if your looking to expand your Angular and Typescript knowledge I highly recommend this Angular & TypeScript book by Yakov Fain.

This tutorial series is based on my application Beer Name Finder which you can view here:

.

If you enjoy this dashboard, please consider giving it an upvote on Product Hunt here.

I took the designs and styles of this application from Coursetro’s MEAN stack tutorial and was able to implement a service for interactions with the data and the Brewery API.

Angular Observables

As this tutorial will be broken down into a few posts, you can see the source code in the GIT here.

Brewery API

In order to retrieve data from a source via HTTP we will use the Brewery API. This will at least keep our data source interesting and offer plenty of different data options to be displayed.

Navigate to the developer API section here.

Brwery API Menu
Brewery Applications

After signing up for a developer account, create a new application with whatever details you like.

Register New Application
Register New Application

The documentation is quite verbose and you can find a wide variety of different ways to query the api for specific beers.

You can also test the results of any api calls via the api explorer. This is useful for when you are testing different query parameters to retrieve specific datasets of beer information

API Explorer
API Explorer

For now, we just need the api key generated by your app. This will be needed in order to make a http request to the Brewery API server so store this somewhere to reference later on.

Angular 5 Install & Setup

In order to progress from here we need to have Node.js and the Angular CLI installed.

I’d recommend to getting started by watching this video by Gary Simon from Coursetro who details the installation steps.

Once set up from the instructions of that video, we need to scaffold the structure our Angular application. This is very easily done through the Angular CLI.

Open up the terminal or command window and in the current directory we want to generate the project with the styling scss flag.

We have now generated a Angular project with a solid SASS styling structure. This step is of course optional depending on your CSS preprocessor preferences.

If you want to style the project with normal CSS that is fine too.

Angular 5 HTTP Service & Home Component

Next, lets generate our home component. This is a component that will contain all of our UI for displaying all the beer data requested from the BreweryDB API.

From here, we want to generate our service that will hold all the logic for retrieving data that can be shared with any our components.

This is a service that contains all our methods that we will use to request data from BreweryDB’s APIs. When you open up this service you will see that the Angular CLI has automatically injected a HTTP object into the constructor for us.

Lets modify this service so it now looks like this.

The HTTP object in the constructor will be used to make the HTTP requests to the BreweryDB APIs. Meanwhile, we have added all the necessary imports in the top of the file that we will need later on for this service.

Angular 5 Setup Complete

This is our basic structure set up. In part 2 we will add our API calls to our beer service.

Ionic 3 – HTTP Requests – Retrieving a Photo from a Google Place

WRITTEN BY GARETH DUNNE @JSDIARIES

As I become more comfortable with Ionic 3 and its functionality, I wanted to share how to connect to the Google Maps API, retrieve a specific place and then to request a photo from that requested place.

In doing so, you will then know how define a HTTP object using TypeScript and using ES6 Promises in order to make a callback function that requests the photo using that HTTP object.

This functionality stems from an app that I made called CoffeeTrail.

Android Coffee Finder Application CoffeeTrail
CoffeeTrail

It’ll be on the iOS store very soon but be sure to check it out on Android here.

Setup Project

As always we can generate our Ionic 3 project using the command

We then want to generate our locations provider.

This is a provider that contains all our methods that we will use to request data from Google’s APIs. When you open up this locations provider you will see that the Ionic CLI has automatically injected a HTTP object into the constructor for us.

This is the object we will be using to make the requests.

We will also generate a location-details component that will display our requested images.

API Key

In order to have access to multiple API calls in our app we need to request a developer API key for Google Maps.

You can generate one by going to this page and clicking Get A Key , This is required for all place and photo requests and won’t work without one.

Google API Key
Google API Key

Get Place

We will create a getLocation method that will accept latitude and longitude as parameters.

We utilize a ES6 JavaScript Promise that will use the http object created in our constructor in order to make the request along with the details of the location which you can change for your own personal preferences.

You will of course have to reference the API key that you created earlier on in the apiKey variable of type string..

This Promise will return true or resolve when the the request has been completed and the data has been returned. The results of the data is mapped to a new json object which we assign to the this.data variable through ES6’s arrow functions .

This data will be resolved/returned when we call it in our location-details file.

We also can add the getPhoto method.

This will take in a photo reference string as a parameter in order to a retrieve a specific photo based on the location from the locations/location returned from our getLocation method.
So how do we get the photo reference from the data set returned from getLocation? Well we can do this in the locations-list file.

Display Photo

Our location-details.html file should look like this to display the retrieved image of the location.

Notice how we use the async pipe with the current image template variable.

This is because some asynchronous data objects can be a bit tricky to display without async pipe. The data source is an Observable that contains an array so using the async pipe secures it so to speak.

We then use the ng-template (which is new to Angular 4) syntax to display error text if no image can be retrieved.

So in our location.details.ts file we need to use our getLocation method in order to get a place and then to send a photo reference from that place to the getPhoto method.

This is just one way to retrieve data from an API in an Ionic application. The use of Angular 4 in an Ionic 3 project enables a developer to makes a request for some data and then to easily share that data throughout the rest of the components using a service or in this case, using our location.ts. provider.

Angular 4 News Roundup April

WRITTEN BY GARETH DUNNE @JSDIARIES

Whats New?

As more and more developers are upgrading their projects to Angular 4 the initial confusion of this sudden incremented version has settled and has brought with it some handy but hardly groundbreaking changes. I covered this in another post here.

Although there isn’t much reading material specifically for Angular 4 I still recommend having a look at Yakov Fain’s Angular and Typescript book here.

Angular Attack

Over a 48 hour period developers were instructed to create an Angular application to be submitted and reviewed with the best receiving a wide range of prizes. There are a lot of impressive entries and some really nice user interfaces were created in that short space of time.

Be sure to check out the entries here and the prizes here.

ngConf

Claimed to be one of the biggest and original Angular conferences. ngConf took place on the 5th to 7th of April in Salt Lake City Utah.

With plenty of Angular related content and speakers your bound to find something useful for you.

Plenty of topical and insightful information can be found from these talks so be sure to have a look at some of the speakers when you find the time.

Here are all the related live streams that took place over those 3 days. Use this schedule list here to find a talk that you want to listen to from the recorded live streams.

Animation

As covered in a previous Angular post, the way animations are imported has been simplified in Angular 4. One of the best videos to come out this month regarding this is Coursetro’s Angular 4 animations video by Gary Simon.

He presents his videos very well and concentrates on the broader scope of the full stack developer, starting from conceptual design all the way to full development in Angular. Be sure to check our more of his content, most of it is free,

Angular 5

Almost unthinkable at this stage right? Surely there can’t be anyone contemplating details of another Angular version? Well there actually has been a few hints from ngConf .

The release window is estimated for Autumn 2017. Not much details are revealed but promises of simpler and smoother Ahead of Time Compilations were hinted at. And although it might seem ridiculous to think about another version already, this is the path Angular will be following form now on.

Every forthcoming version will contain small and efficient refinements to the previous Angular version every 6 months or so. Not much core changes but rather notable improvements to make your development life smoother. We can only hope that not much is broken in the process with each of these incremental versions.

For more information please check it out this post here.

More Angular 4 and Ionic content will be sure to covered here so subscribe to the mailing list if you haven’t already.

As we grow, we hope to implement a job board that will have listings of some open Angular positions. Hopefully, this will connect potential employers with some of the developers from the JSdiaries community.

Still looking to upgrade your AngularJS app to Angular 2? Check out this tutorial by Toptal here.

Angular 4 Directives Overview

WRITTEN BY GARETH DUNNE @JSDIARIES

If you missed our last Angular post please check it out here.

Some Angular 4 directive examples will go beyond the scope of this post but be sure to check out this awesome Angular book by Nathan Murray for additional Angular 4 directive information.

Not much has changed in terms of directives for Angular 4 so this post will be a general directive overview mentioning Angular 4 directive changes where appropriate.

Under the hood, a directive in Angular is just a plain JavaScript class that is decorated with the @directive decorator. In Angular, we have 3 different types of directives.

These are:

  • Component Directives
  • Structural Directives
  • Attribute Directives

An attribute directive tends to change the look and behaviour of an element. Whereas a structural directive will manipulate the DOM and add or remove elements depending on what action the structural directives apply.

An Angular 4 Component Directive uses the shadow DOM to create encapsulated visual behaviour that is typically used to create UI widgets.

Angular 4 Attribute Directives

We will start with attribute directives and how this interacts with our DOM and data.

We can also differentiate a component from a Angular 4 directive using this handy table provided for here.

You can create your own Angular 4 attribute directives or you can use Angular’s built in directives.

https://angular.io/docs/ts/latest/guide/attribute-directives.html

ngClass Directive

A fairly simple illustration of a basic attribute directive, ngClass is added into our component element and its value is given as a class.

As you can see, we can use the ngClass attribute to assign a class based on styles that we had specified in our styles array.

ngFor Directive

In short, ngFor is a directive that outputs an array element, iterating through each element inside it.

For multiple classes, we can create an array and put those classes inside it to apply to our iterative list. We can then combine this with the aforementioned *ngFor.

The let key is part of the Angular template syntax. It creates a local variable that can be referenced anywhere in that specific template. let also creates the index i and keeps it as a reference to the current whiskey. All this is done under the hood of this directive.

What if we wanted to style the first and last item in our Angular 4 ngFor directive? This is actually made relatively easy by using let again to assign the first items to variable first and last to variable last.

To be as efficient as possible, ngFor will attempt to not remove and recreate these DOM elements and instead to reuse and recycle when possible. This helps with performance and prevents significant slowdown in our DOM.

ngSwitch Directive

ngSwitch provides us with a structural directive similar to a switch loops in JavaScript and our other Object Oriented language counterparts.

Here is a simple example that combines input button events with ourSwitchCase loop. Based on the number that value returns which is changed depending on which button is clicked, one of the divs with the *ngSwitchCase will be displayed.

NgIf adds or removes an element or elements from a sub tree based on the condition specified.

If the expression assigned to ngIf evaluates to a falsy value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

This would be similar to how the display: none property behaves in CSS.

The NgModel directive allows us to provide two way data binding to our HTML element. Whatever we type in the input field will reflect in our name element. In our sample Plunker we had to import and declare our FormsModule in order for this to work. The name attribute should also have the same value as our ngModel.

Creating our own Attribute Directives

I will be going over the fantastic introduction to creating our own Angular 4 directives from Angular University.

We can also create our own custom directives in Angular. In this case, this directive can be applied to any HTML element on the page and will hide this element when it is clicked.

Firstly, we need to import our Angular Directives from Angular core library into your component file.

We then need to then initialise our directive meta data decorator with the selector property of our choice. In this example its HideElement.

We then want specify the CSS classes that we want to use for the fade out transition.

And we also need an action to occur when the element is clicked so we will create a function called toggle.

We than want to use a click event that will trigger the function “Toggle” that will add or remove this fade out css class but we will not be using Angular’s (click) event so how exactly will we accomplish this?

Well, we will use the Angular 4 directive HostListener from Angular Core. Using a Host Listener, Angular will invoke the decorated method (in this case toggle) when the our html element emits the event (when clicked).

In order to access and change properties of the Host Element we must use the HostBinding Decorator. This will check the host binding properties once a change is detected.

For a more detailed explanation of creating your own Angular 4 directives check out this tutorial from Rangle.

If this helped you out be sure to check out our resources page for more recommended reading material on Angular.