Skip to content
BranchesTags

Latest commit

History

6,777 Commits

Folders and files

NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.vscode
.vscode
.yarn
.yarn
goldens
goldens
guides
guides
integration/ts-compat
integration/ts-compat
scripts
scripts
src
src
test
test
tools
tools
.bazelignore
.bazelignore
.bazelrc
.bazelrc
.bazelversion
.bazelversion
.clang-format
.clang-format
.editorconfig
.editorconfig
.firebaserc
.firebaserc
.gitignore
.gitignore
.stylelintrc.json
.stylelintrc.json
.yarnrc
.yarnrc
BUILD.bazel
BUILD.bazel
CHANGELOG.md
CHANGELOG.md
CHANGELOG_ARCHIVE.md
CHANGELOG_ARCHIVE.md
CODE_REVIEWS.md
CODE_REVIEWS.md
CODING_STANDARDS.md
CODING_STANDARDS.md
CONTRIBUTING.md
CONTRIBUTING.md
DEV_ENVIRONMENT.md
DEV_ENVIRONMENT.md
FAQ.md
FAQ.md
LICENSE
LICENSE
README.md
README.md
WORKSPACE
WORKSPACE
angular-tsconfig.json
angular-tsconfig.json
build-config.js
build-config.js
firebase.json
firebase.json
gulpfile.js
gulpfile.js
package.json
package.json
packages.bzl
packages.bzl
rollup-globals.bzl
rollup-globals.bzl
scss-bundle.config.json
scss-bundle.config.json
tsconfig.json
tsconfig.json
tslint.json
tslint.json
yarn.lock
yarn.lock

Repository files navigation

Official components for Angular

npm versionBuild statusGitter

The Angular team builds and maintains both common UI components and tools to help you build your own custom components. The team maintains several npm packages.

PackageDescriptionDocs
@angular/cdkLibrary that helps you author custom UI components with common interaction patternsDocs
@angular/materialMaterial Design UI components for Angular applicationsDocs
@angular/google-mapsAngular components built on top of the Google Maps JavaScript APIDocs
@angular/youtube-playerAngular component built on top of the YouTube Player APIDocs

Quick links

Documentation, demos, and guides | Frequently Asked Questions | Community Google group | Contributing | StackBlitz Template

Getting started

See our Getting Started Guide if you're building your first project with Angular Material.

Contributing

If you'd like to contribute, please follow our contributing guidelines. Please see our help wanted label for a list of issues with good opportunities for contribution.

