Skip to content

Commit 3fd1a53

Browse files
yogeshwaran-cyogeshwaran-c
committed
main - 214fe14 docs(cdk/overlay): rename template variable from trigger to origin in example (#32821)
1 parent c2ba3a6 commit 3fd1a53

27 files changed

Lines changed: 210 additions & 102 deletions

File tree

‎docs-content/examples-highlighted/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example-html.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<span class="hljs-comment">&lt;!-- This button triggers the overlay and is it&#x27;s origin --&gt;</span>
2-
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;isOpen = !isOpen&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">cdkOverlayOrigin</span> #<span class="hljs-attr">trigger</span>=<span class="hljs-string">&quot;cdkOverlayOrigin&quot;</span>&gt;</span>
1+
<span class="hljs-comment">&lt;!-- This button is the origin to which the overlay is attached --&gt;</span>
2+
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;isOpen = !isOpen&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">cdkOverlayOrigin</span> #<span class="hljs-attr">origin</span>=<span class="hljs-string">&quot;cdkOverlayOrigin&quot;</span>&gt;</span>
33
{{isOpen ? &quot;Close&quot; : &quot;Open&quot;}}
44
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
55

66
<span class="hljs-comment">&lt;!-- This template displays the overlay content and is connected to the button --&gt;</span>
77
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span>
88
<span class="hljs-attr">cdkConnectedOverlay</span>
9-
[<span class="hljs-attr">cdkConnectedOverlayOrigin</span>]=<span class="hljs-string">&quot;trigger&quot;</span>
9+
[<span class="hljs-attr">cdkConnectedOverlayOrigin</span>]=<span class="hljs-string">&quot;origin&quot;</span>
1010
[<span class="hljs-attr">cdkConnectedOverlayOpen</span>]=<span class="hljs-string">&quot;isOpen&quot;</span>
1111
(<span class="hljs-attr">detach</span>)=<span class="hljs-string">&quot;isOpen = false&quot;</span>
1212
&gt;</span>

‎docs-content/examples-source/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<!-- This button triggers the overlay and is it's origin -->
2-
<button (click)="isOpen = !isOpen" type="button" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
1+
<!-- This button is the origin to which the overlay is attached -->
2+
<button (click)="isOpen = !isOpen" type="button" cdkOverlayOrigin #origin="cdkOverlayOrigin">
33
{{isOpen ? "Close" : "Open"}}
44
</button>
55

66
<!-- This template displays the overlay content and is connected to the button -->
77
<ng-template
88
cdkConnectedOverlay
9-
[cdkConnectedOverlayOrigin]="trigger"
9+
[cdkConnectedOverlayOrigin]="origin"
1010
[cdkConnectedOverlayOpen]="isOpen"
1111
(detach)="isOpen = false"
1212
>

‎docs-content/guides/getting-started.md.html‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ <h2 id="install-angular-material" class="docs-header-link">
1111
<pre><code class="language-bash">ng add @angular/material</code></pre><p>The <code>ng add</code> command will install Angular Material, the <a href="https://material.angular.dev/cdk/categories">Component Dev Kit (CDK)</a>, and will ask you the following questions to determine which features to include:</p>
1212
<ol>
1313
<li><p>Choose a prebuilt theme name, or &quot;custom&quot; for a custom theme:</p>
14-
<p>You can choose from <a href="https://material.angular.dev/guide/theming#pre-built-themes">prebuilt material design themes</a> or set up an extensible <a href="https://material.angular.dev/guide/theming#defining-a-theme">custom theme</a>.</p>
14+
<p>You can choose from <a href="https://material.angular.dev/guide/theming#prebuilt-themes">prebuilt material design themes</a> or set up an extensible <a href="https://material.angular.dev/guide/theming#getting-started">custom theme</a>.</p>
1515
</li>
1616
<li><p>Set up global Angular Material typography styles:</p>
1717
<p>Whether to apply the global <a href="https://material.angular.dev/guide/typography">typography</a> styles to your application.</p>
@@ -36,14 +36,11 @@ <h3 id="display-a-component" class="docs-header-link">
3636
Display a component
3737
</h3>
3838
<p>Let&#39;s display a slide toggle component in your app and verify that everything works.</p>
39-
<p>You need to import the <code>MatSlideToggleModule</code> that you want to display by adding the following lines to
40-
your standalone component&#39;s imports, or otherwise your component&#39;s <code>NgModule</code>.</p>
41-
<pre><code class="language-ts"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MatSlideToggleModule</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/slide-toggle&#x27;</span>;
39+
<p>You need to import the <code>MatSlideToggle</code> component by adding it to your component&#39;s <code>imports</code>:</p>
40+
<pre><code class="language-ts"><span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatSlideToggle</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/slide-toggle&#x27;</span>;
4241

43-
<span class="hljs-meta">@Component</span> ({
44-
<span class="hljs-attr">imports</span>: [
45-
<span class="hljs-title class_">MatSlideToggleModule</span>,
46-
]
42+
<span class="hljs-meta">@Component</span>({
43+
<span class="hljs-attr">imports</span>: [<span class="hljs-title class_">MatSlideToggle</span>],
4744
})
4845
<span class="hljs-keyword">class</span> <span class="hljs-title class_">AppComponent</span> {}</code></pre><p>Add the <code>&lt;mat-slide-toggle&gt;</code> tag to the <code>app.component.html</code> like so:</p>
4946
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-slide-toggle</span>&gt;</span>Toggle me!<span class="hljs-tag">&lt;/<span class="hljs-name">mat-slide-toggle</span>&gt;</span></code></pre><p>Run your local dev server:</p>

‎docs-content/guides/material-2.md.html‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1281,9 +1281,19 @@ <h3 id="pass-a-new-m3-theme-in-your-global-theme-styles" class="docs-header-link
12811281
<span header-link="pass-a-new-m3-theme-in-your-global-theme-styles"></span>
12821282
Pass a new M3 theme in your global theme styles
12831283
</h3>
1284-
<p>Create a new M3 theme object using <code>define-theme</code> and pass it everywhere you were previously passing
1285-
your M2 theme. All Angular Material mixins that take an M2 theme are compatible with M3 themes as
1286-
well.</p>
1284+
<p>Replace your M2 theme with an M3 theme. For v19 and later, use the <code>mat.theme</code>
1285+
mixin as described in the <a href="https://material.angular.dev/guide/theming">theming guide</a>:</p>
1286+
<pre><code class="language-scss"><span class="hljs-keyword">@use</span> <span class="hljs-string">&#x27;@angular/material&#x27;</span> as mat;
1287+
1288+
<span class="hljs-selector-tag">html</span> {
1289+
<span class="hljs-keyword">@include</span> mat.theme((
1290+
<span class="hljs-attribute">color</span>: mat.<span class="hljs-variable">$violet-palette</span>,
1291+
<span class="hljs-attribute">typography</span>: Roboto,
1292+
<span class="hljs-attribute">density</span>: <span class="hljs-number">0</span>,
1293+
));
1294+
}</code></pre><p>Alternatively, you can create a theme object with <code>mat.define-theme</code> and pass it
1295+
to individual component theme mixins. This approach is needed for backwards
1296+
compatibility helpers such as <code>color-variants-backwards-compatibility</code>.</p>
12871297

12881298
<h3 id="update-usages-of-apis-that-are-not-supported-for-material-3-themes" class="docs-header-link">
12891299
<span header-link="update-usages-of-apis-that-are-not-supported-for-material-3-themes"></span>

‎docs-content/guides/theming-your-components.md.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -873,7 +873,7 @@ <h2 id="material-design-2-support" class="docs-header-link">
873873

874874
<span class="hljs-variable">$theme</span>: mat.<span class="hljs-built_in">m2-define-light-theme</span>((
875875
color: (
876-
primary: mat.<span class="hljs-built_in">define-palette</span>(mat.<span class="hljs-variable">$indigo-palette</span>, <span class="hljs-number">500</span>),
876+
primary: mat.<span class="hljs-built_in">m2-define-palette</span>(mat.<span class="hljs-variable">$m2-indigo-palette</span>, <span class="hljs-number">500</span>),
877877
),
878878
...
879879
));

‎docs-content/guides/theming.md.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,83 @@ <h3 id="density" class="docs-header-link">
184184
explicitly discourages changes to density for such interactions because they
185185
don&#39;t compete for space in the application&#39;s layout.</p>
186186

187+
<h2 id="prebuilt-themes" class="docs-header-link">
188+
<span header-link="prebuilt-themes"></span>
189+
Prebuilt Themes
190+
</h2>
191+
<p>Angular Material includes eight prebuilt theme CSS files as an alternative to
192+
defining a custom theme with Sass. Four of these themes use the current Material
193+
3 design system, while the other four use the older Material 2 design system.</p>
194+
<p>If you want your application to follow the modern Material 3 design language,
195+
make sure to use one of the M3 themes. The M2 themes are provided for backwards
196+
compatibility and will be removed in a future version.</p>
197+
<table>
198+
<thead>
199+
<tr>
200+
<th>Theme</th>
201+
<th>Design system</th>
202+
<th>Light or dark?</th>
203+
<th>Palettes (primary, tertiary)</th>
204+
</tr>
205+
</thead>
206+
<tbody><tr>
207+
<td><code>azure-blue.css</code></td>
208+
<td><strong>M3</strong></td>
209+
<td>Light</td>
210+
<td>azure, blue</td>
211+
</tr>
212+
<tr>
213+
<td><code>rose-red.css</code></td>
214+
<td><strong>M3</strong></td>
215+
<td>Light</td>
216+
<td>rose, red</td>
217+
</tr>
218+
<tr>
219+
<td><code>cyan-orange.css</code></td>
220+
<td><strong>M3</strong></td>
221+
<td>Dark</td>
222+
<td>cyan, orange</td>
223+
</tr>
224+
<tr>
225+
<td><code>magenta-violet.css</code></td>
226+
<td><strong>M3</strong></td>
227+
<td>Dark</td>
228+
<td>magenta, violet</td>
229+
</tr>
230+
<tr>
231+
<td><code>deeppurple-amber.css</code></td>
232+
<td>M2</td>
233+
<td>Light</td>
234+
<td>deep-purple, amber</td>
235+
</tr>
236+
<tr>
237+
<td><code>indigo-pink.css</code></td>
238+
<td>M2</td>
239+
<td>Light</td>
240+
<td>indigo, pink</td>
241+
</tr>
242+
<tr>
243+
<td><code>pink-bluegrey.css</code></td>
244+
<td>M2</td>
245+
<td>Dark</td>
246+
<td>pink, blue-grey</td>
247+
</tr>
248+
<tr>
249+
<td><code>purple-green.css</code></td>
250+
<td>M2</td>
251+
<td>Dark</td>
252+
<td>purple, green</td>
253+
</tr>
254+
</tbody></table>
255+
<p>You can find the prebuilt theme files in the <code>prebuilt-themes</code> directory of
256+
Angular Material’s npm package (<code>@angular/material/prebuilt-themes</code>). To include
257+
a prebuilt theme in your application, add the chosen CSS file to the <code>styles</code>
258+
array of your project’s <code>angular.json</code> file:</p>
259+
<pre><code class="language-json"><span class="hljs-attr">&quot;styles&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
260+
<span class="hljs-string">&quot;@angular/material/prebuilt-themes/azure-blue.css&quot;</span>
261+
<span class="hljs-punctuation">]</span></code></pre><p>You can <a href="https://github.com/angular/components/blob/main/src/material/core/theming/prebuilt">reference the source code for these prebuilt themes</a> to see
262+
examples of complete theme definitions.</p>
263+
187264
<h2 id="color-palettes" class="docs-header-link">
188265
<span header-link="color-palettes"></span>
189266
Color Palettes

‎docs-content/overviews/cdk/a11y/a11y.md.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ <h3 id="focustrap" class="docs-header-link">
9393
be used to create accessible experience for components like
9494
<a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/">modal dialogs</a>, where focus must be
9595
constrained.</p>
96-
<p>This directive is declared in <code>A11yModule</code>.</p>
96+
<p>Import <code>CdkTrapFocus</code> in your component to use this directive.</p>
9797

9898
<h4 id="example" class="docs-header-link">
9999
<span header-link="example"></span>
@@ -143,10 +143,11 @@ <h4 id="example" class="docs-header-link">
143143
</h4>
144144
<pre><code class="language-ts"><span class="hljs-meta">@Component</span>({...})
145145
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyComponent</span> {
146+
<span class="hljs-keyword">private</span> liveAnnouncer = <span class="hljs-title function_">inject</span>(<span class="hljs-title class_">LiveAnnouncer</span>);
146147

147-
<span class="hljs-title function_">constructor</span>(<span class="hljs-params"><span class="hljs-attr">liveAnnouncer</span>: <span class="hljs-title class_">LiveAnnouncer</span></span>) {
148-
liveAnnouncer.<span class="hljs-title function_">announce</span>(<span class="hljs-string">&quot;Hey Google&quot;</span>);
149-
}
148+
<span class="hljs-title function_">announceMessage</span>(<span class="hljs-params"></span>) {
149+
<span class="hljs-variable language_">this</span>.<span class="hljs-property">liveAnnouncer</span>.<span class="hljs-title function_">announce</span>(<span class="hljs-string">&quot;Hey Google&quot;</span>);
150+
}
150151
}</code></pre>
151152
<h3 id="focusmonitor" class="docs-header-link">
152153
<span header-link="focusmonitor"></span>

‎docs-content/overviews/cdk/clipboard/clipboard.md.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ <h3 id="programmatically-copy-a-string" class="docs-header-link">
1919
<pre><code class="language-typescript"><span class="hljs-keyword">import</span> {<span class="hljs-title class_">Clipboard</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/clipboard&#x27;</span>;
2020

2121
<span class="hljs-keyword">class</span> <span class="hljs-title class_">HeroProfile</span> {
22-
<span class="hljs-title function_">constructor</span>(<span class="hljs-params"><span class="hljs-keyword">private</span> <span class="hljs-attr">clipboard</span>: <span class="hljs-title class_">Clipboard</span></span>) {}
22+
<span class="hljs-keyword">private</span> clipboard = <span class="hljs-title function_">inject</span>(<span class="hljs-title class_">Clipboard</span>);
2323

2424
<span class="hljs-title function_">copyHeroName</span>(<span class="hljs-params"></span>) {
2525
<span class="hljs-variable language_">this</span>.<span class="hljs-property">clipboard</span>.<span class="hljs-title function_">copy</span>(<span class="hljs-string">&#x27;Alphonso&#x27;</span>);
@@ -32,9 +32,9 @@ <h3 id="programmatically-copy-a-string" class="docs-header-link">
3232
<pre><code class="language-typescript"><span class="hljs-keyword">import</span> {<span class="hljs-title class_">Clipboard</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/clipboard&#x27;</span>;
3333

3434
<span class="hljs-keyword">class</span> <span class="hljs-title class_">HeroProfile</span> {
35-
<span class="hljs-attr">lifetimeAchievements</span>: <span class="hljs-built_in">string</span>;
35+
<span class="hljs-keyword">private</span> clipboard = <span class="hljs-title function_">inject</span>(<span class="hljs-title class_">Clipboard</span>);
3636

37-
<span class="hljs-title function_">constructor</span>(<span class="hljs-params"><span class="hljs-keyword">private</span> <span class="hljs-attr">clipboard</span>: <span class="hljs-title class_">Clipboard</span></span>) {}
37+
<span class="hljs-attr">lifetimeAchievements</span>: <span class="hljs-built_in">string</span>;
3838

3939
<span class="hljs-title function_">copyAchievements</span>(<span class="hljs-params"></span>) {
4040
<span class="hljs-keyword">const</span> pending = <span class="hljs-variable language_">this</span>.<span class="hljs-property">clipboard</span>.<span class="hljs-title function_">beginCopy</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">lifetimeAchievements</span>);

‎docs-content/overviews/cdk/dialog/dialog.md.html‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,11 @@ <h3 id="initial-setup" class="docs-header-link">
3131
dialogRef.<span class="hljs-title function_">close</span>(<span class="hljs-string">&#x27;Pizza!&#x27;</span>);</code></pre><p>Components created via <code>Dialog</code> can <em>inject</em> <code>DialogRef</code> and use it to close the dialog
3232
in which they are contained. When closing, an optional result value can be provided. This result
3333
value is forwarded as the result of the <code>closed</code> Observable.</p>
34-
<pre><code class="language-ts"><span class="hljs-meta">@Component</span>({<span class="hljs-comment">/* ... */</span>})
34+
<pre><code class="language-ts"><span class="hljs-keyword">import</span> {inject} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
35+
36+
<span class="hljs-meta">@Component</span>({<span class="hljs-comment">/* ... */</span>})
3537
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">YourDialog</span> {
36-
<span class="hljs-title function_">constructor</span>(<span class="hljs-params"><span class="hljs-keyword">public</span> <span class="hljs-attr">dialogRef</span>: <span class="hljs-title class_">DialogRef</span>&lt;<span class="hljs-built_in">string</span>&gt;</span>) {}
38+
dialogRef = inject&lt;<span class="hljs-title class_">DialogRef</span>&lt;<span class="hljs-built_in">string</span>&gt;&gt;(<span class="hljs-title class_">DialogRef</span>);
3739

3840
<span class="hljs-title function_">closeDialog</span>(<span class="hljs-params"></span>) {
3941
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dialogRef</span>.<span class="hljs-title function_">close</span>(<span class="hljs-string">&#x27;Pizza!&#x27;</span>);
@@ -102,12 +104,12 @@ <h3 id="specifying-global-configuration-defaults" class="docs-header-link">
102104
Specifying global configuration defaults
103105
</h3>
104106
<p>Default dialog options can be specified by providing an instance of <code>DialogConfig</code> for
105-
<code>DEFAULT_DIALOG_CONFIG</code> in your application&#39;s root module.</p>
106-
<pre><code class="language-ts"><span class="hljs-meta">@NgModule</span>({
107+
<code>DEFAULT_DIALOG_CONFIG</code> in your app config.</p>
108+
<pre><code class="language-ts"><span class="hljs-title function_">bootstrapApplication</span>(<span class="hljs-title class_">MyApp</span>, {
107109
<span class="hljs-attr">providers</span>: [
108110
{<span class="hljs-attr">provide</span>: <span class="hljs-variable constant_">DEFAULT_DIALOG_CONFIG</span>, <span class="hljs-attr">useValue</span>: {<span class="hljs-attr">hasBackdrop</span>: <span class="hljs-literal">false</span>}}
109111
]
110-
})</code></pre>
112+
});</code></pre>
111113
<h3 id="sharing-data-with-the-dialog-component" class="docs-header-link">
112114
<span header-link="sharing-data-with-the-dialog-component"></span>
113115
Sharing data with the Dialog component.
@@ -116,15 +118,15 @@ <h3 id="sharing-data-with-the-dialog-component" class="docs-header-link">
116118
<pre><code class="language-ts"><span class="hljs-keyword">const</span> dialogRef = dialog.<span class="hljs-title function_">open</span>(<span class="hljs-title class_">YourDialog</span>, {
117119
<span class="hljs-attr">data</span>: {<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;frodo&#x27;</span>},
118120
});</code></pre><p>Access the data in your dialog component with the <code>DIALOG_DATA</code> injection token:</p>
119-
<pre><code class="language-ts"><span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>, <span class="hljs-title class_">Inject</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
121+
<pre><code class="language-ts"><span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>, inject} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
120122
<span class="hljs-keyword">import</span> {<span class="hljs-variable constant_">DIALOG_DATA</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/dialog&#x27;</span>;
121123

122124
<span class="hljs-meta">@Component</span>({
123125
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;your-dialog&#x27;</span>,
124126
<span class="hljs-attr">template</span>: <span class="hljs-string">&#x27;passed in {{ data.name }}&#x27;</span>,
125127
})
126128
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">YourDialog</span> {
127-
<span class="hljs-title function_">constructor</span>(<span class="hljs-params"><span class="hljs-meta">@Inject</span>(DIALOG_DATA) <span class="hljs-keyword">public</span> <span class="hljs-attr">data</span>: {name: <span class="hljs-built_in">string</span>}</span>) { }
129+
data = inject&lt;{<span class="hljs-attr">name</span>: <span class="hljs-built_in">string</span>}&gt;(<span class="hljs-variable constant_">DIALOG_DATA</span>);
128130
}</code></pre><p>If you&#39;re using a <code>TemplateRef</code> for your dialog content, the data is available in the template:</p>
129131
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">let-data</span>&gt;</span>
130132
Hello, {{data.name}}

0 commit comments

Comments
 (0)