[DOC] Angle Bracket invocation

(cherry picked from commit 0aeb29b)

packages/@ember/-internals/glimmer/lib/component.ts

@@ -39,9 +39,14 @@ export const BOUNDS = symbol('BOUNDS');
   The easiest way to create a `Component` is via
   a template. If you name a template
   `app/templates/components/my-foo.hbs`, you will be able to use
-  `{{my-foo}}` in other templates, which will make
+  `<MyFoo />` or `{{my-foo}}` in other templates, which will make
   an instance of the isolated component.
 
+  ```app/templates/components/my-foo.hbs
+  <PersonProfile @person={{this.currentUser}} />
+  ```
+  or
+
   ```app/templates/components/my-foo.hbs
   {{person-profile person=currentUser}}
   ```
@@ -57,6 +62,13 @@ export const BOUNDS = symbol('BOUNDS');
   the component. The block will be executed in the
   context of the surrounding context or outer controller:
 
+  ```handlebars
+  <PersonProfile @person={{this.currentUser}}>
+    <p>Admin mode</p>
+    {{! Executed in the controller's context. }}
+  </PersonProfile>
+  ```
+  or
   ```handlebars
   {{#person-profile person=currentUser}}
     <p>Admin mode</p>
@@ -456,12 +468,19 @@ export const BOUNDS = symbol('BOUNDS');
 
   If you call the `person-profile` component like so:
 
-  ```
+ ```handlebars
+ <PersonProfile>
+     <h2>Chief Basket Weaver</h2>
+     <h3>Fisherman Industries</h3>
+ </PersonProfile>
+ ```
+ or
+ ```handlebars
   {{#person-profile}}
     <h2>Chief Basket Weaver</h2>
     <h3>Fisherman Industries</h3>
   {{/person-profile}}
-
+  ```
   It will result in the following HTML output:
 
   ```html
@@ -884,6 +903,10 @@ const Component = CoreView.extend(
       ```handlebars
       {{my-component elementId="a-really-cool-id"}}
       ```
+
+      ```handlebars
+      <MyComponent @elementId="a-really-cool-id" />
+      ```
       If not manually set a default value will be provided by the framework.
       Once rendered an element's `elementId` is considered immutable and you
       should never change it. If you need to compute a dynamic value for the

packages/@ember/-internals/glimmer/lib/helpers/action.ts

@@ -128,6 +128,10 @@ import { ACTION, INVOKE, UnboundReference } from '../utils/references';
   });
   ```
 
+  ```handlebars
+  <MyInput @submit={{action 'setName' this.model}} />
+  ```
+  or
   ```handlebars
   {{my-input submit=(action 'setName' model)}}
   ```

packages/@ember/-internals/glimmer/lib/helpers/array.ts

@@ -10,6 +10,14 @@ import { Opaque } from '@glimmer/util';
    Use the `{{array}}` helper to create an array to pass as an option to your
    components.
 
