Skip to content

docs: add StackBlitz to provide live example #32034

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 1 commit into from
Oct 9, 2025
Merged

docs: add StackBlitz to provide live example #32034

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
198 changes: 106 additions & 92 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,17 @@
We would love for you to contribute to Angular Material and help make it ever better!
As a contributor, here are the guidelines we would like you to follow:

- [Code of Conduct](#coc)
- [Question or Problem?](#question)
- [Issues and Bugs](#issue)
- [Feature Requests](#feature)
- [Submission Guidelines](#submit-pr)
- [Coding Rules](#rules)
- [Commit Message Guidelines](#commit)
- [Signing the CLA](#cla)
- [Code of Conduct](#coc)
- [Question or Problem?](#question)
- [Issues and Bugs](#issue)
- [Feature Requests](#feature)
- [Submission Guidelines](#submit-pr)
- [Coding Rules](#rules)
- [Commit Message Guidelines](#commit)
- [Signing the CLA](#cla)

## <a name="coc"></a> Code of Conduct

Help us keep Angular open and inclusive. Please read and follow our [Code of Conduct][coc].

## <a name="question"></a> Got a Question or Problem?
Expand All @@ -30,92 +31,96 @@ To save your and our time, we will be systematically closing all the issues that
If you would like to chat about the question in real-time, you can reach out via [our gitter channel][gitter].

## <a name="issue"></a> Found an Issue?

If you find a bug in the source code or a mistake in the documentation, you can help us by
[submitting an issue](#submit-issue) to our [GitHub Repository][github].
[submitting an issue](#submit-issue) to our [GitHub Repository][github].

For bugs, include an issue reproduction (via your preferred REPL: StackBlitz, CodePen, JsBin,
Plunkr, etc.) Our team has limited resources, and this allows us quickly diagnose issues and make
optimal use of the time we dedicate to fixing them. Issues that do not include a REPL reproduction
will be closed. If a REPL reproduction is not possible for your issue, please explain why and
include any other information that may be helpful in debugger (link to a repo, error messages,
include any other information that may be helpful in debugger (link to a repo, error messages,
screenshots, etc.)

You can help the team even more and [submit a Pull Request](#submit-pr) with a fix.

## <a name="feature"></a> Want a Feature?
You can *request* a new feature by [submitting an issue](#submit-issue) to our [GitHub
Repository][github]. If you would like to *implement* a new feature, please submit an issue with

You can _request_ a new feature by [submitting an issue](#submit-issue) to our [GitHub
Repository][github]. If you would like to _implement_ a new feature, please submit an issue with
a proposal for your work first, to be sure that we can use it.
Please consider what kind of change it is:

* For a **Major Feature**, first open an issue and outline your proposal so that it can be
discussed. This will also allow us to better coordinate our efforts, prevent duplication of work,
and help you to craft the change so that it is successfully accepted into the project.
* **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).
- For a **Major Feature**, first open an issue and outline your proposal so that it can be
discussed. This will also allow us to better coordinate our efforts, prevent duplication of work,
and help you to craft the change so that it is successfully accepted into the project.
- **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).

### <a name="submit-issue"></a> Submitting an Issue

Before you submit an issue, search the archive, maybe your question was already answered.

If your issue appears to be a bug, and hasn't been reported, open a new issue.
Help us to maximize the effort we can spend fixing issues and adding new
features by not reporting duplicate issues. Providing the following information will increase the
features by not reporting duplicate issues. Providing the following information will increase the
chances of your issue being dealt with quickly:

* **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
* **Angular and Material Versions** - which versions of Angular and Material are affected
(e.g. 2.0.0-alpha.53)
* **Motivation for or Use Case** - explain what are you trying to do and why the current behavior
is a bug for you
* **Browsers and Operating System** - is this a problem with all browsers?
* **Reproduce the Error** - provide a live example (using [CodePen][codepen], [JsBin][jsbin],
[Plunker][plunker], etc.) or an unambiguous set of steps
* **Screenshots** - Due to the visual nature of Angular Material, screenshots can help the team
triage issues far more quickly than a text description.
* **Related Issues** - has a similar issue been reported before?
* **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be
causing the problem (line of code or commit)
- **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure why we have to re-format this file.

- **Angular and Material Versions** - which versions of Angular and Material are affected
(e.g. 2.0.0-alpha.53)
- **Motivation for or Use Case** - explain what are you trying to do and why the current behavior
is a bug for you
- **Browsers and Operating System** - is this a problem with all browsers?
- **Reproduce the Error** - provide a live example (using [CodePen][codepen], [JsBin][jsbin],
[Plunker][plunker], [StackBlitz][stackBlitz], etc.) or an unambiguous set of steps
- **Screenshots** - Due to the visual nature of Angular Material, screenshots can help the team
triage issues far more quickly than a text description.
- **Related Issues** - has a similar issue been reported before?
- **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be
causing the problem (line of code or commit)

You can file new issues by providing the above information [here](https://github.com/angular/components/issues/new).


### <a name="submit-pr"></a> Submitting a Pull Request (PR)

Before you submit your Pull Request (PR) consider the following guidelines:

* Search [GitHub](https://github.com/angular/components/pulls) for an open or closed PR
- Search [GitHub](https://github.com/angular/components/pulls) for an open or closed PR
that relates to your submission. You don't want to duplicate effort.
* Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
- Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
We cannot accept code without this.
* Make your changes in a new git branch:
- Make your changes in a new git branch:

```shell
git checkout -b my-fix-branch main
```
```shell
git checkout -b my-fix-branch main
```

* Create your patch, **including appropriate test cases**.
* Follow our [Coding Rules](#rules).
* Test your changes with our supported browsers and screen readers.
* Run the full Angular Material test suite, as described in the [developer documentation][dev-doc],
- Create your patch, **including appropriate test cases**.
- Follow our [Coding Rules](#rules).
- Test your changes with our supported browsers and screen readers.
- Run the full Angular Material test suite, as described in the [developer documentation][dev-doc],
and ensure that all tests pass.
* Commit your changes using a descriptive commit message that follows our
- Commit your changes using a descriptive commit message that follows our
[commit message conventions](#commit). Adherence to these conventions
is necessary because release notes are automatically generated from these messages.

```shell
git commit -a
```
```shell
git commit -a
```

Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.

* Push your branch to GitHub:
- Push your branch to GitHub:

```shell
git push my-fork my-fix-branch
```
```shell
git push my-fork my-fix-branch
```

* In GitHub, send a pull request to `components:main`.
* If we suggest changes then:
* Make the required updates.
* Re-run the Angular Material test suites to ensure tests are still passing.
* Rebase your branch and force push to your GitHub repository (this will update your Pull
- In GitHub, send a pull request to `components:main`.
- If we suggest changes then:
- Make the required updates.
- Re-run the Angular Material test suites to ensure tests are still passing.
- Rebase your branch and force push to your GitHub repository (this will update your Pull
Request):

```shell
Expand All @@ -130,47 +135,49 @@ That's it! Thank you for your contribution!
After your pull request is merged, you can safely delete your branch and pull the changes
from the main (upstream) repository:

* Delete the remote branch on GitHub either through the GitHub web UI or your local shell as
follows:
- Delete the remote branch on GitHub either through the GitHub web UI or your local shell as
follows:

```shell
git push my-fork --delete my-fix-branch
```
```shell
git push my-fork --delete my-fix-branch
```

* Check out the main branch:
- Check out the main branch:

```shell
git checkout main -f
```
```shell
git checkout main -f
```

* Delete the local branch:
- Delete the local branch:

```shell
git branch -D my-fix-branch
```
```shell
git branch -D my-fix-branch
```

* Update your local `main` with the latest upstream version:
- Update your local `main` with the latest upstream version:

```shell
git pull --ff upstream main
```
```shell
git pull --ff upstream main
```

## <a name="rules"></a> Coding Rules

To ensure consistency throughout the source code, keep these rules in mind as you are working:

* All features or bug fixes **must be tested** by one or more specs (unit-tests).
* All public API methods **must be documented**. (Details TBD).
* We follow [Google's TypeScript Style Guide][ts-style-guide], but wrap all code at
- All features or bug fixes **must be tested** by one or more specs (unit-tests).
- All public API methods **must be documented**. (Details TBD).
- We follow [Google's TypeScript Style Guide][ts-style-guide], but wrap all code at
**100 characters**.

## <a name="commit"></a> Commit Message Guidelines

We have very precise rules over how our git commit messages can be formatted. This leads to **more
readable messages** that are easy to follow when looking through the **project history**. But also,
We have very precise rules over how our git commit messages can be formatted. This leads to **more
readable messages** that are easy to follow when looking through the **project history**. But also,
we use the git commit messages to **generate the Angular Material change log**.

### Commit Message Format
Each commit message consists of a **header**, a **body** and a **footer**. The header has a special

Each commit message consists of a **header**, a **body** and a **footer**. The header has a special
format that includes a **type**, a **package**, a **scope** and a **subject**:

```
Expand Down Expand Up @@ -203,44 +210,51 @@ Fixes #1234
```

### Revert

If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of
the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is
the SHA of the commit being reverted.

### Type

Must be one of the following:

* **feat**: Creates a new feature
* **fix**: Fixes a previously discovered failure/bug
* **docs**: Changes which exclusively affects documentation
* **refactor**: Refactor without any change in functionality or API (includes style changes)
* **perf**: Improves performance without any change in functionality or API
* **test**: Improvements or corrections made to the project's test suite
* **build**: Changes to local repository build system and tooling
* **ci**: Changes to CI configuration and CI specific tooling
* **release**: A release point in the repository
- **feat**: Creates a new feature
- **fix**: Fixes a previously discovered failure/bug
- **docs**: Changes which exclusively affects documentation
- **refactor**: Refactor without any change in functionality or API (includes style changes)
- **perf**: Improves performance without any change in functionality or API
- **test**: Improvements or corrections made to the project's test suite
- **build**: Changes to local repository build system and tooling
- **ci**: Changes to CI configuration and CI specific tooling
- **release**: A release point in the repository

### Package

The commit message should specify which package is affected by the change. For example:
`material`, `cdk-experimental`, etc.

### Scope

The scope specifies place of the commit change. For example
`material/datepicker`, `cdk/dialog`, etc.
See full list [here][commit-message-scopes].

### Subject

The subject contains succinct description of the change:

* use the imperative, present tense: "change" not "changed" nor "changes"
* don't capitalize first letter
* no dot (.) at the end
- use the imperative, present tense: "change" not "changed" nor "changes"
- don't capitalize first letter
- no dot (.) at the end

### Body

Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
The body should include the motivation for the change and contrast this with previous behavior.

### Footer

The footer should contain any information about **Breaking Changes** or **Deprecations** and
is also the place to reference GitHub issues that this commit **Closes**.

Expand All @@ -257,11 +271,10 @@ A detailed explanation can be found in this [document][commit-message-format].
Please sign our Contributor License Agreement (CLA) before sending pull requests. For any code
changes to be accepted, the CLA must be signed. It's a quick process, we promise!

* For individuals, we have a [simple click-through form][individual-cla].
* For corporations, we'll need you to
- For individuals, we have a [simple click-through form][individual-cla].
- For corporations, we'll need you to
[print, sign and one of scan+email, fax or mail the form][corporate-cla].


[material-group]: https://groups.google.com/forum/#!forum/angular-material2
[coc]: https://github.com/angular/code-of-conduct/blob/main/CODE_OF_CONDUCT.md
[commit-message-format]: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/preview
Expand All @@ -278,3 +291,4 @@ changes to be accepted, the CLA must be signed. It's a quick process, we promise
[plunker]: https://plnkr.co/edit
[runnable]: https://runnable.com/
[stackoverflow]: https://stackoverflow.com/
[stackBlitz]: https://stackblitz.com/
Loading