main - 5782834 docs: replace angular.io links with angular.dev (#29734)

naaajii · naaajii · commit 58db5f27fa75 · 2024-09-19T11:02:30.000Z
diff --git a/docs-content/examples-highlighted/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example-ts.html b/docs-content/examples-highlighted/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example-ts.html
@@ -3,7 +3,7 @@
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */</span>
 
 <span class="hljs-keyword">import</span> {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
diff --git a/docs-content/examples-highlighted/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example-ts.html b/docs-content/examples-highlighted/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example-ts.html
@@ -3,7 +3,7 @@
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */</span>
 
 <span class="hljs-keyword">import</span> {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
diff --git a/docs-content/examples-highlighted/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example-ts.html b/docs-content/examples-highlighted/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example-ts.html
@@ -3,7 +3,7 @@
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */</span>
 
 <span class="hljs-keyword">import</span> {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
diff --git a/docs-content/examples-highlighted/material/stepper/stepper-animations/stepper-animations-example-ts.html b/docs-content/examples-highlighted/material/stepper/stepper-animations/stepper-animations-example-ts.html
@@ -3,7 +3,7 @@
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */</span>
 
 <span class="hljs-keyword">import</span> {Component, inject} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
diff --git a/docs-content/examples-highlighted/material/tree/tree-loadmore/tree-loadmore-example-ts.html b/docs-content/examples-highlighted/material/tree/tree-loadmore/tree-loadmore-example-ts.html
@@ -3,7 +3,7 @@
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */</span>
 <span class="hljs-keyword">import</span> {FlatTreeControl} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/tree&#x27;</span>;
 <span class="hljs-keyword">import</span> {ChangeDetectionStrategy, Component, Injectable, inject} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
diff --git a/docs-content/examples-source/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.ts b/docs-content/examples-source/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.ts
@@ -3,7 +3,7 @@
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 
 import {Component} from '@angular/core';
diff --git a/docs-content/examples-source/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.ts b/docs-content/examples-source/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.ts
@@ -3,7 +3,7 @@
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 
 import {Component} from '@angular/core';
diff --git a/docs-content/examples-source/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.ts b/docs-content/examples-source/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.ts
@@ -3,7 +3,7 @@
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 
 import {Component} from '@angular/core';
diff --git a/docs-content/examples-source/material/stepper/stepper-animations/stepper-animations-example.ts b/docs-content/examples-source/material/stepper/stepper-animations/stepper-animations-example.ts
@@ -3,7 +3,7 @@
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 
 import {Component, inject} from '@angular/core';
diff --git a/docs-content/examples-source/material/tree/tree-loadmore/tree-loadmore-example.ts b/docs-content/examples-source/material/tree/tree-loadmore/tree-loadmore-example.ts
@@ -3,7 +3,7 @@
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 import {FlatTreeControl} from '@angular/cdk/tree';
 import {ChangeDetectionStrategy, Component, Injectable, inject} from '@angular/core';
diff --git a/docs-content/guides/creating-a-custom-form-field-control.html b/docs-content/guides/creating-a-custom-form-field-control.html
@@ -208,7 +208,7 @@ <h4 id="ngcontrol" class="docs-header-link">
   }
 }
 </code></pre>
-<p>For additional information about <code>ControlValueAccessor</code> see the <a href="https://angular.io/api/forms/ControlValueAccessor">API docs</a>.</p>
+<p>For additional information about <code>ControlValueAccessor</code> see the <a href="https://angular.dev/api/forms/ControlValueAccessor">API docs</a>.</p>
 
         <h4 id="focused" class="docs-header-link">
           <span header-link="focused"></span>
diff --git a/docs-content/guides/customizing-component-styles.html b/docs-content/guides/customizing-component-styles.html
@@ -45,7 +45,7 @@ <h3 id="view-encapsulation" class="docs-header-link">
 that the styles you author affect only the elements directly within your component template.
 Encapsulated styles do <em>not</em> affect elements that are children of other components within your
 template. You can read more about view encapsulation in the
-<a href="https://angular.io/guide/component-styles#view-encapsulation">Angular documentation</a>. You may
+<a href="https://angular.dev/guide/components/styling#style-scoping">Angular documentation</a>. You may
 also wish to review
 <a href="https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700"><em>The State of CSS in Angular</em></a>
 on the Angular blog.</p>
@@ -66,7 +66,7 @@ <h4 id="bypassing-encapsulation" class="docs-header-link">
 <li>Disable view encapsulation for your component. This approach effectively turns your component
 styles into global CSS.</li>
 <li>Apply the deprecated <code>::ng-deep</code> pseudo-class to a CSS rule. Any CSS rule with <code>::ng-deep</code>
-becomes a global style. <a href="https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep">See the Angular documentation for more on <code>::ng-deep</code></a>.</li>
+becomes a global style. <a href="https://angular.dev/guide/components/styling#ng-deep">See the Angular documentation for more on <code>::ng-deep</code></a>.</li>
 </ol>
 <p>All of these approaches involve creating global CSS that isn&#39;t affected by style encapsulation.
 Global CSS affects all elements in your application. Global CSS class names may collide with class
diff --git a/docs-content/guides/getting-started.html b/docs-content/guides/getting-started.html
@@ -22,7 +22,7 @@ <h2 id="install-angular-material" class="docs-header-link">
 <p>Whether to apply the global <a href="https://material.angular.io/guide/typography">typography</a> styles to your application.</p>
 </li>
 <li><p>Set up browser animations for Angular Material:</p>
-<p>Importing the <a href="https://angular.io/api/platform-browser/animations/BrowserAnimationsModule"><code>BrowserAnimationsModule</code></a> into your application enables Angular&#39;s <a href="https://angular.dev/guide/animations">animation system</a>. Declining this will disable most of Angular Material&#39;s animations.</p>
+<p>Importing the <a href="https://angular.dev/api/platform-browser/animations/BrowserAnimationsModule"><code>BrowserAnimationsModule</code></a> into your application enables Angular&#39;s <a href="https://angular.dev/guide/animations">animation system</a>. Declining this will disable most of Angular Material&#39;s animations.</p>
 </li>
 </ol>
 <p>The <code>ng add</code> command will additionally perform the following actions:</p>
diff --git a/docs-content/guides/material-2.html b/docs-content/guides/material-2.html
@@ -221,7 +221,7 @@ <h4 id="applying-a-theme-to-components" class="docs-header-link">
 
 <span class="hljs-keyword">@include</span> mat.all-component-themes(<span class="hljs-variable">$my-theme</span>);
 </code></pre>
-<p>To include the emitted styles in your application, <a href="https://angular.io/guide/workspace-config#styles-and-scripts-configuration">add your theme file to the <code>styles</code> array of
+<p>To include the emitted styles in your application, <a href="https://angular.dev/reference/configs/workspace-config#styles-and-scripts-configuration">add your theme file to the <code>styles</code> array of
 your project&#39;s <code>angular.json</code> file</a>.</p>
 
         <h4 id="theming-dimensions" class="docs-header-link">
@@ -322,7 +322,7 @@ <h3 id="using-a-pre-built-theme" class="docs-header-link">
 theme definitions.</p>
 <p>You can find the pre-built theme files in the &quot;prebuilt-themes&quot; directory of Angular Material&#39;s
 npm package (<code>@angular/material/prebuilt-themes</code>). To include the pre-built theme in your
-application, <a href="https://angular.io/guide/workspace-config#styles-and-scripts-configuration">add your chosen CSS file to the <code>styles</code> array of your project&#39;s <code>angular.json</code>
+application, <a href="https://angular.dev/reference/configs/workspace-config#styles-and-scripts-configuration">add your chosen CSS file to the <code>styles</code> array of your project&#39;s <code>angular.json</code>
 file</a>.</p>
 
         <h3 id="defining-multiple-themes" class="docs-header-link">
@@ -894,7 +894,7 @@ <h3 id="including-font-assets" class="docs-header-link">
 <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap&quot;</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span>&gt;</span>
 </code></pre>
 <p>See <a href="https://developers.google.com/fonts/docs/getting_started">Getting Started with the Google Fonts API</a> for more about using Google Fonts. Also
-note that, by default, <a href="https://angular.io/guide/workspace-config#fonts-optimization-options">the Angular CLI inlines assets from Google Fonts to reduce render-blocking
+note that, by default, <a href="https://angular.dev/reference/configs/workspace-config#fonts-optimization-options">the Angular CLI inlines assets from Google Fonts to reduce render-blocking
 requests</a>.</p>
 
         <h3 id="typography-levels" class="docs-header-link">
diff --git a/docs-content/guides/schematics.html b/docs-content/guides/schematics.html
@@ -8,7 +8,7 @@ <h2 id="install-schematics" class="docs-header-link">
       <p>Schematics are included with both <code>@angular/cdk</code> and <code>@angular/material</code>. Once you install the npm
 packages, they will be available through the Angular CLI.</p>
 <p>Using the command below will install Angular Material, the <a href="https://material.angular.io/cdk">Component Dev Kit</a> (CDK),
-and <a href="https://angular.io/guide/animations">Angular Animations</a> in your project. Then it will run the
+and <a href="https://angular.dev/guide/animations">Angular Animations</a> in your project. Then it will run the
 installation schematic.</p>
 <pre><code>ng add @angular/material
 </code></pre>
diff --git a/docs-content/guides/theming.html b/docs-content/guides/theming.html
@@ -345,7 +345,7 @@ <h4 id="applying-a-theme-to-components" class="docs-header-link">
   <span class="hljs-keyword">@include</span> mat.all-component-themes(<span class="hljs-variable">$my-theme</span>);
 }
 </code></pre>
-<p>To include the emitted styles in your application, <a href="https://angular.io/guide/workspace-config#styles-and-scripts-configuration">add your theme file to the <code>styles</code> array of
+<p>To include the emitted styles in your application, <a href="https://angular.dev/reference/configs/workspace-config#styles-and-scripts-configuration">add your theme file to the <code>styles</code> array of
 your project&#39;s <code>angular.json</code> file</a>.</p>
 
         <h4 id="theming-dimensions" class="docs-header-link">
diff --git a/docs-content/guides/typography.html b/docs-content/guides/typography.html
@@ -25,7 +25,7 @@ <h2 id="including-font-assets" class="docs-header-link">
 <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap&quot;</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span>&gt;</span>
 </code></pre>
 <p>See <a href="https://developers.google.com/fonts/docs/getting_started">Getting Started with the Google Fonts API</a> for more about using Google Fonts. Also
-note that, by default, <a href="https://angular.io/guide/workspace-config#fonts-optimization-options">the Angular CLI inlines assets from Google Fonts to reduce render-blocking
+note that, by default, <a href="https://angular.dev/reference/configs/workspace-config#fonts-optimization-options">the Angular CLI inlines assets from Google Fonts to reduce render-blocking
 requests</a>.</p>
 
         <h2 id="configuring-typography" class="docs-header-link">
diff --git a/docs-content/overviews/cdk/scrolling/scrolling.html b/docs-content/overviews/cdk/scrolling/scrolling.html
@@ -35,7 +35,7 @@ <h4 id="creating-items-in-the-viewport" class="docs-header-link">
           Creating items in the viewport
         </h4>
       <p><code>*cdkVirtualFor</code> replaces <code>*ngFor</code> inside of a <code>&lt;cdk-virtual-scroll-viewport&gt;</code>, supporting the exact
-same API as <a href="https://angular.io/api/common/NgForOf"><code>*ngFor</code></a>. The simplest usage just specifies the
+same API as <a href="https://angular.dev/api/common/NgForOf"><code>*ngFor</code></a>. The simplest usage just specifies the
 list of items (note that the <code>itemSize</code> property on the viewport must be set):</p>
 <div material-docs-example="cdk-virtual-scroll-overview"></div>
 
diff --git a/docs-content/overviews/cdk/table/table.html b/docs-content/overviews/cdk/table/table.html
@@ -144,7 +144,7 @@ <h5 id="trackby" class="docs-header-link">
           <code>trackBy</code>
         </h5>
       <p>To improve performance, a <code>trackBy</code> function can be provided to the table similar to Angular’s
-<a href="https://angular.io/api/common/NgForOf#change-propagation"><code>ngFor</code> <code>trackBy</code></a>. This informs the
+<a href="https://angular.dev/api/common/NgForOf?tab=usage-notes"><code>ngFor</code> <code>trackBy</code></a>. This informs the
 table how to uniquely identify rows to track how the data changes with each update.</p>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">cdk-table</span> [<span class="hljs-attr">dataSource</span>]=<span class="hljs-string">&quot;dataSource&quot;</span> [<span class="hljs-attr">trackBy</span>]=<span class="hljs-string">&quot;myTrackById&quot;</span>&gt;</span>
 </code></pre>
diff --git a/docs-content/overviews/cdk/tree/tree.html b/docs-content/overviews/cdk/tree/tree.html
@@ -173,7 +173,7 @@ <h4 id="trackby" class="docs-header-link">
           <code>trackBy</code>
         </h4>
       <p>To improve performance, a <code>trackBy</code> function can be provided to the tree similar to Angular’s
-<a href="https://angular.io/api/common/NgForOf#change-propagation"><code>ngFor</code> <code>trackBy</code></a>. This informs the
+<a href="https://angular.dev/api/common/NgForOf?tab=usage-notes"><code>ngFor</code> <code>trackBy</code></a>. This informs the
 tree how to uniquely identify nodes to track how the data changes with each update.</p>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">cdk-tree</span> [<span class="hljs-attr">dataSource</span>]=<span class="hljs-string">&quot;dataSource&quot;</span> [<span class="hljs-attr">treeControl</span>]=<span class="hljs-string">&quot;treeControl&quot;</span> [<span class="hljs-attr">trackBy</span>]=<span class="hljs-string">&quot;trackByFn&quot;</span>&gt;</span>
 </code></pre>
diff --git a/docs-content/overviews/material/autocomplete/autocomplete.html b/docs-content/overviews/material/autocomplete/autocomplete.html
@@ -19,7 +19,7 @@ <h3 id="simple-autocomplete" class="docs-header-link">
 in this example because it makes subscribing to changes in the input&#39;s value easy. For this
 example, be sure to import <code>ReactiveFormsModule</code> from <code>@angular/forms</code> into your <code>NgModule</code>.
 If you are unfamiliar with using reactive forms, you can read more about the subject in the
-<a href="https://angular.io/guide/reactive-forms">Angular documentation</a>.</p>
+<a href="https://angular.dev/guide/forms/reactive-forms">Angular documentation</a>.</p>
 </blockquote>
 <p>Now we&#39;ll need to link the text input to its panel. We can do this by exporting the autocomplete
 panel instance into a local template variable (here we called it &quot;auto&quot;), and binding that variable
diff --git a/docs-content/overviews/material/checkbox/checkbox.html b/docs-content/overviews/material/checkbox/checkbox.html
@@ -37,7 +37,7 @@ <h3 id="click-action-config" class="docs-header-link">
         </h3>
       <p>When user clicks on the <code>mat-checkbox</code>, the default behavior is toggle <code>checked</code> value and set
 <code>indeterminate</code> to <code>false</code>. This behavior can be customized by
-<a href="https://angular.io/guide/dependency-injection">providing a new value</a>
+<a href="https://angular.dev/guide/di/dependency-injection">providing a new value</a>
 of <code>MAT_CHECKBOX_DEFAULT_OPTIONS</code> to the checkbox.</p>
 <pre><code>providers: [
   {provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: &#39;noop&#39; } as MatCheckboxDefaultOptions}
diff --git a/docs-content/overviews/material/icon/icon.html b/docs-content/overviews/material/icon/icon.html
@@ -55,7 +55,7 @@ <h3 id="svg-icons" class="docs-header-link">
 <p>In order to guard against XSS vulnerabilities, any SVG URLs and HTML strings passed to the
 <code>MatIconRegistry</code> must be marked as trusted by using Angular&#39;s <code>DomSanitizer</code> service.</p>
 <p><code>MatIconRegistry</code> fetches all remote SVG icons via Angular&#39;s <code>HttpClient</code> service. If you haven&#39;t
-included <a href="https://angular.io/guide/http"><code>HttpClientModule</code> from the <code>@angular/common/http</code> package</a>
+included <a href="https://angular.dev/guide/http"><code>HttpClientModule</code> from the <code>@angular/common/http</code> package</a>
 in your <code>NgModule</code> imports, you will get an error at runtime.</p>
 <p>Note that <code>HttpClient</code> fetches SVG icons registered with a URL via <code>XmlHttpRequest</code>, subject to the
 <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a>. This
diff --git a/docs-content/overviews/material/select/select.html b/docs-content/overviews/material/select/select.html
@@ -27,7 +27,7 @@ <h3 id="getting-and-setting-the-select-value" class="docs-header-link">
 <code>ReactiveFormsModule</code> (<code>FormControl</code>, <code>FormGroup</code>, etc.) As with native <code>&lt;select&gt;</code>, <code>&lt;mat-select&gt;</code>
 also supports a <code>compareWith</code> function. (Additional information about using a custom <code>compareWith</code>
 function can be found in the
-<a href="https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection">Angular forms documentation</a>).</p>
+<a href="https://angular.dev/api/forms/SelectControlValueAccessor#compareWith">Angular forms documentation</a>).</p>
 <div material-docs-example="select-form"></div>
 
 
@@ -247,5 +247,5 @@ <h4 id="error-comparewith-must-be-a-function" class="docs-header-link">
         </h4>
       <p>This error occurs if you attempt to assign something other than a function to the <code>compareWith</code>
 property. For more information on proper usage of <code>compareWith</code> see the
-<a href="https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection">Angular forms documentation</a>).</p>
+<a href="https://angular.dev/api/forms/SelectControlValueAccessor#compareWith">Angular forms documentation</a>).</p>
 </div>
