by Nader Dabit
How to use AWS Amplify and Angular to Build Cloud Enabled JavaScript Applications
AWS Amplify helps you add functionality like storage, GraphQL, authentication, analytics, pub-sub, and internationalization to your JavaScript applications.
While you can integrate AWS Amplify into any JavaScript framework, Angular components have recently been added making it easier than before to get up and running with cloud services in an Angular application.
In this post, we’ll take a look at how to get up and running with AWS Amplify in an Angular application.
Getting Started
Installing dependencies
To get started, we need in install a couple of dependencies: AWS Amplify and AWS Amplify Angular:
$ npm install --save aws-amplify
$ npm install --save aws-amplify-angular
Creating a new AWS Mobile Project
If you already have an AWS project you would like to use, you can skip this step. If not, you you will learn how we can use the AWS Mobile Hub to quickly get up and running with AWS services like Amazon Cognito for authentication, Amazon Pinpoint for analytics, AWS AppSync for managed GraphQL, and Amazon S3 for storage.
The next thing we need to do here is install the AWS Mobile CLI:
npm i -g awsmobile-cli
Next, we will need to configure the AWS Mobile CLI to use your preferred IAM credentials.
If you are new to AWS and would like to see how to set this up for the first time, check out this video.
awsmobile configure
Now, ourAWS Mobile CLI is ready to go and we can create a new project.
Let’s create a new project that has analytics, storage, and authentication enabled:
awsmobile init
awsmobile user-signin enable
awsmobile user-files enable
awsmobile push
After creating your backend, the configuration file is copied to /awsmobilejs/#current-backe
Viewing your project in the AWS Console
Now that you’ve created your project from the CLI, you can view your project in AWS Mobile hub by visiting https://console.aws.amazon.com/mobilehub/home and clicking on the name of your project.
Working in Angular
To import the configuration file to your Angular app, you will need to rename aws_exports.js
to aws_exports.ts
.
To import the configuration file to your Angular app, you will need to rename aws_exports.js
to aws_exports.ts
.
import Amplify from 'aws-amplify'
import awsmobile from './aws-exports'
Amplify.configure(aws_exports)
When working with underlying aws-js-sdk
, the “node” package should be included in types compiler option. Make sure that you edit the tsconfig.app.json
file in your source file folder, e.g. src/tsconfig.app.json
.
"compilerOptions": {
"types" : ["node"]
}
Importing Amplify
In your root module src/app/app.module.ts
, you can import AWS Amplify modules as following:
import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular'
@NgModule({
...
imports: [
...
AmplifyAngularModule
],
...
providers: [
...
AmplifyService
]
...
})
The service provider is optional. You can import the core categories normally i.e. import { Analytics } from 'aws-amplify'
or create your own provider. The service provider does some work for you and exposes the categories as methods. The provider also manages and dispatches authentication state changes using observables which you can subscribe to within your components (see below).
Using the AWS Amplify Service
AmplifyService is a provider in your Angular app, and it provides AWS Amplify core categories through dependency injection.
To use AmplifyService with dependency injection, inject it into the constructor of any component or service, anywhere in your application.
import { AmplifyService } from 'aws-amplify-angular';
...
constructor(
public navCtrl:NavController,
public amplifyService: AmplifyService,
public modalCtrl: ModalController
) {
this.amplifyService = amplifyService;
}
...
Using AWS Amplify Categories
You can access and work directly with AWS Amplify Categories via the built-in service provider:
import { Component } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor( public amplify:AmplifyService ) {
this.amplifyService = amplify;
/** now you can access category APIs:
* this.amplifyService.auth(); // AWS Amplify Auth
* this.amplifyService.analytics(); // AWS Amplify Analytics
* this.amplifyService.storage(); // AWS Amplify Storage
* this.amplifyService.api(); // AWS Amplify API
* this.amplifyService.cache(); // AWS Amplify Cache
* this.amplifyService.pubsub(); // AWS Amplify PubSub
**/
}
}
Usage Example: Subscribe to Authentication State Changes
Import AmplifyService into your component and listen for auth state changes:
import { AmplifyService } from 'aws-amplify-angular';
// ...
constructor( public amplifyService: AmplifyService ) {
this.amplifyService = amplifyService;
this.amplifyService.authStateChange$
.subscribe(authState => {
this.signedIn = authState.state === 'signedIn';
if (!authState.user) {
this.user = null;
} else {
this.user = authState.user;
this.greeting = "Hello " + this.user.username;
}
});
}
View Components
AWS Amplify also provides components that you can use in your Angular view templates, including an authenticator component, a photo picker component, and an Amazon S3 album component.
Authenticator
Authenticator component creates an out-of-the-box signing/sign-up experience for your Angular app. To use Authenticator, just add the amplify-authenticator
directive in your .html view:
<amplify-authenticator></amplify-authenticator>
Photo Picker
Photo Picker component will render a file upload control that will allow choosing a local image and uploading it to Amazon S3. Once an image is selected, a base64 encoded image preview will be displayed automatically.
To render photo picker in an Angular view, use the amplify-photo-picker
component:
<amplify-photo-picker
(picked)="onImagePicked($event)"
(loaded)="onImageLoaded($event)">
</amplify-photo-picker>
The component will emit two events:
(picked)
- Emitted when an image is selected. The event will contain theFile
object which can be used for upload.(loaded)
- Emitted when an image preview has been rendered and displayed.
Uploading an image
Use onImagePicked(event)
to upload your photo to Amazon S3 using AWS Amplify Storage category:
onImagePicked( file ) {
let key = `pics/${file.name}`;
this.amplify.storage().put( key, file, {
'level': 'private',
'contentType': file.type
})
.then (result => console.log('uploaded: ', result))
.catch(err => console.log('upload error: ', err));
}
S3 Album
The Amazon S3 Album component displays a list of images from the connected S3 bucket.
To render the album, use the amplify-s3-album
component in your Angular view:
<amplify-s3-album
path="pics" (selected)="onAlbumImageSelected($event)"
>
</amplify-s3-album>
(selected)
event can be used to retrieve the URL of the clicked image on the list:
onAlbumImageSelected( event ) {
window.open( event, '_blank' );
}
Custom Styles
You can use custom styling for AWS Amplify components. Just import your custom styles.css that overrides the default styles which can be found in /node_modules/aws-amplify-angular/theme.css
.
Conclusion
AWS Amplify is open source and actively being developed, and we’d love any feedback and / or issues from customers or users to help us in our future roadmap.
Feel free to check out the docs here, or the GitHub repo here.
My Name is Nader Dabit . I am a Developer Advocate at AWS Mobile working with projects like AWS AppSync and AWS Amplify, and the founder of React Native Training.