Angular Material News | Angular Munich

A short update of what's going on within Angular Material (20th July 2017).

Quick overview of new components that have been released recently. Introduction to the on-going development of Angular's Component Development Kit.

https://www.meetup.com/Angular-Munich/events/241171835/?eventId=241171835&chapter_analytics_code=UA-58512522-1

Transcript

1. Angular Material News Paul Gschwendtner @devversion
2. ➔ Core Team Developer on Angular Material ➔ Infrastructure, Tooling and components ➔ 17 years old ➔ Student in Germany Paul Gschwendtner
3. What is Angular Material ?
5. Sprint from Zero to App Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.
6. Fast and Consistent Finely tuned performance, because every millisecond counts. Fully tested across modern browsers.
7. Versatile Themable, for when you need to stay on brand or just have a favorite color. Accessible and internationalized so that all users are welcome.
8. Optimized for Angular Built by the Angular team to integrate seamlessly with Angular.
9. How far is Angular Material ?
10. alpha.0 March 2016 beta.0 December 2016 beta.8 July 2017
11. 28 Material Design components
12. ~1000 commits since beta.0
13. Including lots of features and fixes
15. More examples in the docs can be expected
16. Tabs Example Example coming soon!
17. Okay, but what's new?
18. beta.3 April 2017 beta.8 July 2017
19. • Package Structure Updates • Deprecation of the MaterialModule • New Expansion Panel and Accordion • New Data Table Component • New Typography styling in Material • Introduction of the Component Development Kit (CDK)
20. Package Structure
21. Package Structure Flat ES Modules UMD Bundles
22. MaterialModule
23. @NgModule({ imports: [ MaterialModule ] }) export class MyAppModule {}
24. @NgModule({ imports: [ MdButtonModule, MdToolbarModule, MdSlideToggleModule ] }) export class MyAppModule {}
25. @NgModule({ exports: [ MdButtonModule, MdCardModule, MdSlideToggleModule ] }) export class MyAppMaterialModule {}
26. Expansion Panel
27. Expansion Panel
29. Documentation still missing!
30. Data Table
31. Data Table
33. Typography
34. <h1 class="mat-h1">Some text.</h1> <h2 class="mat-h2">Some different text.</h2>
35. <h1>This header is unstyled</h1> <section class="mat-typography"> <h1>This header will be styled</h1> </section>
36. @import '~@angular/material/theming'; $custom-typography: mat-typography-config( $font-family: monospace, $headline: mat-typography-level(32px, 48px, 700), $body-1: mat-typography-level(16px, 24px, 500) );
37. Component Development Kit
38. Accessibility Multi Directional Floating Panels Platform Projection Testing Responsive Engine
39. Example - LiveAnnouncer
40. import {A11yModule} from '@angular/cdk'; // Add to NgModule
41. import {LiveAnnouncer} from '@angular/cdk'; constructor(announcer: LiveAnnouncer) { announcer.announce('Hey Google!'); }
42. Example - Observe Content
43. import { A11yModule, ObserveContentModule } from '@angular/cdk';
44. <!-- Tab Labels --> <div (cdkObserveContent)="_alignInkBar()"> <ng-content></ng-content> </div>
45. CDK = In Progress • Documentation • Overlay / Floating Panels • Move of Media Query Engine • And more ...
46. Thanks for listening Paul Gschwendtner @devversion Link to Slides: https://goo.gl/GQRg3M