What we're working on now (Q1 2020):

  • Date-range picker
  • Remaining test harnesses for Angular Material components (four remaining as of January)
  • Continuing to create new, API-compatible versions of the Angular Material components backed by MDC Web (see @jelbourn's ng-conf talk). There are five remaining components to complete here as of January.
  • Add support for density configuration for the new components based on MDC Web.
  • Authoring benchmarks to collect performance metrics for Angular Material components. These benchmarks will live inside Google's internal code repository for the time being, but we should be able to publish the results.

About the team

The Angular Components team is part of the Angular team at Google. The team includes both Google employees and community contributors from around the globe.

Our team has two primary goals:

  • Build high-quality UI components that developers can drop into existing applications
  • Provide tools that help developers build their own custom components with common interaction patterns

What do we mean by "high-quality" components?

  • Internationalized and accessible so that all users can use them.
  • Straightforward APIs that don't confuse developers.
  • Behave as expected across a wide variety of use-cases without bugs.
  • Behavior is well-tested with both unit and integration tests.
  • Customizable within the bounds of the Material Design specification.
  • Performance cost is minimized.
  • Code is clean and well-documented to serve as an example for Angular developers.

Browser and screen reader support

The Angular Components team supports the most recent two versions of all major browsers: Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge.

We aim for great user experience with the following screen readers:

  • Windows: NVDA and JAWS with IE11 / FF / Chrome.
  • macOS: VoiceOver with Safari / Chrome.
  • iOS: VoiceOver with Safari
  • Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
  • Chrome OS: ChromeVox with Chrome.

About

Component infrastructure and Material Design components for Angular

material.angular.io

Resources

Readme
MIT license

Contributing

Contributing
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - soro-google/components: Component infrastructure and Material Design components for Angular · GitHub
Skip to content
BranchesTags
Latest commit
History
6,777 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.vscode
.vscode
.yarn
.yarn
goldens
goldens
guides
guides
integration/ts-compat
integration/ts-compat
scripts
scripts
src
src
test
test
tools
tools
.bazelignore
.bazelignore
.bazelrc
.bazelrc
.bazelversion
.bazelversion
.clang-format
.clang-format
.editorconfig
.editorconfig
.firebaserc
.firebaserc
.gitignore
.gitignore
.stylelintrc.json
.stylelintrc.json
.yarnrc
.yarnrc
BUILD.bazel
BUILD.bazel
CHANGELOG.md
CHANGELOG.md
CHANGELOG_ARCHIVE.md
CHANGELOG_ARCHIVE.md
CODE_REVIEWS.md
CODE_REVIEWS.md
CODING_STANDARDS.md
CODING_STANDARDS.md
CONTRIBUTING.md
CONTRIBUTING.md
DEV_ENVIRONMENT.md
DEV_ENVIRONMENT.md
FAQ.md
FAQ.md
LICENSE
LICENSE
README.md
README.md
WORKSPACE
WORKSPACE
angular-tsconfig.json
angular-tsconfig.json
build-config.js
build-config.js
firebase.json
firebase.json
gulpfile.js
gulpfile.js
package.json
package.json
packages.bzl
packages.bzl
rollup-globals.bzl
rollup-globals.bzl
scss-bundle.config.json
scss-bundle.config.json
tsconfig.json
tsconfig.json
tslint.json
tslint.json
yarn.lock
yarn.lock
Repository files navigation
Official components for Angular
npm versionBuild statusGitter
The Angular team builds and maintains both common UI components and tools to help you build your
own custom components. The team maintains several npm packages.
PackageDescriptionDocs
@angular/cdkLibrary that helps you author custom UI components with common interaction patternsDocs
@angular/materialMaterial Design UI components for Angular applicationsDocs
@angular/google-mapsAngular components built on top of the Google Maps JavaScript APIDocs
@angular/youtube-playerAngular component built on top of the YouTube Player APIDocs
Quick links
Documentation, demos, and guides |
Frequently Asked Questions |
Community Google group |
Contributing |
StackBlitz Template
Getting started
See our Getting Started Guide if you're building your first project with Angular
Material.
Contributing
If you'd like to contribute, please follow our contributing guidelines. Please see
our help wanted label for a list of issues with good opportunities for
contribution.
What we're working on now (Q1 2020):
  • Date-range picker
  • Remaining test harnesses for Angular Material components (four remaining as of January)
  • Continuing to create new, API-compatible versions of the Angular Material components backed by
MDC Web (see @jelbourn's ng-conf talk). There are five
remaining components to complete here as of January.
  • Add support for density configuration for the new components based on MDC Web.
  • Authoring benchmarks to collect performance metrics for Angular Material components. These
benchmarks will live inside Google's internal code repository for the time being, but we should
be able to publish the results.
About the team
The Angular Components team is part of the Angular team at Google. The team includes both Google
employees and community contributors from around the globe.
Our team has two primary goals:
  • Build high-quality UI components that developers can drop into existing applications
  • Provide tools that help developers build their own custom components with common interaction
patterns
What do we mean by "high-quality" components?
  • Internationalized and accessible so that all users can use them.
  • Straightforward APIs that don't confuse developers.
  • Behave as expected across a wide variety of use-cases without bugs.
  • Behavior is well-tested with both unit and integration tests.
  • Customizable within the bounds of the Material Design specification.
  • Performance cost is minimized.
  • Code is clean and well-documented to serve as an example for Angular developers.
Browser and screen reader support
The Angular Components team supports the most recent two versions of all major browsers:
Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge.
We aim for great user experience with the following screen readers:
  • Windows: NVDA and JAWS with IE11 / FF / Chrome.
  • macOS: VoiceOver with Safari / Chrome.
  • iOS: VoiceOver with Safari
  • Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
  • Chrome OS: ChromeVox with Chrome.
About
Component infrastructure and Material Design components for Angular
material.angular.io
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - soro-google/components: Component infrastructure and Material Design components for Angular · GitHub
Skip to content
BranchesTags
Latest commit
History
6,777 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.vscode
.vscode
.yarn
.yarn
goldens
goldens
guides
guides
integration/ts-compat
integration/ts-compat
scripts
scripts
src
src
test
test
tools
tools
.bazelignore
.bazelignore
.bazelrc
.bazelrc
.bazelversion
.bazelversion
.clang-format
.clang-format
.editorconfig
.editorconfig
.firebaserc
.firebaserc
.gitignore
.gitignore
.stylelintrc.json
.stylelintrc.json
.yarnrc
.yarnrc
BUILD.bazel
BUILD.bazel
CHANGELOG.md
CHANGELOG.md
CHANGELOG_ARCHIVE.md
CHANGELOG_ARCHIVE.md
CODE_REVIEWS.md
CODE_REVIEWS.md
CODING_STANDARDS.md
CODING_STANDARDS.md
CONTRIBUTING.md
CONTRIBUTING.md
DEV_ENVIRONMENT.md
DEV_ENVIRONMENT.md
FAQ.md
FAQ.md
LICENSE
LICENSE
README.md
README.md
WORKSPACE
WORKSPACE
angular-tsconfig.json
angular-tsconfig.json
build-config.js
build-config.js
firebase.json
firebase.json
gulpfile.js
gulpfile.js
package.json
package.json
packages.bzl
packages.bzl
rollup-globals.bzl
rollup-globals.bzl
scss-bundle.config.json
scss-bundle.config.json
tsconfig.json
tsconfig.json
tslint.json
tslint.json
yarn.lock
yarn.lock
Repository files navigation
Official components for Angular
npm versionBuild statusGitter
The Angular team builds and maintains both common UI components and tools to help you build your
own custom components. The team maintains several npm packages.
PackageDescriptionDocs
@angular/cdkLibrary that helps you author custom UI components with common interaction patternsDocs
@angular/materialMaterial Design UI components for Angular applicationsDocs
@angular/google-mapsAngular components built on top of the Google Maps JavaScript APIDocs
@angular/youtube-playerAngular component built on top of the YouTube Player APIDocs
Quick links
Documentation, demos, and guides |
Frequently Asked Questions |
Community Google group |
Contributing |
StackBlitz Template
Getting started
See our Getting Started Guide if you're building your first project with Angular
Material.
Contributing
If you'd like to contribute, please follow our contributing guidelines. Please see
our help wanted label for a list of issues with good opportunities for
contribution.
What we're working on now (Q1 2020):
  • Date-range picker
  • Remaining test harnesses for Angular Material components (four remaining as of January)
  • Continuing to create new, API-compatible versions of the Angular Material components backed by
MDC Web (see @jelbourn's ng-conf talk). There are five
remaining components to complete here as of January.
  • Add support for density configuration for the new components based on MDC Web.
  • Authoring benchmarks to collect performance metrics for Angular Material components. These
benchmarks will live inside Google's internal code repository for the time being, but we should
be able to publish the results.
About the team
The Angular Components team is part of the Angular team at Google. The team includes both Google
employees and community contributors from around the globe.
Our team has two primary goals:
  • Build high-quality UI components that developers can drop into existing applications
  • Provide tools that help developers build their own custom components with common interaction
patterns
What do we mean by "high-quality" components?
  • Internationalized and accessible so that all users can use them.
  • Straightforward APIs that don't confuse developers.
  • Behave as expected across a wide variety of use-cases without bugs.
  • Behavior is well-tested with both unit and integration tests.
  • Customizable within the bounds of the Material Design specification.
  • Performance cost is minimized.
  • Code is clean and well-documented to serve as an example for Angular developers.
Browser and screen reader support
The Angular Components team supports the most recent two versions of all major browsers:
Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge.
We aim for great user experience with the following screen readers:
  • Windows: NVDA and JAWS with IE11 / FF / Chrome.
  • macOS: VoiceOver with Safari / Chrome.
  • iOS: VoiceOver with Safari
  • Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
  • Chrome OS: ChromeVox with Chrome.
About
Component infrastructure and Material Design components for Angular
material.angular.io
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - soro-google/components: Component infrastructure and Material Design components for Angular · GitHub
Skip to content
BranchesTags
Latest commit
History
6,777 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.vscode
.vscode
.yarn
.yarn
goldens
goldens
guides
guides
integration/ts-compat
integration/ts-compat
scripts
scripts
src
src
test
test
tools
tools
.bazelignore
.bazelignore
.bazelrc
.bazelrc
.bazelversion
.bazelversion
.clang-format
.clang-format
.editorconfig
.editorconfig
.firebaserc
.firebaserc
.gitignore
.gitignore
.stylelintrc.json
.stylelintrc.json
.yarnrc
.yarnrc
BUILD.bazel
BUILD.bazel
CHANGELOG.md
CHANGELOG.md
CHANGELOG_ARCHIVE.md
CHANGELOG_ARCHIVE.md
CODE_REVIEWS.md
CODE_REVIEWS.md
CODING_STANDARDS.md
CODING_STANDARDS.md
CONTRIBUTING.md
CONTRIBUTING.md
DEV_ENVIRONMENT.md
DEV_ENVIRONMENT.md
FAQ.md
FAQ.md
LICENSE
LICENSE
README.md
README.md
WORKSPACE
WORKSPACE
angular-tsconfig.json
angular-tsconfig.json
build-config.js
build-config.js
firebase.json
firebase.json
gulpfile.js
gulpfile.js
package.json
package.json
packages.bzl
packages.bzl
rollup-globals.bzl
rollup-globals.bzl
scss-bundle.config.json
scss-bundle.config.json
tsconfig.json
tsconfig.json
tslint.json
tslint.json
yarn.lock
yarn.lock
Repository files navigation
Official components for Angular
npm versionBuild statusGitter
The Angular team builds and maintains both common UI components and tools to help you build your
own custom components. The team maintains several npm packages.
PackageDescriptionDocs
@angular/cdkLibrary that helps you author custom UI components with common interaction patternsDocs
@angular/materialMaterial Design UI components for Angular applicationsDocs
@angular/google-mapsAngular components built on top of the Google Maps JavaScript APIDocs
@angular/youtube-playerAngular component built on top of the YouTube Player APIDocs
Quick links
Documentation, demos, and guides |
Frequently Asked Questions |
Community Google group |
Contributing |
StackBlitz Template
Getting started
See our Getting Started Guide if you're building your first project with Angular
Material.
Contributing
If you'd like to contribute, please follow our contributing guidelines. Please see
our help wanted label for a list of issues with good opportunities for
contribution.
What we're working on now (Q1 2020):
  • Date-range picker
  • Remaining test harnesses for Angular Material components (four remaining as of January)
  • Continuing to create new, API-compatible versions of the Angular Material components backed by
MDC Web (see @jelbourn's ng-conf talk). There are five
remaining components to complete here as of January.
  • Add support for density configuration for the new components based on MDC Web.
  • Authoring benchmarks to collect performance metrics for Angular Material components. These
benchmarks will live inside Google's internal code repository for the time being, but we should
be able to publish the results.
About the team
The Angular Components team is part of the Angular team at Google. The team includes both Google
employees and community contributors from around the globe.
Our team has two primary goals:
  • Build high-quality UI components that developers can drop into existing applications
  • Provide tools that help developers build their own custom components with common interaction
patterns
What do we mean by "high-quality" components?
  • Internationalized and accessible so that all users can use them.
  • Straightforward APIs that don't confuse developers.
  • Behave as expected across a wide variety of use-cases without bugs.
  • Behavior is well-tested with both unit and integration tests.
  • Customizable within the bounds of the Material Design specification.
  • Performance cost is minimized.
  • Code is clean and well-documented to serve as an example for Angular developers.
Browser and screen reader support
The Angular Components team supports the most recent two versions of all major browsers:
Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge.
We aim for great user experience with the following screen readers:
  • Windows: NVDA and JAWS with IE11 / FF / Chrome.
  • macOS: VoiceOver with Safari / Chrome.
  • iOS: VoiceOver with Safari
  • Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
  • Chrome OS: ChromeVox with Chrome.
About
Component infrastructure and Material Design components for Angular
material.angular.io
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - soro-google/components: Component infrastructure and Material Design components for Angular · GitHub
Skip to content
BranchesTags
Latest commit
History
6,777 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.vscode
.vscode
.yarn
.yarn
goldens
goldens
guides
guides
integration/ts-compat
integration/ts-compat
scripts
scripts
src
src
test
test
tools
tools
.bazelignore
.bazelignore
.bazelrc
.bazelrc
.bazelversion
.bazelversion
.clang-format
.clang-format
.editorconfig
.editorconfig
.firebaserc
.firebaserc
.gitignore
.gitignore
.stylelintrc.json
.stylelintrc.json
.yarnrc
.yarnrc
BUILD.bazel
BUILD.bazel
CHANGELOG.md
CHANGELOG.md
CHANGELOG_ARCHIVE.md
CHANGELOG_ARCHIVE.md
CODE_REVIEWS.md
CODE_REVIEWS.md
CODING_STANDARDS.md
CODING_STANDARDS.md
CONTRIBUTING.md
CONTRIBUTING.md
DEV_ENVIRONMENT.md
DEV_ENVIRONMENT.md
FAQ.md
FAQ.md
LICENSE
LICENSE
README.md
README.md
WORKSPACE
WORKSPACE
angular-tsconfig.json
angular-tsconfig.json
build-config.js
build-config.js
firebase.json
firebase.json
gulpfile.js
gulpfile.js
package.json
package.json
packages.bzl
packages.bzl
rollup-globals.bzl
rollup-globals.bzl
scss-bundle.config.json
scss-bundle.config.json
tsconfig.json
tsconfig.json
tslint.json
tslint.json
yarn.lock
yarn.lock
Repository files navigation
Official components for Angular
npm versionBuild statusGitter
The Angular team builds and maintains both common UI components and tools to help you build your
own custom components. The team maintains several npm packages.
PackageDescriptionDocs
@angular/cdkLibrary that helps you author custom UI components with common interaction patternsDocs
@angular/materialMaterial Design UI components for Angular applicationsDocs
@angular/google-mapsAngular components built on top of the Google Maps JavaScript APIDocs
@angular/youtube-playerAngular component built on top of the YouTube Player APIDocs
Quick links
Documentation, demos, and guides |
Frequently Asked Questions |
Community Google group |
Contributing |
StackBlitz Template
Getting started
See our Getting Started Guide if you're building your first project with Angular
Material.
Contributing
If you'd like to contribute, please follow our contributing guidelines. Please see
our help wanted label for a list of issues with good opportunities for
contribution.
What we're working on now (Q1 2020):
  • Date-range picker
  • Remaining test harnesses for Angular Material components (four remaining as of January)
  • Continuing to create new, API-compatible versions of the Angular Material components backed by
MDC Web (see @jelbourn's ng-conf talk). There are five
remaining components to complete here as of January.
  • Add support for density configuration for the new components based on MDC Web.
  • Authoring benchmarks to collect performance metrics for Angular Material components. These
benchmarks will live inside Google's internal code repository for the time being, but we should
be able to publish the results.
About the team
The Angular Components team is part of the Angular team at Google. The team includes both Google
employees and community contributors from around the globe.
Our team has two primary goals:
  • Build high-quality UI components that developers can drop into existing applications
  • Provide tools that help developers build their own custom components with common interaction
patterns
What do we mean by "high-quality" components?
  • Internationalized and accessible so that all users can use them.
  • Straightforward APIs that don't confuse developers.
  • Behave as expected across a wide variety of use-cases without bugs.
  • Behavior is well-tested with both unit and integration tests.
  • Customizable within the bounds of the Material Design specification.
  • Performance cost is minimized.
  • Code is clean and well-documented to serve as an example for Angular developers.
Browser and screen reader support
The Angular Components team supports the most recent two versions of all major browsers:
Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge.
We aim for great user experience with the following screen readers:
  • Windows: NVDA and JAWS with IE11 / FF / Chrome.
  • macOS: VoiceOver with Safari / Chrome.
  • iOS: VoiceOver with Safari
  • Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
  • Chrome OS: ChromeVox with Chrome.
About
Component infrastructure and Material Design components for Angular
material.angular.io
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - soro-google/components: Component infrastructure and Material Design components for Angular · GitHub
Skip to content
BranchesTags
Latest commit
History
6,777 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.vscode
.vscode
.yarn
.yarn
goldens
goldens
guides
guides
integration/ts-compat
integration/ts-compat
scripts
scripts
src
src
test
test
tools
tools
.bazelignore
.bazelignore
.bazelrc
.bazelrc
.bazelversion
.bazelversion
.clang-format
.clang-format
.editorconfig
.editorconfig
.firebaserc
.firebaserc
.gitignore
.gitignore
.stylelintrc.json
.stylelintrc.json
.yarnrc
.yarnrc
BUILD.bazel
BUILD.bazel
CHANGELOG.md
CHANGELOG.md
CHANGELOG_ARCHIVE.md
CHANGELOG_ARCHIVE.md
CODE_REVIEWS.md
CODE_REVIEWS.md
CODING_STANDARDS.md
CODING_STANDARDS.md
CONTRIBUTING.md
CONTRIBUTING.md
DEV_ENVIRONMENT.md
DEV_ENVIRONMENT.md
FAQ.md
FAQ.md
LICENSE
LICENSE
README.md
README.md
WORKSPACE
WORKSPACE
angular-tsconfig.json
angular-tsconfig.json
build-config.js
build-config.js
firebase.json
firebase.json
gulpfile.js
gulpfile.js
package.json
package.json
packages.bzl
packages.bzl
rollup-globals.bzl
rollup-globals.bzl
scss-bundle.config.json
scss-bundle.config.json
tsconfig.json
tsconfig.json
tslint.json
tslint.json
yarn.lock
yarn.lock
Repository files navigation
Official components for Angular
npm versionBuild statusGitter
The Angular team builds and maintains both common UI components and tools to help you build your
own custom components. The team maintains several npm packages.
PackageDescriptionDocs
@angular/cdkLibrary that helps you author custom UI components with common interaction patternsDocs
@angular/materialMaterial Design UI components for Angular applicationsDocs
@angular/google-mapsAngular components built on top of the Google Maps JavaScript APIDocs
@angular/youtube-playerAngular component built on top of the YouTube Player APIDocs
Quick links
Documentation, demos, and guides |
Frequently Asked Questions |
Community Google group |
Contributing |
StackBlitz Template
Getting started
See our Getting Started Guide if you're building your first project with Angular
Material.
Contributing
If you'd like to contribute, please follow our contributing guidelines. Please see
our help wanted label for a list of issues with good opportunities for
contribution.
What we're working on now (Q1 2020):
  • Date-range picker
  • Remaining test harnesses for Angular Material components (four remaining as of January)
  • Continuing to create new, API-compatible versions of the Angular Material components backed by
MDC Web (see @jelbourn's ng-conf talk). There are five
remaining components to complete here as of January.
  • Add support for density configuration for the new components based on MDC Web.
  • Authoring benchmarks to collect performance metrics for Angular Material components. These
benchmarks will live inside Google's internal code repository for the time being, but we should
be able to publish the results.
About the team
The Angular Components team is part of the Angular team at Google. The team includes both Google
employees and community contributors from around the globe.
Our team has two primary goals:
  • Build high-quality UI components that developers can drop into existing applications
  • Provide tools that help developers build their own custom components with common interaction
patterns
What do we mean by "high-quality" components?
  • Internationalized and accessible so that all users can use them.
  • Straightforward APIs that don't confuse developers.
  • Behave as expected across a wide variety of use-cases without bugs.
  • Behavior is well-tested with both unit and integration tests.
  • Customizable within the bounds of the Material Design specification.
  • Performance cost is minimized.
  • Code is clean and well-documented to serve as an example for Angular developers.
Browser and screen reader support
The Angular Components team supports the most recent two versions of all major browsers:
Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge.
We aim for great user experience with the following screen readers:
  • Windows: NVDA and JAWS with IE11 / FF / Chrome.
  • macOS: VoiceOver with Safari / Chrome.
  • iOS: VoiceOver with Safari
  • Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
  • Chrome OS: ChromeVox with Chrome.
About
Component infrastructure and Material Design components for Angular
material.angular.io
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - soro-google/components: Component infrastructure and Material Design components for Angular · GitHub
Skip to content
BranchesTags
Latest commit
History
6,777 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.vscode
.vscode
.yarn
.yarn
goldens
goldens
guides
guides
integration/ts-compat
integration/ts-compat
scripts
scripts
src
src
test
test
tools
tools
.bazelignore
.bazelignore
.bazelrc
.bazelrc
.bazelversion
.bazelversion
.clang-format
.clang-format
.editorconfig
.editorconfig
.firebaserc
.firebaserc
.gitignore
.gitignore
.stylelintrc.json
.stylelintrc.json
.yarnrc
.yarnrc
BUILD.bazel
BUILD.bazel
CHANGELOG.md
CHANGELOG.md
CHANGELOG_ARCHIVE.md
CHANGELOG_ARCHIVE.md
CODE_REVIEWS.md
CODE_REVIEWS.md
CODING_STANDARDS.md
CODING_STANDARDS.md
CONTRIBUTING.md
CONTRIBUTING.md
DEV_ENVIRONMENT.md
DEV_ENVIRONMENT.md
FAQ.md
FAQ.md
LICENSE
LICENSE
README.md
README.md
WORKSPACE
WORKSPACE
angular-tsconfig.json
angular-tsconfig.json
build-config.js
build-config.js
firebase.json
firebase.json
gulpfile.js
gulpfile.js
package.json
package.json
packages.bzl
packages.bzl
rollup-globals.bzl
rollup-globals.bzl
scss-bundle.config.json
scss-bundle.config.json
tsconfig.json
tsconfig.json
tslint.json
tslint.json
yarn.lock
yarn.lock
Repository files navigation
Official components for Angular
npm versionBuild statusGitter
The Angular team builds and maintains both common UI components and tools to help you build your
own custom components. The team maintains several npm packages.
PackageDescriptionDocs
@angular/cdkLibrary that helps you author custom UI components with common interaction patternsDocs
@angular/materialMaterial Design UI components for Angular applicationsDocs
@angular/google-mapsAngular components built on top of the Google Maps JavaScript APIDocs
@angular/youtube-playerAngular component built on top of the YouTube Player APIDocs
Quick links
Documentation, demos, and guides |
Frequently Asked Questions |
Community Google group |
Contributing |
StackBlitz Template
Getting started
See our Getting Started Guide if you're building your first project with Angular
Material.
Contributing
If you'd like to contribute, please follow our contributing guidelines. Please see
our help wanted label for a list of issues with good opportunities for
contribution.
What we're working on now (Q1 2020):
  • Date-range picker
  • Remaining test harnesses for Angular Material components (four remaining as of January)
  • Continuing to create new, API-compatible versions of the Angular Material components backed by
MDC Web (see @jelbourn's ng-conf talk). There are five
remaining components to complete here as of January.
  • Add support for density configuration for the new components based on MDC Web.
  • Authoring benchmarks to collect performance metrics for Angular Material components. These
benchmarks will live inside Google's internal code repository for the time being, but we should
be able to publish the results.
About the team
The Angular Components team is part of the Angular team at Google. The team includes both Google
employees and community contributors from around the globe.
Our team has two primary goals:
  • Build high-quality UI components that developers can drop into existing applications
  • Provide tools that help developers build their own custom components with common interaction
patterns
What do we mean by "high-quality" components?
  • Internationalized and accessible so that all users can use them.
  • Straightforward APIs that don't confuse developers.
  • Behave as expected across a wide variety of use-cases without bugs.
  • Behavior is well-tested with both unit and integration tests.
  • Customizable within the bounds of the Material Design specification.
  • Performance cost is minimized.
  • Code is clean and well-documented to serve as an example for Angular developers.
Browser and screen reader support
The Angular Components team supports the most recent two versions of all major browsers:
Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge.
We aim for great user experience with the following screen readers:
  • Windows: NVDA and JAWS with IE11 / FF / Chrome.
  • macOS: VoiceOver with Safari / Chrome.
  • iOS: VoiceOver with Safari
  • Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
  • Chrome OS: ChromeVox with Chrome.
About
Component infrastructure and Material Design components for Angular
material.angular.io
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - soro-google/components: Component infrastructure and Material Design components for Angular · GitHub
Skip to content
BranchesTags
Latest commit
History
6,777 Commits
Folders and files
NameName
Last commit message
Last commit date
.circleci
.circleci
.github
.github
.vscode
.vscode
.yarn
.yarn
goldens
goldens
guides
guides
integration/ts-compat
integration/ts-compat
scripts
scripts
src
src
test
test
tools
tools
.bazelignore
.bazelignore
.bazelrc
.bazelrc
.bazelversion
.bazelversion
.clang-format
.clang-format
.editorconfig
.editorconfig
.firebaserc
.firebaserc
.gitignore
.gitignore
.stylelintrc.json
.stylelintrc.json
.yarnrc
.yarnrc
BUILD.bazel
BUILD.bazel
CHANGELOG.md
CHANGELOG.md
CHANGELOG_ARCHIVE.md
CHANGELOG_ARCHIVE.md
CODE_REVIEWS.md
CODE_REVIEWS.md
CODING_STANDARDS.md
CODING_STANDARDS.md
CONTRIBUTING.md
CONTRIBUTING.md
DEV_ENVIRONMENT.md
DEV_ENVIRONMENT.md
FAQ.md
FAQ.md
LICENSE
LICENSE
README.md
README.md
WORKSPACE
WORKSPACE
angular-tsconfig.json
angular-tsconfig.json
build-config.js
build-config.js
firebase.json
firebase.json
gulpfile.js
gulpfile.js
package.json
package.json
packages.bzl
packages.bzl
rollup-globals.bzl
rollup-globals.bzl
scss-bundle.config.json
scss-bundle.config.json
tsconfig.json
tsconfig.json
tslint.json
tslint.json
yarn.lock
yarn.lock
Repository files navigation
Official components for Angular
npm versionBuild statusGitter
The Angular team builds and maintains both common UI components and tools to help you build your
own custom components. The team maintains several npm packages.
PackageDescriptionDocs
@angular/cdkLibrary that helps you author custom UI components with common interaction patternsDocs
@angular/materialMaterial Design UI components for Angular applicationsDocs
@angular/google-mapsAngular components built on top of the Google Maps JavaScript APIDocs
@angular/youtube-playerAngular component built on top of the YouTube Player APIDocs
Quick links
Documentation, demos, and guides |
Frequently Asked Questions |
Community Google group |
Contributing |
StackBlitz Template
Getting started
See our Getting Started Guide if you're building your first project with Angular
Material.
Contributing
If you'd like to contribute, please follow our contributing guidelines. Please see
our help wanted label for a list of issues with good opportunities for
contribution.
What we're working on now (Q1 2020):
  • Date-range picker
  • Remaining test harnesses for Angular Material components (four remaining as of January)
  • Continuing to create new, API-compatible versions of the Angular Material components backed by
MDC Web (see @jelbourn's ng-conf talk). There are five
remaining components to complete here as of January.
  • Add support for density configuration for the new components based on MDC Web.
  • Authoring benchmarks to collect performance metrics for Angular Material components. These
benchmarks will live inside Google's internal code repository for the time being, but we should
be able to publish the results.
About the team
The Angular Components team is part of the Angular team at Google. The team includes both Google
employees and community contributors from around the globe.
Our team has two primary goals:
  • Build high-quality UI components that developers can drop into existing applications
  • Provide tools that help developers build their own custom components with common interaction
patterns
What do we mean by "high-quality" components?
  • Internationalized and accessible so that all users can use them.
  • Straightforward APIs that don't confuse developers.
  • Behave as expected across a wide variety of use-cases without bugs.
  • Behavior is well-tested with both unit and integration tests.
  • Customizable within the bounds of the Material Design specification.
  • Performance cost is minimized.
  • Code is clean and well-documented to serve as an example for Angular developers.
Browser and screen reader support
The Angular Components team supports the most recent two versions of all major browsers:
Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge.
We aim for great user experience with the following screen readers:
  • Windows: NVDA and JAWS with IE11 / FF / Chrome.
  • macOS: VoiceOver with Safari / Chrome.
  • iOS: VoiceOver with Safari
  • Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
  • Chrome OS: ChromeVox with Chrome.
About
Component infrastructure and Material Design components for Angular
material.angular.io
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages