docs(aio): update myUnless references to appUnless (#20658)

fixes Issue Number: #20447

PR Close #20658

aio/content/examples/structural-directives/e2e/app.e2e-spec.ts

@@ -37,7 +37,7 @@ describe('Structural Directives', function () {
     expect(paragraph.count()).toEqual(1);
   });
 
-  it('myUnless should show 3 paragraph (A)s and (B)s at the start', function () {
+  it('appUnless should show 3 paragraph (A)s and (B)s at the start', function () {
     const paragraph = element.all(by.css('p.unless'));
     expect(paragraph.count()).toEqual(3);
     for (let i = 0; i < 3; i++) {
@@ -45,7 +45,7 @@ describe('Structural Directives', function () {
     }
   });
 
-  it('myUnless should show 1 paragraph (B) after toggling condition', function () {
+  it('appUnless should show 1 paragraph (B) after toggling condition', function () {
     const toggleConditionButton = element.all(by.cssContainingText('button', 'Toggle condition')).get(0);
     const paragraph = element.all(by.css('p.unless'));
 

aio/content/examples/structural-directives/src/app/app.component.html

@@ -188,7 +188,7 @@
 
 <hr>
 
-<h2 id="myUnless">UnlessDirective</h2>
+<h2 id="appUnless">UnlessDirective</h2>
 <p>
   The condition is currently
   <span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.
@@ -198,31 +198,31 @@
     Toggle condition to {{condition ? 'false' : 'true'}}
   </button>
 </p>
-<!-- #docregion myUnless-->
+<!-- #docregion appUnless-->
 <p *appUnless="condition" class="unless a">
   (A) This paragraph is displayed because the condition is false.
 </p>
 
 <p *appUnless="!condition" class="unless b">
   (B) Although the condition is true,
-  this paragraph is displayed because myUnless is set to false.
+  this paragraph is displayed because appUnless is set to false.
 </p>
-<!-- #enddocregion myUnless-->
+<!-- #enddocregion appUnless-->
 
 
 <h4>UnlessDirective with template</h4>
 
-<!-- #docregion myUnless-1 -->
+<!-- #docregion appUnless-1 -->
 <p *appUnless="condition">Show this sentence unless the condition is true.</p>
-<!-- #enddocregion myUnless-1 -->
+<!-- #enddocregion appUnless-1 -->
 
 <p *appUnless="condition" class="code unless">
-  (A) &lt;p *myUnless="condition" class="code unless"&gt;
+  (A) &lt;p *appUnless="condition" class="code unless"&gt;
 </p>
 
 <ng-template [appUnless]="condition">
   <p class="code unless">
-    (A) &lt;ng-template [myUnless]="condition"&gt;
+    (A) &lt;ng-template [appUnless]="condition"&gt;
   </p>
 </ng-template>
 

aio/content/examples/structural-directives/src/app/unless.directive.ts

@@ -8,7 +8,7 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  * Add the template content to the DOM unless the condition is true.
 // #enddocregion no-docs
  *
- * If the expression assigned to `myUnless` evaluates to a truthy value
+ * If the expression assigned to `appUnless` evaluates to a truthy value
  * then the templated elements are removed removed from the DOM,
  * the templated elements are (re)inserted into the DOM.
  *
@@ -18,8 +18,8 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  *
  * ### Syntax
  *
- * - `<div *myUnless="condition">...</div>`
- * - `<ng-template [myUnless]="condition"><div>...</div></ng-template>`
+ * - `<div *appUnless="condition">...</div>`
+ * - `<ng-template [appUnless]="condition"><div>...</div></ng-template>`
  *
 // #docregion no-docs
  */

aio/content/guide/structural-directives.md

@@ -625,7 +625,7 @@ that does the opposite of `NgIf`.
 `UnlessDirective` displays the content when the condition is ***false***.
 
 
-<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (myUnless-1)" region="myUnless-1">
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (appUnless-1)" region="appUnless-1">
 
 </code-example>
 
@@ -650,14 +650,14 @@ Here's how you might begin:
 
 
 
-The directive's _selector_ is typically the directive's **attribute name** in square brackets, `[myUnless]`.
+The directive's _selector_ is typically the directive's **attribute name** in square brackets, `[appUnless]`.
 The brackets define a CSS
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" title="MDN: Attribute selectors">attribute selector</a>.
 
 The directive _attribute name_ should be spelled in _lowerCamelCase_ and begin with a prefix.
 Don't use `ng`. That prefix belongs to Angular.
 Pick something short that fits you or your company.
-In this example, the prefix is `my`.
+In this example, the prefix is `app`.
 
 
 The directive _class_ name ends in `Directive` per the [style guide](guide/styleguide#02-03 "Angular Style Guide").
@@ -685,10 +685,10 @@ You inject both in the directive constructor as private variables of the class.
 
 
 
-### The _myUnless_ property
+### The _appUnless_ property
 
-The directive consumer expects to bind a true/false condition to `[myUnless]`.
-That means the directive needs a `myUnless` property, decorated with `@Input`
+The directive consumer expects to bind a true/false condition to `[appUnless]`.
+That means the directive needs an `appUnless` property, decorated with `@Input`
 
 
 <div class="l-sub-section">
@@ -708,8 +708,8 @@ Read about `@Input` in the [_Template Syntax_](guide/template-syntax#inputs-outp
 
 
 
-Angular sets the  `myUnless` property whenever the value of the condition changes.
-Because the `myUnless` property does work, it needs a setter.
+Angular sets the `appUnless` property whenever the value of the condition changes.
+Because the `appUnless` property does work, it needs a setter.
 
 * If the condition is falsy and the view hasn't been created previously,
 tell the _view container_ to create the _embedded view_ from the template.
@@ -717,7 +717,7 @@ tell the _view container_ to create the _embedded view_ from the template.
 * If the condition is truthy and the view is currently displayed,
 clear the container which also destroys the view.
 
-Nobody reads the `myUnless` property so it doesn't need a getter.
+Nobody reads the `appUnless` property so it doesn't need a getter.
 
 The completed directive code looks like this:
 
@@ -733,7 +733,7 @@ Add this directive to the `declarations` array of the AppModule.
 Then create some HTML to try it.
 
 
-<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (myUnless)" region="myUnless">
+<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (appUnless)" region="appUnless">
 
 </code-example>