Update Angular Amplify Gen 2 docs

[BCusack]

Environment information

System:
  OS: Windows 11 10.0.26120
  CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
  Memory: 1.14 GB / 15.71 GB
Binaries:
  Node: 20.12.0 - C:\Program Files\nodejs\node.EXE
  Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
  npm: 10.8.0 - C:\Program Files\nodejs\npm.CMD
  pnpm: undefined - undefined
NPM Packages:
  @aws-amplify/backend: 1.0.0
  @aws-amplify/backend-cli: 1.0.1
  aws-amplify: 6.3.2
  aws-cdk: 2.140.0
  aws-cdk-lib: 2.140.0
  typescript: 5.4.5
AWS environment variables:
  AWS_NODEJS_CONNECTION_REUSE_ENABLED = 1
  AWS_SDK_LOAD_CONFIG = 1
  AWS_STS_REGIONAL_ENDPOINTS = regional
No CDK environment variables

Description

While attempting to connect to a DynamoDB I noticed the Amplify Gen 2 Angular Data docs are written for React. https://docs.amplify.aws/angular/build-a-backend/data/set-up-data/ This has added a lot of time to the dev process and having the docs target Angular specifically would be much appreciated.

[ykethan]

Hey,👋 thanks for raising this! I'm going to transfer this over to our documentation repository.

[jpangburn]

Ran into this too.

The problem is that the documentation uses React specific calls like "useState" in a number of places. In this same section it continues on the page https://docs.amplify.aws/angular/build-a-backend/data/query-data/#fetch-only-the-data-you-need-with-custom-selection-set, but it seems worse there to me because the "selectionSet" is done with those React specific useState calls so it's not clear how to make a re-usable selectionSet that you can use across different calls in Angular.

I've worked out a way on my own but I'm sure there's a better way. Being a TypeScript noobie though, I don't understand the typing well enough to make it really clean. This is the kind of thing you rely on documentation for.

[jpangburn]

Would be nice if at least one place described how to properly use the type system with Angular for responses to the GraphQL client calls. For example, on the Todo sample right now I have this ugly any declaration:

export class TodosComponent implements OnInit {
  todos: any[] = [];

I then fill it via something like this:

client.models.Todo.observeQuery(selectionFilter).subscribe({
        next: ({ items, isSynced }) => {
          this.todos = items;
        },
      });

I've tried stuff like:

type Todo = Schema["Todo"]["type"];
type Todos = Todo[];

then

export class TodosComponent implements OnInit {
  todos: Todos = [];

But in this case, the line this.todos = items; fails to compile with a type error. Would be nice if the documentation explained how to do this.

I realize it's a lot of work to convert all those samples from React to Angular and test them, but at least it should cover some basics of the Angular way to do the equivalent of React's useState for defining the type of returned items.