fix(JS): Update Angular Getting Started tutorial with proper schema and file references (#5433)

* update docs to include switch for CLI and existing resources when adding authentication

* fix flutter page with proper "existing resources" code sample

* fix to file type and minor visual improvement of code sample

* add preamble after "Set Up Backend Resources"

* add back in the 'Identify User' title/reference in directory.js (out of scope for this PR, saving for Analytics updates overall).

* Updates to remove config/dependencies within Blockswitcher, additional PR feedback implemented.

* space added for spell check error

* New block add for 3 options (2 CLI and 1 Manual config) for Auth backend resources.

* Further refinement of blocks and verbiage. Add 3rd Manual Config block for Flutter & mobile.

* fixes to create new fragments for Flutter/iOS/Android pages

* add change to js preamble

* fixes to links that navigating to wrong platform, general feedback from PR Reviews, and added of existing AWS resource links.

* Revert callouts

* remove a comma that leads to invalid JSON string

* revert "jsx" to "dart" for code block

* fixes to block switcher links, updates to text, fragments for JS and RN

* fixes that should mimic closed PR #5307, but not include unecessary files that were already merged in #5219

* Update src/fragments/lib/auth/js/getting-started-steps-basic-auth-react-native.mdx

Co-authored-by: David McAfee <[email protected]>

* remove duplicated "amazon-cognito-identity-js"

* Add Studio option for block switcher within Auth > Getting Started pages

* minor changes to block order and updates to Studio block text

* Update src/fragments/lib/auth/android/getting_started/50_configureBackend.mdx

add link per suggestion from @wrpeck

Co-authored-by: Wesley P <[email protected]>

* Update src/fragments/lib/auth/js/getting-started-set-up-backend-resources-react-native.mdx

update to new formatting

Co-authored-by: Bannon Tanner <[email protected]>

* Update src/fragments/lib/auth/js/getting_started/10_setUpBackendResources.mdx

Update to new formatting guidelines

Co-authored-by: Bannon Tanner <[email protected]>

* updates to Auth block names, fix to React Native docs for Social Auth on Android

* add update to Android

* Updates to preamble wording to include additional options.

* going with option #3

* update file reference for Angular tutorial, add what the final code block should look like for restaurants.component.ts

* remove yarn.lock

* update GraphQL Schema example to eliminate tutorial errors

---------

Co-authored-by: Abdallah Shaban <[email protected]>
Co-authored-by: David McAfee <[email protected]>
Co-authored-by: Wesley P <[email protected]>
Co-authored-by: Bannon Tanner <[email protected]>
Co-authored-by: Katie Goines <[email protected]>

Author: 6 people

src/fragments/start/getting-started/angular/data-model.mdx

@@ -24,17 +24,15 @@ or continue
 The generated schema is for a Todo app. Replace the GraphQL schema at `amplify/backend/api/RestaurantAPI/schema.graphql` with the following:
 
 ```graphql
-type Restaurant @model {
+type Restaurant @model  @auth(rules: [{ allow: public }]){
   id: ID!
   name: String!
   description: String!
   city: String!
-}
+} 
 ```
 
-You'll notice a directive on the `Restaurant` type of `@model`. This directive is part of Amplify's [GraphQL transformer](/cli/graphql/data-modeling) functionality.
-
-The GraphQL Transform Library provides custom directives you can use in your schema that allow you to do things like define data models, set up authentication and authorization rules, configure serverless functions as resolvers, and more.
+The GraphQL Transform Library provides custom directives you can use in your schema that allow you to do things like define data models, set up authentication and authorization rules, configure serverless functions as resolvers, and more.  In the example schema above, the `@model` directive is part of Amplify's [GraphQL transformer](/cli/graphql/data-modeling) functionality and the `@auth` directive determines what [authorization rules](/cli/graphql/authorization-rules/) to apply. 
 
 A type decorated with the `@model` directive will scaffold out the database table for the type (Restaurant table), the schema for CRUD (create, read, update, delete) and list operations, and the GraphQL resolvers needed to make everything work together.
 
@@ -220,7 +218,7 @@ Next, add a form that will be used for creating restaurants. Add the following t
 </div>
 ```
 
-Next, update your `RestaurantsComponent` class so that it will list all restaurants in the database when the app starts. To do so, implement [OnInit](https://angular.io/api/core/OnInit) add a `ListRestaurants` query in `src/app/restaurants/restaurants.component.ts`. Store the query results in an array.
+Next, update your `RestaurantsComponent` class so that it will list all restaurants in the database when the app starts. To do so, implement [OnInit](https://angular.io/api/core/OnInit) and add a `ListRestaurants` query in `src/app/restaurants/restaurants.component.ts`. Store the query results in an array.
 
 ```typescript
 import { Component, OnInit } from '@angular/core';
@@ -277,7 +275,7 @@ Add the following to your `src/app/restaurants/restaurants.component.html` to di
 </div>
 ```
 
-To subscribe to realtime data, declare a subscription class variable and update `ngOnInit` in `src/app/app.component.ts`. When the app starts, this code will set up a subscription. The subscription will update the `restaurants` array when new events are received (when a new restaurant is created):
+To subscribe to realtime data, declare a subscription class variable and update `ngOnInit` in `src/app/restaurants.component.ts`. When the app starts, this code will set up a subscription. The subscription will update the `restaurants` array when new events are received (when a new restaurant is created):
 
 ```typescript
 /** Subscription type will be inferred from this library */
@@ -303,7 +301,7 @@ async ngOnInit() {
 }
 ```
 
-Finally, unsubscribe from the subscription when the component is destroyed. Import and add `OnDestroy` in `src/app/app.component.ts`:
+Finally, unsubscribe from the subscription when the component is destroyed. Import and add `OnDestroy` in `src/app/restaurants.component.ts`:
 
 ```typescript
 import { Component, OnDestroy, OnInit } from '@angular/core';
@@ -317,6 +315,71 @@ export class AppComponent implements OnInit, OnDestroy {
     this.subscription = null;
   }
 ```
+The final `restaurants.component.ts` file should look like the following: 
+
+```typescript
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { APIService, Restaurant } from '../API.service';
+
+/** Subscription type will be inferred from this library */
+import { ZenObservable } from 'zen-observable-ts';
+
+@Component({
+  selector: 'app-restaurants',
+  templateUrl: './restaurants.component.html',
+  styleUrls: ['./restaurants.component.css']
+})
+export class RestaurantsComponent implements OnInit, OnDestroy {
+  public createForm: FormGroup;
+
+  /* declare restaurants variable */
+  public restaurants: Array<Restaurant> = [];
+  /** Declare subscription variable */
+  private subscription: ZenObservable.Subscription | null = null; 
+
+  constructor(private api: APIService, private fb: FormBuilder) {
+    this.createForm = this.fb.group({
+      name: ['', Validators.required],
+      description: ['', Validators.required],
+      city: ['', Validators.required]
+    });
+  }
+
+  async ngOnInit() {
+    this.api.ListRestaurants().then(event => {
+      this.restaurants = event.items as Restaurant[];
+    });
+  
+    /* subscribe to new restaurants being created */
+    this.subscription = this.api.OnCreateRestaurantListener().subscribe(
+      (event: any) => {
+        const newRestaurant = event.value.data.onCreateRestaurant;
+        this.restaurants = [newRestaurant, ...this.restaurants];
+      }
+    );
+  }
+
+  ngOnDestroy() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+    this.subscription = null;
+  }
+
+  public onCreate(restaurant: Restaurant) {
+    this.api
+      .CreateRestaurant(restaurant)
+      .then((event) => {
+        console.log('item created!');
+        this.createForm.reset();
+      })
+      .catch((e) => {
+        console.log('error creating restaurant...', e);
+      });
+  }
+}
+```
 
 Next, run the app: