Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
hartraft wants to merge 1 commit into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions aio/content/examples/structural-directives/e2e/app.e2e-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@ 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++) {
expect(paragraph.get(i).getText()).toContain('(A)');
}
});

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'));

Expand Down
16 changes: 8 additions & 8 deletions aio/content/examples/structural-directives/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ <h2>&lt;ng-template&gt;</h2>

<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>.
Expand All @@ -198,31 +198,31 @@ <h2 id="myUnless">UnlessDirective</h2>
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>

6 changes: 3 additions & 3 deletions aio/content/examples/structural-directives/src/app/unless.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand All @@ -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
*/
Expand Down
20 changes: 10 additions & 10 deletions aio/content/guide/structural-directives.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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").
Expand Down Expand Up @@ -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">
Expand All @@ -708,16 +708,16 @@ 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.

* 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:

Expand All @@ -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>

Expand Down