Skip to content

fix: update origin to 2ecdb221d3bd80ddfd1817385d9ecc23c9002b5a #1094

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Nov 20, 2025
Merged

fix: update origin to 2ecdb221d3bd80ddfd1817385d9ecc23c9002b5a #1094

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e20f21
fix: migrate untranslated files
lacolaco Nov 20, 2025
6d27e2d
fix: migrate markdown translation changes
lacolaco Nov 20, 2025
5a24554
fix: update origin to 2ecdb221d3bd80ddfd1817385d9ecc23c9002b5a
lacolaco Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 24 additions & 16 deletions adev-ja/src/content/events/v21.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,37 @@
![A retro 8-bit, pixel art style graphic announcing the upcoming release of Angular v21. The large, gradient 'v21' text dominates the frame. Next to it, in smaller text, are the words 'The Adventure Begins' and the release date '11-20-2025' inside a pink pixelated box. The Angular logo is in the bottom right corner.](assets/images/angular-v21-hero.jpg 'Angular v21 Hero Image')
![A retro 8-bit, pixel art style graphic announcing the upcoming release of Angular v21. The large, gradient 'v21' text dominates the frame. Next to it, in smaller text, are the words 'The Adventure Begins' and the release date '11-20-2025' inside a pink pixelated box. The Angular logo is in the bottom right corner.](assets/images/v21-event/angular-v21-hero.jpg 'Angular v21 Hero Image')

# Angular v21: The Adventure Begins

## Release Blog

