5 lines
19 KiB
JSON
5 lines
19 KiB
JSON
{
|
|
"id": "api/common/CommonModule",
|
|
"title": "CommonModule",
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/common\", \"name\": \"@angular/common\" } },\n { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/common/CommonModule\", \"name\": \"CommonModule\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/common\">@angular/common</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/common/src/common_module.ts?message=docs(common)%3A%20describe%20your%20change...#L13-L38\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/common/src/common_module.ts#L13-L38\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n <header class=\"api-header\">\n <h1 id=\"commonmodule\">CommonModule<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/CommonModule#commonmodule\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label ngmodule\">ngmodule</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\n <p>Exports all the basic Angular directives and pipes,\nsuch as <code><a href=\"api/common/NgIf\" class=\"code-anchor\">NgIf</a></code>, <code><a href=\"api/common/NgForOf\" class=\"code-anchor\">NgForOf</a></code>, <code><a href=\"api/common/DecimalPipe\" class=\"code-anchor\">DecimalPipe</a></code>, and so on.\nRe-exported by <code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code>, which is included automatically in the root\n<code>AppModule</code> when you create a new app with the CLI <code>new</code> command.</p>\n\n <p><a href=\"api/common/CommonModule#description\">See more...</a></p>\n </section>\n \n \n \n <section class=\"ngmodule-overview\">\n<code-example language=\"ts\" hidecopy=\"true\">\nclass <a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a> {\n}\n</code-example>\n\n \n \n\n</section>\n\n\n \n\n \n \n \n<section class=\"description\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/CommonModule#description\"><i class=\"material-icons\">link</i></a></h2>\n <ul>\n<li>The <code>providers</code> options configure the NgModule's injector to provide\nlocalization dependencies to members.</li>\n<li>The <code>exports</code> options make the declared directives and pipes available for import\nby other NgModules.</li>\n</ul>\n\n \n</section>\n\n \n\n \n\n \n\n \n\n\n \n\n\n \n \n<section class=\"providers\">\n <h2 id=\"providers\">Providers<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/CommonModule#providers\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table property-table\">\n <thead>\n <tr>\n <th>Provider</th>\n </tr>\n </thead>\n <tbody>\n \n <tr>\n <td>\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">\n { provide: <a href=\"api/common/NgLocalization\" class=\"code-anchor\">NgLocalization</a>, useClass: <a href=\"api/common/NgLocaleLocalization\" class=\"code-anchor\">NgLocaleLocalization</a> }\n </code-example>\n </td>\n </tr>\n \n </tbody>\n </table>\n </section>\n\n \n\n \n \n<section class=\"directives\">\n <h2 id=\"directives\">Directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/CommonModule#directives\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table directive-table\">\n <thead>\n <tr><th>Name</th><th>Description</th></tr>\n </thead>\n <tbody>\n \n <tr>\n <td>\n <a href=\"api/common/NgClass\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgClass</code-example>\n </a>\n </td>\n <td>\n \n <p>Adds and removes CSS classes on an HTML element.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/NgComponentOutlet\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgComponentOutlet</code-example>\n </a>\n </td>\n <td>\n \n <p>Instantiates a single <a href=\"api/core/Component\"><code>Component</code></a> type and inserts its Host View into current View.\n<code><a href=\"api/common/NgComponentOutlet\" class=\"code-anchor\">NgComponentOutlet</a></code> provides a declarative approach for dynamic component creation.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/NgForOf\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgForOf</code-example>\n </a>\n </td>\n <td>\n \n <p>A <a href=\"guide/structural-directives\">structural directive</a> that renders\na template for each item in a collection.\nThe directive is placed on an element, which becomes the parent\nof the cloned templates.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/NgIf\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgIf</code-example>\n </a>\n </td>\n <td>\n \n <p>A structural directive that conditionally includes a template based on the value of\nan expression coerced to Boolean.\nWhen the expression evaluates to true, Angular renders the template\nprovided in a <code>then</code> clause, and when false or null,\nAngular renders the template provided in an optional <code>else</code> clause. The default\ntemplate for the <code>else</code> clause is blank.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/NgPlural\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgPlural</code-example>\n </a>\n </td>\n <td>\n \n <p>Adds / removes DOM sub-trees based on a numeric value. Tailored for pluralization.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/NgPluralCase\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgPluralCase</code-example>\n </a>\n </td>\n <td>\n \n <p>Creates a view that will be added/removed from the parent <a href=\"api/common/NgPlural\"><code>NgPlural</code></a> when the\ngiven expression matches the plural expression according to CLDR rules.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/NgStyle\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgStyle</code-example>\n </a>\n </td>\n <td>\n \n <p>An attribute directive that updates styles for the containing HTML element.\nSets one or more style properties, specified as colon-separated key-value pairs.\nThe key is a style name, with an optional <code>.<unit></code> suffix\n(such as 'top.px', 'font-style.em').\nThe value is an expression to be evaluated.\nThe resulting non-null value, expressed in the given unit,\nis assigned to the given style property.\nIf the result of evaluation is null, the corresponding style is removed.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/NgSwitch\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgSwitch</code-example>\n </a>\n </td>\n <td>\n \n <p>The <code>[<a href=\"api/common/NgSwitch\" class=\"code-anchor\">ngSwitch</a>]</code> directive on a container specifies an expression to match against.\nThe expressions to match are provided by <code><a href=\"api/common/NgSwitchCase\" class=\"code-anchor\">ngSwitchCase</a></code> directives on views within the container.</p>\n<ul>\n<li>Every view that matches is rendered.</li>\n<li>If there are no matches, a view with the <code><a href=\"api/common/NgSwitchDefault\" class=\"code-anchor\">ngSwitchDefault</a></code> directive is rendered.</li>\n<li>Elements within the <code>[<a href=\"api/common/NgSwitch\" class=\"code-anchor\">NgSwitch</a>]</code> statement but outside of any <code><a href=\"api/common/NgSwitchCase\" class=\"code-anchor\">NgSwitchCase</a></code>\nor <code><a href=\"api/common/NgSwitchDefault\" class=\"code-anchor\">ngSwitchDefault</a></code> directive are preserved at the location.</li>\n</ul>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/NgSwitchCase\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgSwitchCase</code-example>\n </a>\n </td>\n <td>\n \n <p>Provides a switch case expression to match against an enclosing <code><a href=\"api/common/NgSwitch\" class=\"code-anchor\">ngSwitch</a></code> expression.\nWhen the expressions match, the given <code><a href=\"api/common/NgSwitchCase\" class=\"code-anchor\">NgSwitchCase</a></code> template is rendered.\nIf multiple match expressions match the switch expression value, all of them are displayed.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/NgSwitchDefault\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgSwitchDefault</code-example>\n </a>\n </td>\n <td>\n \n <p>Creates a view that is rendered when no <code><a href=\"api/common/NgSwitchCase\" class=\"code-anchor\">NgSwitchCase</a></code> expressions\nmatch the <code><a href=\"api/common/NgSwitch\" class=\"code-anchor\">NgSwitch</a></code> expression.\nThis statement should be the final case in an <code><a href=\"api/common/NgSwitch\" class=\"code-anchor\">NgSwitch</a></code>.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/NgTemplateOutlet\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgTemplateOutlet</code-example>\n </a>\n </td>\n <td>\n \n <p>Inserts an embedded view from a prepared <code><a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a></code>.</p>\n\n </td>\n </tr>\n \n </tbody>\n </table>\n</section>\n\n \n \n \n<section class=\"pipes\">\n <h2 id=\"pipes\">Pipes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/CommonModule#pipes\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table pipe-table\">\n <thead>\n <tr><th>Name</th><th>Description</th></tr>\n </thead>\n <tbody>\n \n <tr>\n <td>\n <a href=\"api/common/AsyncPipe\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">AsyncPipe</code-example>\n </a>\n </td>\n <td>\n \n <p>Unwraps a value from an asynchronous primitive.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/CurrencyPipe\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">CurrencyPipe</code-example>\n </a>\n </td>\n <td>\n \n <p>Transforms a number to a currency string, formatted according to locale rules\nthat determine group sizing and separator, decimal-point character,\nand other locale-specific configurations.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/DatePipe\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">DatePipe</code-example>\n </a>\n </td>\n <td>\n \n <p>Formats a date value according to locale rules.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/DecimalPipe\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">DecimalPipe</code-example>\n </a>\n </td>\n <td>\n \n <p>Formats a value according to digit options and locale rules.\nLocale determines group sizing and separator,\ndecimal point character, and other locale-specific configurations.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/I18nPluralPipe\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">I18nPluralPipe</code-example>\n </a>\n </td>\n <td>\n \n <p>Maps a value to a string that pluralizes the value according to locale rules.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/I18nSelectPipe\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">I18nSelectPipe</code-example>\n </a>\n </td>\n <td>\n \n <p>Generic selector that displays the string that matches the current value.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/JsonPipe\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">JsonPipe</code-example>\n </a>\n </td>\n <td>\n \n <p>Converts a value into its JSON-format representation. Useful for debugging.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/KeyValuePipe\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">KeyValuePipe</code-example>\n </a>\n </td>\n <td>\n \n <p>Transforms Object or Map into an array of key value pairs.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/LowerCasePipe\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">LowerCasePipe</code-example>\n </a>\n </td>\n <td>\n \n <p>Transforms text to all lower case.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/PercentPipe\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">PercentPipe</code-example>\n </a>\n </td>\n <td>\n \n <p>Transforms a number to a percentage\nstring, formatted according to locale rules that determine group sizing and\nseparator, decimal-point character, and other locale-specific\nconfigurations.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/SlicePipe\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">SlicePipe</code-example>\n </a>\n </td>\n <td>\n \n <p>Creates a new <code>Array</code> or <code>String</code> containing a subset (slice) of the elements.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/TitleCasePipe\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">TitleCasePipe</code-example>\n </a>\n </td>\n <td>\n \n <p>Transforms text to title case.\nCapitalizes the first letter of each word and transforms the\nrest of the word to lower case.\nWords are delimited by any whitespace character, such as a space, tab, or line-feed character.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/common/UpperCasePipe\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">UpperCasePipe</code-example>\n </a>\n </td>\n <td>\n \n <p>Transforms text to all upper case.</p>\n\n </td>\n </tr>\n \n </tbody>\n </table>\n</section>\n\n \n\n\n \n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/common\n - api/common/AsyncPipe\n - api/common/CurrencyPipe\n - api/common/DatePipe\n - api/common/DecimalPipe\n - api/common/I18nPluralPipe\n - api/common/I18nSelectPipe\n - api/common/JsonPipe\n - api/common/KeyValuePipe\n - api/common/LowerCasePipe\n - api/common/NgClass\n - api/common/NgComponentOutlet\n - api/common/NgForOf\n - api/common/NgIf\n - api/common/NgPlural\n - api/common/NgPluralCase\n - api/common/NgStyle\n - api/common/NgSwitch\n - api/common/NgSwitchCase\n - api/common/NgSwitchDefault\n - api/common/NgTemplateOutlet\n - api/common/PercentPipe\n - api/common/SlicePipe\n - api/common/TitleCasePipe\n - api/common/UpperCasePipe\n - api/core/NgModule\n - api/platform-browser\n - api/platform-browser/BrowserModule\n - guide/cheatsheet\n - guide/feature-modules\n - guide/frequent-ngmodules\n - guide/lazy-loading-ngmodules\n - guide/ngmodule-api\n - guide/ngmodule-faq\n - guide/router-tutorial-toh\n - guide/sharing-ngmodules\n - guide/singleton-services\n - guide/styleguide\n - guide/testing-components-scenarios\n - tutorial/toh-pt5\n-->\n<!-- links from this doc:\n - /api\n - api/common\n - api/common/AsyncPipe\n - api/common/CommonModule#commonmodule\n - api/common/CommonModule#description\n - api/common/CommonModule#directives\n - api/common/CommonModule#pipes\n - api/common/CommonModule#providers\n - api/common/CurrencyPipe\n - api/common/DatePipe\n - api/common/DecimalPipe\n - api/common/I18nPluralPipe\n - api/common/I18nSelectPipe\n - api/common/JsonPipe\n - api/common/KeyValuePipe\n - api/common/LowerCasePipe\n - api/common/NgClass\n - api/common/NgComponentOutlet\n - api/common/NgForOf\n - api/common/NgIf\n - api/common/NgLocaleLocalization\n - api/common/NgLocalization\n - api/common/NgPlural\n - api/common/NgPluralCase\n - api/common/NgStyle\n - api/common/NgSwitch\n - api/common/NgSwitchCase\n - api/common/NgSwitchDefault\n - api/common/NgTemplateOutlet\n - api/common/PercentPipe\n - api/common/SlicePipe\n - api/common/TitleCasePipe\n - api/common/UpperCasePipe\n - api/core/Component\n - api/core/TemplateRef\n - api/platform-browser/BrowserModule\n - guide/structural-directives\n - https://github.com/angular/angular/edit/master/packages/common/src/common_module.ts?message=docs(common)%3A%20describe%20your%20change...#L13-L38\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/common/src/common_module.ts#L13-L38\n-->"
|
|
} |