angular / components

Component infrastructure and Material Design components for Angular

Official components for Angular

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.

Package	Description	Docs
@angular/cdk	Library that helps you author custom UI components with common interaction patterns	Docs
@angular/material	Material Design UI components for Angular applications	Docs
@angular/google-maps	Angular components built on top of the Google Maps JavaScript API	Docs
@angular/youtube-player	Angular component built on top of the YouTube Player API	Docs

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. You can also use the good first issue label to find issues if you are just starting to contribute to the project.

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 Edge.

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

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

components's Issues

mdRadio and mdRadioGroup

• Determine if component can be built on top of a native <input type="radio">
• Unit tests
• E2E tests
• Documentation
• Demo page

npm package and/or index.js

Gents,

I'd like to fiddle around with the alpha release, therefore it would be extremely useful if you could provide an index.js - so one could use npm to grab and install the package.

Cheers

Design general focus trapping solution

We need a way to trap the focus inside a piece of DOM (or outside a piece of DOM), wrapping or refusing to tab in/out.

This includes the task of writing utility functions for detecting focusable elements.

mdProgressBar

• Determinate mode
• Indeterminate mode
• Buffer mode
• Query mode
• Unit tests
• E2E tests
• Documentation
• Demo page

md-button attaches class "md-undefined" to host element when on color provided

Given an html snippet with an md-button directive like so:

<button md-button>flat</button>

This produces the following ouput:

<button md-button ... class="md-undefined">...</button>

What it should produce is:

<button md-button ...>...</button>

The md-undefined class is getting attached due to this code since setClassList() returns "md-undefined" when the color attribute is unset.

I tried working around the by returning an empty string when color is undefined, but that resulted in this html:

<button md-button ... class>...</button>

Which is also invalid.

Consuming material2

Hi, knowing this package is in early stages, can you please provide steps on how we can consume material2 in ng2? maybe a hello world sample app?

Build example ngMaterial app skeleton

• Layout include a side-nav and a top toolbar
• Contains examples of each of the completed components
• Uses router

mdTabs

Didn't see this on the feature list. Adding - it's important for my project.

Thanks.

Error: Cannot find module 'request'

