Skip to content

feat(docs-infra): add file explorer tree to the playground editor #63113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

ali-toghiani
Copy link

replaced tabs with mat-tree to support nesting files under folders in the future.

resolves #52659 issue

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.dev application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

currently Playgound uses tabs to show different files

Issue Number: #52659

What is the new behavior?

added a sidebar called the activity bar which includes a folder icon, when clicked, expands a the file explorer section.
the file explorer includes a header that allows creating new files, and the list of files which are created using the mat-tree component. the reason that the mat-tree component is choosen, is to create the support for future to to add folder creation capabilities.

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

image

replaced tabs with mat-tree to support nesting files under folders in the future.

resolves angular#52659 issue
@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: docs-infra Angular.dev application and infrastructure labels Aug 12, 2025
@ngbot ngbot bot added this to the Backlog milestone Aug 12, 2025
Copy link

github-actions bot commented Aug 12, 2025

Deployed adev-preview for 52d0484 to: https://ng-dev-previews-fw--pr-angular-angular-63113-adev-prev-qe6l9v9w.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

ali-toghiani and others added 2 commits August 12, 2025 18:43
Co-authored-by: Enea Jahollari <jahollarienea14@gmail.com>
@JeanMeche JeanMeche marked this pull request as ready for review August 12, 2025 15:23
@JeanMeche JeanMeche marked this pull request as draft August 12, 2025 15:23
@pullapprove pullapprove bot requested a review from MarkTechson August 12, 2025 15:23
@ali-toghiani
Copy link
Author

Hi everyone, Any updates ? is my general direction correct? should I proceed to implement the tests ? or should I wait for the review ?

@MarkTechson
Copy link
Contributor

Hi @ali-toghiani! Thanks for this initiative. Currently, the "open in..." menu is broken, can you please take a look?

@ali-toghiani
Copy link
Author

Hi Mark, Thanks for letting me know, Absolutely, I'm on it, I'll push the fix ASAP

@ali-toghiani
Copy link
Author

Hi @MarkTechson The Issue with the "Open in ..." dropdown style has been fixed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
adev: preview area: docs-infra Angular.dev application and infrastructure detected: feature PR contains a feature commit
Projects
None yet
Development

Successfully merging this pull request may close these issues.

docs: Add a file tree explorer to the Playground and Tutorials
4 participants