Create a cloud formation template with Grapghql Angular application using AWS Appsync and amplify.

sravanthi vallepu
Jul 16 · 8 min read
Command: cd appsync
Command: aws configure
Command: npm install -g @angular/cli
Command: ng new myapp5
Command: code .
Command: ng g c auth
Command: ng g c todo
{
path:"todo",
component:TodoComponent
},
{
path:"",
component:AuthComponent
}
Command: ng serve
Command: npm install -g @aws-amplify/cli
Command: npm install — save aws-amplify-angular
Command: npm install — save aws-amplify
Command: npm install — save aws-appsync graphql-tag
(window as any).global = window;
(window as any).process={
env:{ DEBUG:undefined},
}
<script>
if(global==undefined){
var global=window;
}
</script>
Command: amplify init
Command: amplify add auth
Command: amplify add api
Command: amplify publish
Command: amplify push
<amplify-authenticator> </amplify-authenticator>
@import '~aws-amplify-angular/theme.css';
div style="text-align: center">
<button (click)="createTodo()">createTodo</button>
<button (click)="listTodos()">getTodos</button>
<div *ngFor = "let todo of allTodos">
<hr>
<p>Title:{{todo.name}}</p>
<p>Body:{{todo.body}}</p>
<p>{{todo.completed ? "completed":"Pending"}}</p>
</div>
</div>
import Amplify from 'aws-amplify';
import amplify from './aws-exports';
Amplify.configure(amplify);
import { Component, OnInit } from '@angular/core';
import { constant } from 'async';
import {APIService} from '../API.service';
@Component({
selector: 'app-todo',
templateUrl: './todo.component.html',
styleUrls: ['./todo.component.scss']
})
export class TodoComponent implements OnInit {
allTodos :any = [];
constructor(private api:APIService) { }
async ngOnInit(){
let result = await this.api.ListTodos();
this.allTodos = result.items;
}
async createTodo(){
const newTodo = {
name: 'Todo' + Math.floor(Math.random() *100),
"body": 'sample description',
completed: false
}
let result = await this.api.CreateTodo(newTodo);
this.allTodos.push(result);
debugger;
}
async listTodos(){
let result = await this.api.ListTodos();
this.allTodos = result.items;
}
}
ng serve 

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade