cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
fixes Issue Number: #20447

PR Close #20658
This commit is contained in:
hartraft 2017-11-28 11:03:48 +01:00 committed by Igor Minar
parent f092a7c824
commit 77ef527993
4 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,7 +37,7 @@ describe('Structural Directives', function () {
expect(paragraph.count()).toEqual(1); 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')); const paragraph = element.all(by.css('p.unless'));
expect(paragraph.count()).toEqual(3); expect(paragraph.count()).toEqual(3);
for (let i = 0; i < 3; i++) { 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 toggleConditionButton = element.all(by.cssContainingText('button', 'Toggle condition')).get(0);
const paragraph = element.all(by.css('p.unless')); const paragraph = element.all(by.css('p.unless'));

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

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

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

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

20
aio/content/guide/structural-directives.md
View File

@ -625,7 +625,7 @@ that does the opposite of `NgIf`.
`UnlessDirective` displays the content when the condition is ***false***. `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> </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 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>. <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. The directive _attribute name_ should be spelled in _lowerCamelCase_ and begin with a prefix.
Don't use `ng`. That prefix belongs to Angular. Don't use `ng`. That prefix belongs to Angular.
Pick something short that fits you or your company. 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"). 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]`. The directive consumer expects to bind a true/false condition to `[appUnless]`.
That means the directive needs a `myUnless` property, decorated with `@Input` That means the directive needs an `appUnless` property, decorated with `@Input`
<div class="l-sub-section"> <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. Angular sets the `appUnless` property whenever the value of the condition changes.
Because the `myUnless` property does work, it needs a setter. Because the `appUnless` property does work, it needs a setter.
* If the condition is falsy and the view hasn't been created previously, * 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. 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, * If the condition is truthy and the view is currently displayed,
clear the container which also destroys the view. 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: 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. 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> </code-example>