Skip to content

Commit 9741f5b

Browse files
jbogarthydeAndrewKushnir
authored andcommitted
docs: new doc for core directives (angular#26923)
PR Close angular#26923
1 parent 1b97971 commit 9741f5b

File tree

1 file changed

+66
-83
lines changed

1 file changed

+66
-83
lines changed

packages/core/src/metadata/directives.ts

+66-83
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@ export interface Directive {
136136
* id: string;
137137
*
138138
* ```
139+
*
139140
*/
140141
inputs?: string[];
141142

@@ -170,6 +171,7 @@ export interface Directive {
170171
* class MainComponent {
171172
* }
172173
* ```
174+
*
173175
*/
174176
outputs?: string[];
175177

@@ -201,6 +203,7 @@ export interface Directive {
201203
* class MainComponent {
202204
* }
203205
* ```
206+
*
204207
*/
205208
exportAs?: string;
206209

@@ -436,6 +439,67 @@ export interface ComponentDecorator {
436439
*
437440
* ```
438441
*
442+
* ### Preserving whitespace
443+
*
444+
* Removing whitespace can greatly reduce AOT-generated code size and speed up view creation.
445+
* As of Angular 6, the default for `preserveWhitespaces` is false (whitespace is removed).
446+
* To change the default setting for all components in your application, set
447+
* the `preserveWhitespaces` option of the AOT compiler.
448+
*
449+
* By default, the AOT compiler removes whitespace characters as follows:
450+
* * Trims all whitespaces at the beginning and the end of a template.
451+
* * Removes whitespace-only text nodes. For example,
452+
*
453+
* ```
454+
* <button>Action 1</button> <button>Action 2</button>
455+
* ```
456+
*
457+
* becomes:
458+
*
459+
* ```
460+
* <button>Action 1</button><button>Action 2</button>
461+
* ```
462+
*
463+
* * Replaces a series of whitespace characters in text nodes with a single space.
464+
* For example, `<span>\n some text\n</span>` becomes `<span> some text </span>`.
465+
* * Does NOT alter text nodes inside HTML tags such as `<pre>` or `<textarea>`,
466+
* where whitespace characters are significant.
467+
*
468+
* Note that these transformations can influence DOM nodes layout, although impact
469+
* should be minimal.
470+
*
471+
* You can override the default behavior to preserve whitespace characters
472+
* in certain fragments of a template. For example, you can exclude an entire
473+
* DOM sub-tree by using the `ngPreserveWhitespaces` attribute:
474+
*
475+
* ```html
476+
* <div ngPreserveWhitespaces>
477+
* whitespaces are preserved here
478+
* <span> and here </span>
479+
* </div>
480+
* ```
481+
*
482+
* You can force a single space to be preserved in a text node by using `&ngsp;`,
483+
* which is replaced with a space character by Angular's template
484+
* compiler:
485+
*
486+
* ```html
487+
* <a>Spaces</a>&ngsp;<a>between</a>&ngsp;<a>links.</a>
488+
* <!-->compiled to be equivalent to:</>
489+
* <a>Spaces</a> <a>between</a> <a>links.</a>
490+
* ```
491+
*
492+
* Note that sequences of `&ngsp;` are still collapsed to just one space character when
493+
* the `preserveWhitespaces` option is set to `false`.
494+
*
495+
* ```html
496+
* <a>before</a>&ngsp;&ngsp;&ngsp;<a>after</a>
497+
* <!-->compiled to be equivalent to:</>
498+
* <a>Spaces</a> <a>between</a> <a>links.</a>
499+
* ```
500+
*
501+
* To preserve sequences of whitespace characters, use the
502+
* `ngPreserveWhitespaces` attribute.
439503
*
440504
* @Annotation
441505
*/
@@ -553,89 +617,6 @@ export interface Component extends Directive {
553617
/**
554618
* Component decorator and metadata.
555619
*
556-
* @usageNotes
557-
*
558-
* ### Using animations
559-
*
560-
* The following snippet shows an animation trigger in a component's
561-
* metadata. The trigger is attached to an element in the component's
562-
* template, using "@_trigger_name_", and a state expression that is evaluated
563-
* at run time to determine whether the animation should start.
564-
*
565-
* ```typescript
566-
* @Component({
567-
* selector: 'animation-cmp',
568-
* templateUrl: 'animation-cmp.html',
569-
* animations: [
570-
* trigger('myTriggerName', [
571-
* state('on', style({ opacity: 1 }),
572-
* state('off', style({ opacity: 0 }),
573-
* transition('on => off', [
574-
* animate("1s")
575-
* ])
576-
* ])
577-
* ]
578-
* })
579-
* ```
580-
*
581-
* ```html
582-
* <!-- animation-cmp.html -->
583-
* <div @myTriggerName="expression">...</div>
584-
* ```
585-
*
586-
* ### Preserving whitespace
587-
*
588-
* Removing whitespace can greatly reduce AOT-generated code size, and speed up view creation.
589-
* As of Angular 6, default for `preserveWhitespaces` is false (whitespace is removed).
590-
* To change the default setting for all components in your application, set
591-
* the `preserveWhitespaces` option of the AOT compiler.
592-
*
593-
* Current implementation removes whitespace characters as follows:
594-
* - Trims all whitespaces at the beginning and the end of a template.
595-
* - Removes whitespace-only text nodes. For example,
596-
* `<button>Action 1</button> <button>Action 2</button>` becomes
597-
* `<button>Action 1</button><button>Action 2</button>`.
598-
* - Replaces a series of whitespace characters in text nodes with a single space.
599-
* For example, `<span>\n some text\n</span>` becomes `<span> some text </span>`.
600-
* - Does NOT alter text nodes inside HTML tags such as `<pre>` or `<textarea>`,
601-
* where whitespace characters are significant.
602-
*
603-
* Note that these transformations can influence DOM nodes layout, although impact
604-
* should be minimal.
605-
*
606-
* You can override the default behavior to preserve whitespace characters
607-
* in certain fragments of a template. For example, you can exclude an entire
608-
* DOM sub-tree by using the `ngPreserveWhitespaces` attribute:
609-
*
610-
* ```html
611-
* <div ngPreserveWhitespaces>
612-
* whitespaces are preserved here
613-
* <span> and here </span>
614-
* </div>
615-
* ```
616-
*
617-
* You can force a single space to be preserved in a text node by using `&ngsp;`,
618-
* which is replaced with a space character by Angular's template
619-
* compiler:
620-
*
621-
* ```html
622-
* <a>Spaces</a>&ngsp;<a>between</a>&ngsp;<a>links.</a>
623-
* <!-->compiled to be equivalent to:</>
624-
* <a>Spaces</a> <a>between</a> <a>links.</a>
625-
* ```
626-
*
627-
* Note that sequences of `&ngsp;` are still collapsed to just one space character when
628-
* the `preserveWhitespaces` option is set to `false`.
629-
*
630-
* ```html
631-
* <a>before</a>&ngsp;&ngsp;&ngsp;<a>after</a>
632-
* <!-->compiled to be equivalent to:</>
633-
* <a>Spaces</a> <a>between</a> <a>links.</a>
634-
* ```
635-
*
636-
* To preserve sequences of whitespace characters, use the
637-
* `ngPreserveWhitespaces` attribute.
638-
*
639620
* @Annotation
640621
* @publicApi
641622
*/
@@ -769,6 +750,7 @@ export interface Input {
769750
*
770751
* class App {}
771752
* ```
753+
*
772754
*/
773755
bindingPropertyName?: string;
774756
}
@@ -888,6 +870,7 @@ export interface HostBindingDecorator {
888870
* prop;
889871
* }
890872
* ```
873+
*
891874
*/
892875
(hostPropertyName?: string): any;
893876
new (hostPropertyName?: string): any;

0 commit comments

Comments
 (0)