Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

docs: uses signal, implement TODOs, and fix typos (#63603)

Browse source 
PR Close #63603
This commit is contained in:
Shuaib Hasan Akib 2025-09-05 01:11:54 +06:00 committed by Andrew Scott
parent a3f808d7c8
commit e1dd3b10dd
3 changed files with 14 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
adev/src/app/features/update/update.component.html
View file

@ -140,11 +140,11 @@
beforeRecommendations.length > 0 || duringRecommendations.length > 0 || afterRecommendations.length > 0
) {
<div class="recommendations">
<h2>{{title}}</h2>
<h2>{{title()}}</h2>
<h3>Before you update</h3>
@for (r of beforeRecommendations; track $index) {
<div class="adev-recommentation-item">
<div class="adev-recommendation-item">
<mat-checkbox />
<div [innerHTML]="r.renderedStep"></div>
</div>
@ -163,7 +163,7 @@
}
@for (r of duringRecommendations; track $index) {
<div class="adev-recommentation-item">
<div class="adev-recommendation-item">
<mat-checkbox />
<div [innerHTML]="r.renderedStep"></div>
</div>
@ -176,7 +176,7 @@
<h3>After you update</h3>
@for (r of afterRecommendations; track $index) {
<div class="adev-recommentation-item">
<div class="adev-recommendation-item">
<mat-checkbox />
<div [innerHTML]="r.renderedStep"></div>
</div>

2
adev/src/app/features/update/update.component.scss
View file

@ -124,7 +124,7 @@ h4 {
}
}
.adev-recommentation-item {
.adev-recommendation-item {
display: flex;
align-items: center;

15
adev/src/app/features/update/update.component.ts
View file

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.dev/license
*/
import {ChangeDetectionStrategy, Component, HostListener, inject} from '@angular/core';
import {ChangeDetectionStrategy, Component, HostListener, inject, signal} from '@angular/core';
import {Step, RECOMMENDATIONS} from './recommendations';
import {Clipboard} from '@angular/cdk/clipboard';
import {CdkMenuModule} from '@angular/cdk/menu';
@ -18,6 +18,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {IconComponent} from '@angular/docs';
import {ActivatedRoute, Router} from '@angular/router';
import {marked} from 'marked';
import {MatSnackBar} from '@angular/material/snack-bar';
interface Option {
id: keyof Step;
@ -40,8 +41,10 @@ interface Option {
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class AppComponent {
protected title = '';
export default class UpdateComponent {
private readonly snackBar = inject(MatSnackBar);
protected title = signal('');
protected level = 1;
protected options: Record<string, boolean> = {
@ -128,8 +131,8 @@ export default class AppComponent {
@HostListener('click', ['$event.target'])
copyCode({tagName, textContent}: Element) {
if (tagName === 'CODE') {
// TODO: add a toast notification
this.clipboard.copy(textContent!);
this.snackBar.open('Copied to clipboard', '', {duration: 2000});
}
}
@ -149,9 +152,9 @@ export default class AppComponent {
const labelMedium = 'medium applications';
const labelAdvanced = 'advanced applications';
this.title = `${labelTitle} v${this.from.name} -> v${this.to.name}
this.title.set(`${labelTitle} v${this.from.name} -> v${this.to.name}
for
${this.level < 2 ? labelBasic : this.level < 3 ? labelMedium : labelAdvanced}`;
${this.level < 2 ? labelBasic : this.level < 3 ? labelMedium : labelAdvanced}`);
// Find applicable steps and organize them into before, during, and after upgrade
for (const step of this.steps) {