+   ```handlebars
+   <MyComponent @people={{array
+     'Tom Dade'
+     'Yehuda Katz'
+     this.myOtherPerson}}
+   />
+   ```
+    or
    ```handlebars
    {{my-component people=(array
      'Tom Dade'

packages/@ember/-internals/glimmer/lib/helpers/component.ts

@@ -44,6 +44,10 @@
   Note: You should not use this helper when you are consistently rendering the same
   component. In that case, use standard component syntax, for example:
 
+  ```app/templates/application.hbs
+  <LiveUpdatingChart />
+  ```
+  or
   ```app/templates/application.hbs
   {{live-updating-chart}}
   ```
@@ -106,6 +110,12 @@
   When yielding the component via the `hash` helper, the component is invoked directly.
   See the following snippet:
 
+  ```
+  <PersonForm as |form|>
+    {{form.nameInput placeholder="Username"}}
+  </PersonForm>
+  ```
+  or
   ```
   {{#person-form as |form|}}
     {{form.nameInput placeholder="Username"}}
@@ -122,6 +132,12 @@
   {{yield (component "my-input-component" value=model.name placeholder="Name")}}
   ```
 
+  ```
+  <FullName as |field|>
+    {{component field placeholder="Full name"}}
+  </FullName>
+  ```
+  or
   ```
   {{#full-name as |field|}}
     {{component field placeholder="Full name"}}

packages/@ember/-internals/glimmer/lib/helpers/concat.ts

@@ -22,10 +22,14 @@ const normalizeTextValue = (value: any): string => {
   Example:
 
   ```handlebars
-  {{some-component name=(concat firstName " " lastName)}}
+  <SomeComponent @name={{concat firstName " " lastName}} />
 
   {{! would pass name="<first name value> <last name value>" to the component}}
   ```
+  or
+  ```handlebars
+  {{some-component name=(concat firstName " " lastName)}}
+  ```
 
   @public
   @method concat

packages/@ember/-internals/glimmer/lib/helpers/if-unless.ts

@@ -117,6 +117,9 @@ class ConditionalHelperReference extends CachedReference {
 
   You can use the `if` helper inside another helper as a nested helper:
 
+  ```handlebars
+  <SomeComponent height=(if isBig "100" "10") />
+  ```
   ```handlebars
   {{some-component height=(if isBig "100" "10")}}
   ```
@@ -150,6 +153,9 @@ export function inlineIf(_vm: VM, { positional }: Arguments) {
 
   You can use the `unless` helper inside another helper as a subexpression.
 
+  ```handlebars
+  <SomeComponent height=(unless isBig "10" "100") />
+  ```
   ```handlebars
   {{some-component height=(unless isBig "10" "100")}}
   ```

packages/@ember/-internals/glimmer/lib/helpers/mut.ts

@@ -12,6 +12,9 @@ import { INVOKE, UPDATE } from '../utils/references';
 
   To specify that a parameter is mutable, when invoking the child `Component`:
 
+  ```handlebars
+  <MyChild @childClickCount={{action (mut totalClicks)}} />
+  ```
   ```handlebars
   {{my-child childClickCount=(mut totalClicks)}}
   ```
@@ -34,6 +37,10 @@ import { INVOKE, UPDATE } from '../utils/references';
   Additionally, the `mut` helper can be combined with the `action` helper to
   mutate a value. For example:
 
+  ```handlebars
+  <MyChild @childClickCount={{this.totalClicks}} @click-count-change={{action (mut totalClicks))}} />
+  ```
+  or
   ```handlebars
   {{my-child childClickCount=totalClicks click-count-change=(action (mut totalClicks))}}
   ```

packages/@ember/-internals/glimmer/lib/helpers/readonly.ts

@@ -22,6 +22,9 @@ import { unMut } from './mut';
 
   ```app/templates/components/my-parent.hbs
   {{log totalClicks}} // -> 3
+  <MyChild @childClickCount={{readonly totalClicks}} />
+  ```
+  ```
   {{my-child childClickCount=(readonly totalClicks)}}
   ```
 
@@ -41,6 +44,11 @@ import { unMut } from './mut';
   {{log childClickCount}} //-> 4
   ```
 
+  ```app/templates/components/my-parent.hbs
+  {{log totalClicks}} //-> 3
+  <MyChild @childClickCount={{readonly totalClicks}} />
+  ```
+  or
   ```app/templates/components/my-parent.hbs
   {{log totalClicks}} //-> 3
   {{my-child childClickCount=(readonly totalClicks)}}
@@ -70,6 +78,10 @@ import { unMut } from './mut';
   });
   ```
 
+  ```app/templates/components/my-parent.hbs
+  {{log clicks.total}} //-> 3
+  <MyChild @childClicks={{readonly clicks}} />
+  ```
   ```app/templates/components/my-parent.hbs
   {{log clicks.total}} //-> 3
   {{my-child childClicks=(readonly clicks)}}
@@ -89,6 +101,11 @@ import { unMut } from './mut';
 
   You will see the following happen:
 
+  ```app/templates/components/my-parent.hbs
+  {{log clicks.total}} //-> 4
+  <MyChild @childClicks={{readonly clicks}} />
+  ```
+  or
   ```app/templates/components/my-parent.hbs
   {{log clicks.total}} //-> 4
   {{my-child childClicks=(readonly clicks)}}

packages/@ember/-internals/glimmer/lib/syntax/let.ts

@@ -25,6 +25,20 @@ import * as WireFormat from '@glimmer/wire-format';
     of the post, and a series of options defined in-place.
 
     ```handlebars
+    {{#let
+        (concat post.title ' | The Ember.js Blog')
+        post.content
+        (hash
+          theme="high-contrast"
+          enableComments=true
+        )
+        as |title content options|
+    }}
+      <MyPost @title={{title}} @content={{content}} @options={{options}} />
+    {{/let}}
+  ```
+ or
+  ```handlebars
     {{#let
         (concat post.title ' | The Ember.js Blog')
         post.content

packages/@ember/-internals/glimmer/lib/syntax/outlet.ts

@@ -22,13 +22,13 @@ import { OutletReference, OutletState } from '../utils/outlet';
   ```handlebars
   {{! app/templates/application.hbs }}
   <!-- header content goes here, and will always display -->
-  {{my-header}}
+  <MyHeader />
   <div class="my-dynamic-content">
     <!-- this content will change based on the current route, which depends on the current URL -->
     {{outlet}}
   </div>
   <!-- footer content goes here, and will always display -->
-  {{my-footer}}
+  <MyFooter />
   ```
 
   You may also specify a name for the `{{outlet}}`, which is useful when using more than one