$ ng build --watch
version: 1.13.13
Cannot find module 'request'
Error: Cannot find module 'request'
    at Function.Module._resolveFilename (module.js:339:15)
    at Function.Module._load (module.js:290:25)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Leek._enqueue (C:\Users\mattchar\AppData\Roaming\npm\node_modules\angular-cli\node_modules\leek\lib\leek.js:60:30)
    at Leek.track (C:\Users\mattchar\AppData\Roaming\npm\node_modules\angular-cli\node_modules\leek\lib\leek.js:87:15)
    at Class.Command.validateAndRun (C:\projects\testit\node_modules\ember-cli\lib\models\command.js:117:18)
    at C:\projects\testit\node_modules\ember-cli\lib\cli\cli.js:86:22
    at lib$rsvp$$internal$$tryCatch (C:\projects\testit\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (C:\projects\testit\node_modules\rsvp\dist\rsvp.js:1048:17)

TS syntax for string types for OneOf

TypeScript 1.8 is introducing a new syntax for string types:

https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#string-literal-types

eg.:

interface AnimationOptions {
    deltaX: number;
    deltaY: number;
    easing: "ease-in" | "ease-out" | "ease-in-out";
}

This could provide or extend the OneOf annotation.
Possibly some tools could infer more from this syntax as well.

Current syntax is as follow (https://github.com/angular/material2/blob/master/src/components/sidenav/sidenav.ts):

@Input() @OneOf(['over', 'push', 'side']) mode: string = 'over';

I think of something like:

@Input() @OneOf() mode: 'over'|'push'|'side' = 'over';

or even NG M2 could infer from the type the OneOf annotation is expected:

@Input() mode: 'over'|'push'|'side' = 'over';

Add README for progress circle

mdSidebar

• Responsive by default
• RTL support
• Unit tests
• E2E tests
• Documentation
• Demo

Make sure easing curves and shadows are on-spec

Current easing curves and shadows are pulled from Angular 1 version. We need to double check that these reflect the current state of the spec.

error on build project

HEllo,
i'm getting this error,

Build error
[TSToDartTranspiler]: ENOENT: no such file or directory, mkdir 'd:\material2\material2\tmp\diffing_plugin_wrapper-cache_path-08ngz6YY.tmp\d:'
Error: [TSToDartTranspiler]: ENOENT: no such file or directory, mkdir 'd:\material2\material2\tmp\diffing_plugin_wrapper-cache_path-08ngz6YY.tmp\d:'
    at Error (native)
    at Object.fs.mkdirSync (fs.js:842:18)
    at d:\source\mkdirp.ts:14:10
    at Array.forEach (native)
    at Object.mkdirP [as default] (d:\source\mkdirp.ts:11:21)
    at d:\source\main.ts:109:17
    at Array.forEach (native)
    at Transpiler.transpile (d:\source\main.ts:106:10)
    at TSToDartTranspiler.rebuild (d:\material2\material2\tools\broccoli\broccoli-ts2dart.ts:38:25)
    at DiffingPluginWrapper.rebuild (d:\material2\material2\tools\broccoli\diffing-broccoli-plugin.ts:86:45)

how to fixe it please !

Travis CI enforces TSLint

Dev mode assertions

We want to be able to perform certain assertions during development mode that are stripped out in prod mode.

Valid component structure

• Sidenav
• Cards

a11y

• Progress bar and circle have descriptions
• Buttons have text or a label
• Inputs / checkboxes / radio buttons have a label.
• mat-icon shouldn't have a click handler

(add more to this issue as we encounter them)

feat(): drag service

I'd like to implement a drag service which allows to register drag events for common components like switch or sidenav

mdCheckbox

• Determine if component can be built on top of a native <input type="checkbox">
• Unit tests
• E2E tests
• Documentation
• Demo page

Add focus trapping to sidenav.

Depends on issue #49.

[Question]: will this be the official repo for Angular 2 Material?

mdButton

• Only show focus state on keyboard event
• Unit tests
• E2E tests
• Enforce button has either text or an ARIA label (dev mode only)
• Documentation
• Demo page

Design PanelManager service

• Handles known component use-cases (dialogs, toasts, tooltips, pop-ups, menus).

mdProgressCircle

• Indeterminate mode (md-spinner)
• Determinate mode
• Unit tests
• E2E tests
• Documentation
• Demo page

Project status

Hi guys, can anyone tell me the project status? Can I use him at production? I didn't found any example to use this material2 with angular2.

Thanks in advance.

Fix the licence in package.json

package.json mentions Apache-2 licence while the project includes an MIT licence.

Add e2e test for button

Release 0.0.1

Do you plan to release 0.0.1 so we can npm install in our projects? Or can you please tell us how to use in other projects.

BTW, the demo is starting to look nice - super excited about this project!

Screenshot diff testing

• Pull screenshots from existing SauceLabs and BrowserStack e2e test runs.
• Store gold screenshots
• Threshold-based comparison vs. gold images performed for code changes
• Generate highlighted diff images

Core gesture handling module

• Research existing gesture libraries (polymer, hammer, etc.)
• Propose approach
• Define gesture vocabulary (swipe, pan, tap, drag, etc.)
• Solidify path forward with hammer (alpha.2) (hammerjs/hammer.js#917)
• Support for devices with touch and mouse (alpha.3)
• Create / modify Angular event plugin on top of module (alpha.3)
• Ensure "drag" recognizer doesn't overwrite "pan"

Add e2e test for sidenav

Components in Angular Material 1

With due time, do you intend to implement all theme components already implemented in Angular Material 1?

mdToolbar

• Unit tests
• E2E tests
• Documentation
• Demo page

feat(): switch component

Hello,
Just wanted to know, if someone is already working on the switch component?
As I recently trying things with Angular 2 I built a few components and would like to help if desired at the material2 component. I know it's still in early stages, but I think it never hurts to ask.

Explore the impact of using SCSS @extend vs @include

See:

• http://csswizardry.com/2016/02/mixins-better-for-performance/
• https://tech.bellycard.com/blog/sass-mixins-vs-extends-the-data/
• Explore payload size
• Explore runtime impact

Watch and re-build automatically during unit test runs

Currently, if you want the tests to update, you have to run "ng build" on one tab and karma on the other. The test run should be watching for updates and rebuilding.

Design and document approach for inputs

• Determine a way to expose the native input element to the developer (material2 doesn't have to forward all input properties)
• Strategy for making all form inputs aligned
• Strategy for displaying errors next to inputs (and how that impacts vertical alignment)

Add README for card and button

ignore/delete this

please ignore this

Interested in contributing for material 2 project.

I am an angular/OSS enthusiastic, Interested in contributing for material 2 project. But i didnt find any road map in the project.

md-grid-list

• Move existing TS code from angular/angular
• Update code to new syntax
• Remove Dart wrappers
• Fix issue with host binding and lifecycle
• Can change number of columns based on screen size
• Grid tile header and footer
• Refactor scss
• unit tests
• e2e tests
• readme

Run protractor tests on Travis

Tests should run on the same environments as the karma unit tests (using SauceLabs and BrowserStack).

Which is the correct material2 repository?

Hello together,

i'm a little bit confused about which is the official repository for angular2 material design.

There is this one and the one in the angular/modules/angular2_material repository (https://github.com/angular/angular/tree/master/modules/angular2_material)

So what is the correct one?

You can do with him ?

this man ,https://github.com/justindujardin/ng2-material/

Cooperation
Invite him

thank you very much :)

Add Router in the DemoApp

We need multiple pages for testing / looking at the components.

Drop support for legacy IE versions(< 11)

According to Microsoft, only the latest version of IE is supported since Jan 12, 2016. And since this project is still in early stages, it would not be a bad move to drop support for older IE versions(< IE11) and plan for a less hacky implementation.

Dart transpilation

• Re-use facades from angular/angular
• Dart output is generated from TS source
• Dart output passes DartAnalyzer
• Dart code is built and passes DartAnalyzer on Travis
• Demo site runs in Dartium with Dart source (alpha.2)
• Unit tests run in Dart (alpha.3)
• Unit tests run in Dart on Travis (alpha.3)
• E2E tests run against Dartium (alpha.4)

Where possible, extract as much as possible from angular/angular and use in both repos OR make improvements to ts2dart directly.

Design service for helping build responsive components

We should have something that works both in headless rendering and browsers.

The solution should be something along those lines (pseudo code):

@Injectable()
export class MdLayoutService {
  onLayoutChange: EventEmitter<MdLayoutEnum> = new EventEmitter<MdLayoutEnum>();
  get currentLayout(): MdLayoutEnum {
    return this.layout_;
  }

  constructor(private layout_: MdLayoutEnum) {
    if (!headless) {  // <-- Tricky part
      window.matchMedia('...').addListener((mql) => this.onLayoutChange.emit(...));
    }
  }
};

You can then provide an MdLayoutEnum constant in headless browsing (or if you want to fix it in the browser or unit tests).

TODO:

• Design Doc.

md-sidenav unit tests are flaky

Chrome 48.0.2564 (Mac OS X 10.11.3) MdSidenav methods should be able to open and close FAILED
Expected 'hidden' to equal 'visible'.

Add e2e test for progress circle

mdCard

• Basic empty card
• Convenience pre-made card styles
• Documentation
• Demo page