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

docs(docs-infra): wait for the DOM to be rendered (#60163)

Browse source 
the code inside `renderExample` is explicitly querying the DOM. We need to wait for it to be rendered for those functions to work.

PR Close #60163
This commit is contained in:
Matthieu Riegler 2025-03-01 00:52:17 +01:00 committed by Miles Malerba
parent 1c328ac261
commit d1233ebfa8
2 changed files with 26 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts
View file

@ -196,13 +196,13 @@ export class DocViewer implements OnChanges {
const exampleRef = this.viewContainer.createComponent(ExampleViewer);
this.countOfExamples++;
exampleRef.instance.metadata = {
exampleRef.setInput('metadata', {
title: title ?? firstCodeSnippetTitle,
path,
files: snippets,
preview,
id: this.countOfExamples,
};
});
exampleRef.instance.githubUrl = `${GITHUB_CONTENT_URL}/${snippets[0].name}`;
exampleRef.instance.stackblitzUrl = `${ASSETS_EXAMPLES_PATH}/${snippets[0].name}.html`;

42
adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts
View file

@ -7,6 +7,7 @@
*/
import {
afterNextRender,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
@ -15,6 +16,8 @@ import {
ElementRef,
forwardRef,
inject,
Injector,
input,
Input,
signal,
Type,
@ -47,10 +50,7 @@ export const HIDDEN_CLASS_NAME = 'hidden';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExampleViewer {
// TODO: replace by signal-based input when it'll be available
@Input({required: true}) set metadata(value: ExampleMetadata) {
this.exampleMetadata.set(value);
}
exampleMetadata = input.required<ExampleMetadata>({alias: 'metadata'});
@Input() githubUrl: string | null = null;
@Input() stackblitzUrl: string | null = null;
@ -60,6 +60,7 @@ export class ExampleViewer {
private readonly clipboard = inject(Clipboard);
private readonly destroyRef = inject(DestroyRef);
private readonly document = inject(DOCUMENT);
private readonly injector = inject(Injector);
private readonly elementRef = inject(ElementRef<HTMLElement>);
private readonly exampleViewerContentLoader = inject(EXAMPLE_VIEWER_CONTENT_LOADER);
@ -76,7 +77,6 @@ export class ExampleViewer {
expandable = signal<boolean>(false);
expanded = signal<boolean>(false);
exampleMetadata = signal<ExampleMetadata | null>(null);
snippetCode = signal<Snippet | undefined>(undefined);
tabs = computed(() =>
this.exampleMetadata()?.files.map((file) => ({
@ -101,21 +101,27 @@ export class ExampleViewer {
this.snippetCode.set(this.exampleMetadata()?.files[0]);
this.setCodeLinesVisibility();
afterNextRender(
() => {
// Several function below query the DOM directly, we need to wait until the DOM is rendered.
this.setCodeLinesVisibility();
this.elementRef.nativeElement.setAttribute(
'id',
`example-${this.exampleMetadata()?.id.toString()!}`,
this.elementRef.nativeElement.setAttribute(
'id',
`example-${this.exampleMetadata()?.id.toString()!}`,
);
this.matTabGroup?.realignInkBar();
this.listenToMatTabIndexChange();
const lines = this.getHiddenCodeLines();
const lineNumbers = this.getHiddenCodeLineNumbers();
this.expandable.set(lines.length > 0 || lineNumbers.length > 0);
},
{injector: this.injector},
);
this.matTabGroup?.realignInkBar();
this.listenToMatTabIndexChange();
const lines = this.getHiddenCodeLines();
const lineNumbers = this.getHiddenCodeLineNumbers();
this.expandable.set(lines.length > 0 || lineNumbers.length > 0);
}
toggleExampleVisibility(): void {