diff --git a/docs-content/overviews/material/tree/tree.html b/docs-content/overviews/material/tree/tree.html
@@ -184,7 +184,7 @@ <h4 id="trackby" class="docs-header-link">
           <code>trackBy</code>
         </h4>
       <p>To improve performance, a <code>trackBy</code> function can be provided to the tree similar to Angular’s
-<a href="https://angular.io/api/common/NgForOf#change-propagation"><code>ngFor</code> <code>trackBy</code></a>. This informs the
+<a href="https://angular.dev/api/common/NgForOf?tab=usage-notes"><code>ngFor</code> <code>trackBy</code></a>. This informs the
 tree how to uniquely identify nodes to track how the data changes with each update.</p>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-tree</span> [<span class="hljs-attr">dataSource</span>]=<span class="hljs-string">&quot;dataSource&quot;</span> [<span class="hljs-attr">treeControl</span>]=<span class="hljs-string">&quot;treeControl&quot;</span> [<span class="hljs-attr">trackBy</span>]=<span class="hljs-string">&quot;trackByFn&quot;</span>&gt;</span>
 </code></pre>
diff --git a/fesm2022/material-experimental/column-resize.mjs.map b/fesm2022/material-experimental/column-resize.mjs.map
diff --git a/fesm2022/material/stepper.mjs.map b/fesm2022/material/stepper.mjs.map
diff --git a/fesm2022/material/tree.mjs.map b/fesm2022/material/tree.mjs.map
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`* Copyright Google LLC All Rights Reserved.`
`4`	`4`	`*`
`5`	`5`	`* Use of this source code is governed by an MIT-style license that can be`
`6`		`- * found in the LICENSE file at https://angular.io/license`
	`6`	`+ * found in the LICENSE file at https://angular.dev/license`
`7`	`7`	`*/</span>`
`8`	`8`
`9`	`9`	`<span class="hljs-keyword">import</span> {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/core'</span>;`