diff --git a/aio/content/examples/structural-directives/e2e/app.e2e-spec.ts b/aio/content/examples/structural-directives/e2e/app.e2e-spec.ts
index 7cefa4636c..a877fb3223 100644
--- a/aio/content/examples/structural-directives/e2e/app.e2e-spec.ts
+++ b/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'));
diff --git a/aio/content/examples/structural-directives/src/app/app.component.html b/aio/content/examples/structural-directives/src/app/app.component.html
index f598e05c85..e6205d30d9 100644
--- a/aio/content/examples/structural-directives/src/app/app.component.html
+++ b/aio/content/examples/structural-directives/src/app/app.component.html
@@ -188,7 +188,7 @@
-UnlessDirective
+UnlessDirective
The condition is currently
{{condition}}.
@@ -198,31 +198,31 @@
Toggle condition to {{condition ? 'false' : 'true'}}
-
+
(A) This paragraph is displayed because the condition is false.
(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.
-
+
UnlessDirective with template
-
+
Show this sentence unless the condition is true.
-
+
- (A) <p *myUnless="condition" class="code unless">
+ (A) <p *appUnless="condition" class="code unless">
- (A) <ng-template [myUnless]="condition">
+ (A) <ng-template [appUnless]="condition">
diff --git a/aio/content/examples/structural-directives/src/app/unless.directive.ts b/aio/content/examples/structural-directives/src/app/unless.directive.ts
index 09f98e1707..5f91ddbc28 100644
--- a/aio/content/examples/structural-directives/src/app/unless.directive.ts
+++ b/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
*
- * - `...
`
- * - `...
`
+ * - `...
`
+ * - `...
`
*
// #docregion no-docs
*/
diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md
index 45831ca3f8..754bf37158 100644
--- a/aio/content/guide/structural-directives.md
+++ b/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***.
-
+
@@ -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
attribute selector.
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`
@@ -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.
-
+