[PDF] angular-material2.pdf You are now ready to

View - Download angular-material2.pdf

Previous PDF

Next PDF

angular-material2 #angular- material2

Table of Contents

About1

Chapter 1: Getting started with angular-material22

Remarks2

Versions2

Examples2

Installation or Setup with Angular CLI2

Wrapping all modules together3

Installation and Setup from master with Angular CLI4

Set up theme, gesture support and material icons5

Chapter 2: md-autocomplete7

Introduction7

Remarks7

Examples7

Separate control and display7

Get md-autocomplete's options/searchable data from API8

Utilize md-autocomplete inside a reactive form10

One md-autocomplete for multiple formControl13

Chapter 3: md-button16

Introduction16

Parameters16

Remarks16

Examples16

Simple buttons16

Chapter 4: md-datepicker17

Introduction17

Remarks17

Examples17

Data binding with md-datapicker17

Passing selected date value to a function using $event17

Open datepicker on focus18

Set different locale for md-datepicker20

Chapter 5: md-dialog22

Introduction22

Remarks22

Examples22

Initialize md-dialog with data passed from parent component22

Chapter 6: md-icon24

Examples24

Creating an icon24

Using SVG Icons24

Chapter 7: md-table26

Introduction26

Remarks26

Examples26

Connect DataSource from external API26

Credits29

About You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: angular-material2 It is an unofficial and free angular-material2 ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official angular- material2. The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners. Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to info@zzzprojects.com https://riptutorial.com/1

Chapter 1: Getting started with angular-

material2

Remarks

This section provides an overview of what angular-material2 is, and why a developer might want to use it. It should also mention any large subjects within angular-material2, and link out to the related topics. Since the Documentation for angular-material2 is new, you may need to create initial versions of those related topics.

Versions

VersionChangelogDate

2.0.0-beta.8Link2017-07-06

2.0.0-beta.7Link2017-06-19

2.0.0-beta.6Link2017-05-25

2.0.0-beta.5Link2017-05-13

2.0.0-beta.4Link2017-05-12

2.0.0-beta.3Link2017-04-07

2.0.0-beta.2Link2017-02-15

2.0.0-beta.1Link2016-12-23

2.0.0-beta.0Link2016-12-22

Examples

Installation or Setup with Angular CLI

In this example, we will be using (latest) and the latest version of . You should at least know the basics of Angular 2/4 before continuing the steps below.

Install angular material module from :

1. https://riptutorial.com/2

2.0.0-beta.3

This only applies to versions and up.

Install the module:

2.0.0-beta.8

This only applies to versions and up.

Install the module:

In your application module import the components which you are going to use: 2. You are now ready to use Angular Material in your components! Note: The docs for specific components will be coming soon.

Wrapping all modules together

You can also easily wrap all angular modules, which you are going to use, into one module: https://riptutorial.com/3 After that simply import your module into the application main module: Installation and Setup from master with Angular CLI This example will be how to install from master and will be using as well.

Make a new project with :

If you haven't installed , use this command:

1.

Install from :2.

https://riptutorial.com/4

Follow the same guide as above.3.

Done!

Set up theme, gesture support and material icons

Theme:

A theme is required for material components to work properly within the application.

Angular Material 2 provides four prebuilt themes:

deeppurple-amber• indigo-pink• pink-bluegrey• purple-green• If you are using Angular CLI, you can import one of the prebuilt themes in .

Theme can be added using in as well.

HammerJS

Add HammerJS to the application via CDN or :

In your root module, usually , add the import statement:

Material Icons:

Unless, custom icons provided, Angular Material 2 expects Material Icons.

In add:

https://riptutorial.com/5 Read Getting started with angular-material2 online: https://riptutorial.com/angular- https://riptutorial.com/6

Chapter 2: md-autocomplete

Introduction

This topic includes coding examples related to Angular Material 2 Autocomplete (md- autocomplete)

Remarks

These examples don't cover all features of md-autocomplete. Please read the documentation learn more about md-autocomplete.

Examples

Separate control and display

This example shows how to to display specific property in dropdown but bind with the whole object. autocomplete-overview-example.html: autocomplete-overview-example.ts: https://riptutorial.com/7

Live Example

Get md-autocomplete's options/searchable data from API data.service.ts: autocomplete-overview-example.html: https://riptutorial.com/8 autocomplete-overview-example.ts: https://riptutorial.com/9

Live Example

Utilize md-autocomplete inside a reactive form

This example requires and . Please import them in your application/module. input-form-example.html https://riptutorial.com/10 input-form-example.ts: https://riptutorial.com/11 input-form-example.css: https://riptutorial.com/12

Live Example

One md-autocomplete for multiple formControl

This example requires and . Please import them in your application/module. autocomplete-overview-example.html: autocomplete-overview-example.ts: https://riptutorial.com/13 https://riptutorial.com/14

Live Example

Read md-autocomplete online: https://riptutorial.com/angular-material2/topic/10850/md- autocomplete https://riptutorial.com/15

Chapter 3: md-button

Introduction

This topic includes examples on how to create a button and what its' directives and other stuff do.

Parameters

AttributeDescription

Creates a rectangular button w/ no elevation.

Creates a rectangular button w/ elevation

Creates a circular button with a transparent background, meant to contain an icon Creates a circular button w/ elevation, defaults to theme's accent color

Same as but smaller

Whether the ripple effect for the button is disabled.

Remarks

For more information and more examples, visit the docs.

Examples

Simple buttons

To create a button, use the attribute for a flat button and for an elevated button:

Plunker Demo

For more information about icons, see the docs on . Read md-button online: https://riptutorial.com/angular-material2/topic/10870/md-button https://riptutorial.com/16

Chapter 4: md-datepicker

Introduction

This topic focuses on examples related to md-datepicker.

Remarks

For more details, please check the documentation here.

Examples

Data binding with md-datapicker

datepicker-overview-example.html: datepicker-overview-example.ts:

Live demo

Passing selected date value to a function using $event https://riptutorial.com/17 datepicker-overview-example.html: datepicker-overview-example.ts:

Live demo

Open datepicker on focus

This example also includes the use of properties:

min• max• startAt• startView• touchUi• datepicker-overview-example.html: https://riptutorial.com/18 https://riptutorial.com/19 datepicker-overview-example.ts:

Live demo

Set different locale for md-datepicker

This example requires importing .

datepicker.component.html: https://riptutorial.com/20 datepicker.component.ts:

Live demo

A list of locale language code can be found here.

Read md-datepicker online: https://riptutorial.com/angular-material2/topic/10876/md-datepicker https://riptutorial.com/21quotesdbs_dbs22.pdfusesText_28

[PDF] angular material best practices

[PDF] angular material project example github

[PDF] angular modules structure best practices

[PDF] angular node js mongodb tutorial

[PDF] angular notes pdf

[PDF] angular pdf export

[PDF] angular pdf generator

[PDF] angular pdf tutorial

[PDF] angular pdf viewer base64

[PDF] angular pdfjs

[PDF] angular pdfmake

[PDF] angular performance testing tools

[PDF] angular project run command

[PDF] angular project sample github

[PDF] angular project structure example github