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. - +