**Angular v21 is live**: check out the [v21 release blog](http://goo.gle/angular-v21-blog) to learn about all of the amazing new features coming your way.

## Save the Date November 20, 2025
## Experience the v21 Release

Explore the Angular v21 release with this interactive game world. Curious how we made it? Click the `Show Code` button below to view the source code for this Angular app.

<docs-pill-row>
<docs-pill href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Angular+v21+Launch&dates=20251120T170000Z/20251120T173000Z&details=Get+ready+for+the+future+of+web+development+with+Angular.+Tune+in+https://goo.gle/angular-v21&location=https://goo.gle/angular-v21" title="Add to Google Calendar"/>
<docs-pill href="/assets/others/angular-v21-release.ics" title="Add to iCal/Outlook" download="angular-v21-release.ics" target="_blank" />
</docs-pill-row>
<docs-code preview hideCode header="v21 Game World" path="adev/src/content/examples/v21-game-world/src/app/app.ts" />

<hr/>
## Angular v21 Developer Event [Full Version]

Join the Angular team this November for a brand new release adventure. With modern AI tooling, performance updates and more, Angular v21 delivers fantastic new features to improve your developer experience. Whether you’re creating AI-powered apps or scalable enterprise applications, there has never been a better time to build with Angular.
Angular v21 is being delivered to you as a brand new release adventure. With modern AI tooling, performance updates and more, Angular v21 delivers fantastic new features to improve your developer experience. Whether you’re creating AI-powered apps or scalable enterprise applications, there has never been a better time to build with Angular.

🔥 What's coming in v21

- New Angular MCP Server tools to improve AI-powered workflows and code generation
- Your first look at Signal Forms, our new streamlined, signal-based approach to forms in Angular
- Exciting new details about the Angular ARIA package

That’s just a taste of what’s coming in our upcoming major release event. You won't want to miss it.

<docs-pill-row>
<docs-pill href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Angular+v21+Launch&dates=20251120T170000Z/20251120T173000Z&details=Get+ready+for+the+future+of+web+development+with+Angular.+Tune+in+https://goo.gle/angular-v21&location=https://goo.gle/angular-v21" title="Add to Google Calendar"/>
<docs-pill href="/assets/others/angular-v21-release.ics" title="Add to iCal/Outlook" download="angular-v21-release.ics" target="_blank" />
</docs-pill-row>
- Exciting new details about the Angular Aria package

<div style="display: block; width: 80%; margin: 0 auto; margin-top: 20px;">
<iframe
credentialless
width="560"
height="315"
src="https://www.youtube.com/embed/DDAHORVzQ5g?si=B9Uv5vXzIKJfcLGr"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
68 changes: 29 additions & 39 deletions adev-ja/src/content/guide/aria/overview.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,34 @@ In this one scenario, developers need to consider:

## What's included?

Angular Aria includes directives for common interactive patterns:

| Component | Description |
| --------------------------------------- | ---------------------------------------------------------------------- |
| [Accordion](guide/aria/accordion) | Collapsible content panels that can expand individually or exclusively |
| [Autocomplete](guide/aria/autocomplete) | Text input with filtered suggestions that appear as users type |
| [Combobox](guide/aria/combobox) | Primitive directive that coordinates a text input with a popup |
| [Grid](guide/aria/grid) | Two-dimensional data display with cell-by-cell keyboard navigation |
| [Listbox](guide/aria/listbox) | Single or multi-select option lists with keyboard navigation |
| [Menu](guide/aria/menu) | Dropdown menus with nested submenus and keyboard shortcuts |
| [Menubar](guide/aria/menubar) | Horizontal navigation bar for persistent application menus. |
| [Multiselect](guide/aria/multiselect) | Multiple-selection dropdown pattern with compact display |
| [Select](guide/aria/select) | Single-selection dropdown pattern with keyboard navigation |
| [Tabs](guide/aria/tabs) | Tabbed interfaces with automatic or manual activation modes |
| [Toolbar](guide/aria/toolbar) | Grouped sets of controls with logical keyboard navigation |
| [Tree](guide/aria/tree) | Hierarchical lists with expand/collapse functionality |

Each component includes comprehensive documentation, working examples, and API references.
Angular Aria includes directives with comprehensive documentation, working examples and API references for common interactive patterns:

### Search and selection

| Component | Description |
| --------------------------------------- | -------------------------------------------------------------- |
| [Autocomplete](guide/aria/autocomplete) | Text input with filtered suggestions that appear as users type |
| [Listbox](guide/aria/listbox) | Single or multi-select option lists with keyboard navigation |
| [Select](guide/aria/select) | Single-selection dropdown pattern with keyboard navigation |
| [Multiselect](guide/aria/multiselect) | Multiple-selection dropdown pattern with compact display |
| [Combobox](guide/aria/combobox) | Primitive directive that coordinates a text input with a popup |

### Navigation and call to actions

| Component | Description |
| ----------------------------- | ----------------------------------------------------------- |
| [Menu](guide/aria/menu) | Dropdown menus with nested submenus and keyboard shortcuts |
| [Menubar](guide/aria/menubar) | Horizontal navigation bar for persistent application menus |
| [Tabs](guide/aria/tabs) | Tabbed interfaces with automatic or manual activation modes |
| [Toolbar](guide/aria/toolbar) | Grouped sets of controls with logical keyboard navigation |

### Content organization

| Component | Description |
| --------------------------------- | ---------------------------------------------------------------------- |
| [Accordion](guide/aria/accordion) | Collapsible content panels that can expand individually or exclusively |
| [Tree](guide/aria/tree) | Hierarchical lists with expand/collapse functionality |
| [Grid](guide/aria/grid) | Two-dimensional data display with cell-by-cell keyboard navigation |

## When to use Angular Aria

Expand All @@ -89,24 +99,4 @@ Angular Aria might not fit every scenario:

## Next steps

Explore the component guides to find the pattern that fits your needs:

**Search and selection**

- Autocomplete - Search and filter options as users type
- Listbox - Select one or multiple items from a list
- Select - Choose one option from a list of options
- Multiselect - Choose one option from a list of options

**Navigation and call to actions**

- Menu - Action menus with optional nested submenus
- Tabs - Switch between related content panels
- Toolbar - Group related controls and actions

**Content organization**

- Accordion - Show and hide sections of content
- Tree - Display hierarchical data structures
Data display
- Grid - Navigate and interact with tabular data
Check out a component from the side nav or [list above](#whats-included), or start with [Toolbar](guide/aria/toolbar) to see a complete example of how Angular Aria directives work!
54 changes: 22 additions & 32 deletions adev-ja/src/content/guide/aria/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,34 @@ npm install @angular/aria

## 含まれているもの {#whats-included}

Angular Ariaには、一般的なインタラクティブパターンに対応するディレクティブが含まれています:
Angular Ariaには、包括的なドキュメント、動作するサンプル、およびAPIリファレンスを備えた、一般的なインタラクティブパターンに対応するディレクティブが含まれています:

### 検索と選択 {#search-and-selection}

| Component | 説明 |
| --------------------------------------- | ---------------------------------------------------------------------- |
| [Accordion](guide/aria/accordion) | 個別に、または排他的に展開できる折りたたみ可能なコンテンツパネル |
| [Autocomplete](guide/aria/autocomplete) | ユーザーが入力するにつれて表示される、フィルタリングされたサジェスト付きのテキスト入力 |
| [Combobox](guide/aria/combobox) | テキスト入力とポップアップを連携させるプリミティブなディレクティブ |
| [Grid](guide/aria/grid) | セル単位のキーボードナビゲーションを備えた2次元のデータ表示 |
| [Listbox](guide/aria/listbox) | キーボードナビゲーション付きの単一選択または複数選択のオプションリスト |
| [Menu](guide/aria/menu) | ネストされたサブメニューとキーボードショートカットを持つドロップダウンメニュー |
| [Menubar](guide/aria/menubar) | 永続的なアプリケーションメニュー用の水平ナビゲーションバー |
| [Multiselect](guide/aria/multiselect) | コンパクトな表示を持つ複数選択のドロップダウンパターン |
| [Select](guide/aria/select) | キーボードナビゲーション付きの単一選択のドロップダウンパターン |
| [Tabs](guide/aria/tabs) | 自動または手動のアクティベーションモードを持つタブ付きインターフェース |
| [Toolbar](guide/aria/toolbar) | 論理的なキーボードナビゲーションを持つ、グループ化されたコントロールのセット |
| [Tree](guide/aria/tree) | 展開/折りたたみ機能を持つ階層的なリスト |
| [Multiselect](guide/aria/multiselect) | コンパクトな表示を持つ複数選択のドロップダウンパターン |
| [Combobox](guide/aria/combobox) | テキスト入力とポップアップを連携させるプリミティブなディレクティブ |

### ナビゲーションとCTA {#navigation-and-call-to-actions}

| Component | 説明 |
| ----------------------------- | ---------------------------------------------------- |
| [Menu](guide/aria/menu) | ネストされたサブメニューとキーボードショートカットを持つドロップダウンメニュー |
| [Menubar](guide/aria/menubar) | 永続的なアプリケーションメニュー用の水平ナビゲーションバー |
| [Tabs](guide/aria/tabs) | 自動または手動のアクティベーションモードを持つタブ付きインターフェース |
| [Toolbar](guide/aria/toolbar) | 論理的なキーボードナビゲーションを持つ、グループ化されたコントロールのセット |

各コンポーネントには、包括的なドキュメント、動作するサンプル、およびAPIリファレンスが含まれています。
### コンテンツの構成 {#content-organization}

| Component | 説明 |
| --------------------------------- | --------------------------------------------------------------- |
| [Accordion](guide/aria/accordion) | 個別に、または排他的に展開できる折りたたみ可能なコンテンツパネル |
| [Tree](guide/aria/tree) | 展開/折りたたみ機能を持つ階層的なリスト |
| [Grid](guide/aria/grid) | セル単位のキーボードナビゲーションを備えた2次元のデータ表示 |

## Angular Ariaを使用する場面 {#when-to-use-angular-aria}

Expand All @@ -89,24 +99,4 @@ Angular Ariaはすべてのシナリオに適しているわけではありま

## 次のステップ {#next-steps}

コンポーネントガイドを調べて、ニーズに合ったパターンを見つけてください:

**検索と選択**

- Autocomplete - ユーザーの入力に応じてオプションを検索・フィルタリングします
- Listbox - リストから1つまたは複数の項目を選択します
- Select - オプションのリストから1つのオプションを選択します
- Multiselect - オプションのリストから1つのオプションを選択します

**ナビゲーションとCTA**

- Menu - ネスト可能なサブメニューを持つアクションメニュー
- Tabs - 関連するコンテンツパネルを切り替えます
- Toolbar - 関連するコントロールとアクションをグループ化します

**コンテンツの構成**

- Accordion - コンテンツのセクションを表示・非表示にします
- Tree - 階層的なデータ構造を表示します
データ表示
- Grid - 表形式のデータをナビゲートし、操作します
サイドナビまたは[上記のリスト](#whats-included)からコンポーネントを確認するか、[Toolbar](guide/aria/toolbar)から始めて、Angular Ariaディレクティブの動作の完全な例を確認してください！
28 changes: 22 additions & 6 deletions adev-ja/src/content/guide/tailwind.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,27 @@

[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that can be used to build modern websites without ever leaving your HTML. This guide will walk you through setting up Tailwind CSS in your Angular project.

## Setting up Tailwind CSS
## Automated Setup with `ng add`

Angular CLI provides a streamlined way to integrate Tailwind CSS into your project using the `ng add` command. This command automatically installs the necessary packages, configures Tailwind CSS, and updates your project's build settings.

First, navigate to your Angular project's root directory in a terminal and run the following command:

```shell
ng add tailwindcss
```

This command performs the following actions:

- Installs `tailwindcss` and its peer dependencies.
- Configures the project to use Tailwind CSS.
- Adds the Tailwind CSS `@import` statement to your styles.

After running `ng add tailwindcss`, you can immediately start using Tailwind's utility classes in your component templates.

## Manual Setup (Alternative Method)

If you prefer to set up Tailwind CSS manually, follow these steps:

### 1. Create an Angular project

Expand Down Expand Up @@ -61,7 +81,7 @@ If you're using SCSS, add `@use` to `./src/styles.scss`.

### 5. Start using Tailwind in your project

You can now start using Tailwind's utility classes in your component templates to style your application.
You can now start using Tailwind's utility classes in your component templates to style your application. Run your build process with `ng serve` and you should see the styled heading.

For example, you can add the following to your `app.html` file:

Expand All @@ -71,10 +91,6 @@ For example, you can add the following to your `app.html` file:
</h1>
</docs-code>

### 6. Start using Tailwind in your project

Run your build process with `ng serve` and you should see the styled heading.

## Additional Resources

- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
28 changes: 22 additions & 6 deletions adev-ja/src/content/guide/tailwind.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,27 @@

[Tailwind CSS](https://tailwindcss.com/)は、HTMLを離れることなくモダンなウェブサイトを構築するために使用できる、ユーティリティファーストのCSSフレームワークです。このガイドでは、AngularプロジェクトでTailwind CSSをセットアップする方法を説明します。

## Tailwind CSSのセットアップ {#setting-up-tailwind-css}
## `ng add`を使用した自動セットアップ {#automated-setup-with-ng-add}

Angular CLIは、`ng add`コマンドを使用してTailwind CSSをプロジェクトに統合する合理的な方法を提供します。このコマンドは、必要なパッケージを自動的にインストールし、Tailwind CSSを設定し、プロジェクトのビルド設定を更新します。

まず、ターミナルでAngularプロジェクトのルートディレクトリに移動し、次のコマンドを実行します:

```shell
ng add tailwindcss
```

このコマンドは以下のアクションを実行します:

- `tailwindcss`とそのpeer dependencyをインストールします。
- Tailwind CSSを使用するようにプロジェクトを設定します。
- Tailwind CSSの`@import`ステートメントをスタイルに追加します。

`ng add tailwindcss`を実行した後、コンポーネントのテンプレートでTailwindのユーティリティクラスをすぐに使い始めることができます。

## 手動セットアップ（代替方法） {#manual-setup-alternative-method}

Tailwind CSSを手動でセットアップする場合は、次の手順に従ってください:

### 1. Angularプロジェクトを作成する {#create-an-angular-project}

Expand Down Expand Up @@ -61,7 +81,7 @@ SCSSを使用している場合は、`@use`を`./src/styles.scss`に追加しま

### 5. プロジェクトでTailwindを使い始める {#start-using-tailwind-in-your-project}

これで、コンポーネントのテンプレートでTailwindのユーティリティクラスを使用して、アプリケーションのスタイルを設定できるようになります。
これで、コンポーネントのテンプレートでTailwindのユーティリティクラスを使用して、アプリケーションのスタイルを設定できるようになります。`ng serve`でビルドプロセスを実行すると、スタイルが適用された見出しが表示されるはずです。

たとえば、次の内容を`app.html`ファイルに追加できます:

Expand All @@ -71,10 +91,6 @@ SCSSを使用している場合は、`@use`を`./src/styles.scss`に追加しま
</h1>
</docs-code>

### 6. プロジェクトでTailwindを使い始める {#start-using-tailwind-in-your-project}

`ng serve`でビルドプロセスを実行すると、スタイルが適用された見出しが表示されるはずです。

## その他のリソース {#additional-resources}

- [Tailwind CSSドキュメント](https://tailwindcss.com/docs)
Loading