Angular-material2 - RIP Tutorial

3y ago
325 Views
77 Downloads
922.52 KB
32 Pages
Last View : 2m ago
Last Download : 2m ago
Upload by : Kamden Hassan
Transcription

angular-material2#angularmaterial2

Table of ContentsAbout1Chapter 1: Getting started with lation or Setup with Angular CLI2Wrapping all modules together3Installation and Setup from master with Angular CLI4Set up theme, gesture support and material icons5Chapter 2: rate control and display7Get md-autocomplete's options/searchable data from API8Utilize md-autocomplete inside a reactive form10One md-autocomplete for multiple formControl13Chapter 3: ples16Simple buttonsChapter 4: Data binding with md-datapicker17Passing selected date value to a function using event17Open datepicker on focus18

Set different locale for md-datepickerChapter 5: ialize md-dialog with data passed from parent componentChapter 6: md-iconExamples222424Creating an icon24Using SVG Icons24Chapter 7: md-table26Introduction26Remarks26Examples26Connect DataSource from external APICredits2629

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

Chapter 1: Getting started with angularmaterial2RemarksThis section provides an overview of what angular-material2 is, and why a developer might want touse it.It should also mention any large subjects within angular-material2, and link out to the relatedtopics. Since the Documentation for angular-material2 is new, you may need to create initialversions of those related eta.0Link2016-12-22ExamplesInstallation or Setup with Angular CLIIn this example, we will be using @angular/cli (latest) and the latest version of @angular/material.You should at least know the basics of Angular 2/4 before continuing the steps below.1. Install angular material module from npm:npm install @angular/material --savehttps://riptutorial.com/2

2.0.0-beta.3This only applies to versions 2.0.0-beta.3 and up.Install the @angular/animations module:npm install @angular/animations --save2.0.0-beta.8This only applies to versions 2.0.0-beta.8 and up.Install the @angular/cdk module:npm install @angular/cdk --save2. In your application module import the components which you are going to use:importimportimportimport{{{{NgModule } from '@angular/core';CommonModule } from '@angular/common';RouterModule } from '@angular/router';MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';import { AppComponent } from './app.component';import { BrowserAnimationsModule } from imports: Module,MdSidenavModule,CommonModule,// This is optional unless you want to have routing in your app// RouterModule.forRoot([//{ path: '', component: HomeView, pathMatch: 'full'}// ])],declarations: [ AppComponent ],boostrap: [ AppComponent ]})export class AppModule {}You are now ready to use Angular Material in your components!Note: The docs for specific components will be coming soon.Wrapping all modules togetherYou can also easily wrap all angular modules, which you are going to use, into one module:import { NgModule } from '@angular/core';import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';https://riptutorial.com/3

@NgModule({imports: Module,MdSidenavModule],exports: )export class MaterialWrapperModule {}After that simply import your module into the application main module:import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { RouterModule } from '@angular/router';import { MaterialWrapperModule } from './material-wrapper.module.ts';import { AppComponent } from './app.component';@NgModule({imports: monModule,// This is optional, use it when you would like routing in your app// RouterModule.forRoot([//{ path: '', component: HomeView, pathMatch: 'full'}// ])],declarations: [ AppComponent],bootstrap: [ AppComponent ]})export class AppModule {}Installation and Setup from master with Angular CLIThis example will be how to install from master and will be using @angular/cli as well.1. Make a new project with @angular/cli:ng new my-master-appIf you haven't installed @angular/cli, use this command:npm install -g @angular/cli2. Install from master:https://riptutorial.com/4

npm install --save @angular/animationsnpm install --save angular/material2-buildsnpm install --save angular/cdk-builds3. Follow the same guide as above.Done!Set up theme, gesture support and material iconsTheme:A theme is required for material components to work properly within the application.Angular Material 2 provides four prebuilt themes: enIf you are using Angular CLI, you can import one of the prebuilt themes in style.css.@import " ;Theme can be added using link in index.html as well. link href "node ink.css" rel "stylesheet" HammerJSAdd HammerJS to the application via CDN or npm:npm install --save hammerjsIn your root module, usually app.module.ts, add the import statement:import 'hammerjs';Material Icons:Unless, custom icons provided, Angular Material 2 md-icon expects Material Icons.In index.html add: link href "https://fonts.googleapis.com/icon?family Material Icons" rel "stylesheet" https://riptutorial.com/5

Read Getting started with angular-material2 online: iptutorial.com/6

Chapter 2: md-autocompleteIntroductionThis topic includes coding examples related to Angular Material 2 Autocomplete (mdautocomplete)RemarksThese examples don't cover all features of md-autocomplete. Please read the documentationlearn more about md-autocomplete.ExamplesSeparate control and displayThis example shows how to to display specific property in dropdown but bind with the wholeobject.autocomplete-overview-example.html: md-input-container input mdInput placeholder "State" [(ngModel)] "selection"[mdAutocomplete] "auto" [formControl] "stateCtrl" /md-input-container md-autocomplete #auto "mdAutocomplete" [displayWith] "displayFn" md-option *ngFor "let state of filteredStates async" [value] "state" {{ state.Country }} /md-option /md-autocomplete p Selected Country: {{selection json}} /p p Selected Country Id: {{selection?.CountryID}} /p autocomplete-overview-example.ts:import {Component} from '@angular/core';import {FormControl} from '@angular/forms';import 'rxjs/add/operator/startWith';import 'rxjs/add/operator/map';@Component({selector: 'autocomplete-overview-example',templateUrl: 'autocomplete-overview-example.html',})export class AutocompleteOverviewExample {stateCtrl: FormControl;https://riptutorial.com/7

filteredStates: any;selection: any;states [{ Country: "United States Of America" , CountryID: "1"},{ Country: "United Kingdom" , CountryID: "2"},{ Country: "United Arab Emirates" , CountryID: "3"},];constructor() {this.stateCtrl new FormControl();this.filteredStates untry country && typeof country 'object' ? country.Country : country).map(name this.filterStates(name));}filterStates(val) {return val ? this.states.filter(s s.Country.toLowerCase().indexOf(val.toLowerCase()) 0): this.states;}displayFn(country): string {console.log(country);return country ? country.Country : country;}}Live ExampleGet md-autocomplete's options/searchable data from APIdata.service.ts:import { Injectable } from '@angular/core';import { Http } from '@angular/http';import 'rxjs/add/operator/map';@Injectable()export class DataService {constructor(private http: Http) { }fetchData(){return com/.json').map((res) res.json())}}autocomplete-overview-example.html: md-input-container https://riptutorial.com/8

input mdInput placeholder "Name" [mdAutocomplete] "auto" [formControl] "stateCtrl" /md-input-container md-autocomplete #auto "mdAutocomplete" [displayWith] "displayFn" md-option *ngFor "let sector of filteredSectors async" [value] "sector" {{ sector.name }} /md-option /md-autocomplete div h2 Data : /h2 span {{ allSectors json /div }} /span autocomplete-overview-example.ts:import {Component, OnInit} from '@angular/core';import {FormControl} from '@angular/forms';import { DataService } from './data.service';import 'rxjs/add/operator/startWith';import 'rxjs/add/operator/map';@Component({selector: 'autocomplete-overview-example',templateUrl: './autocomplete-overview-example.html',})export class AutocompleteOverviewExample implements OnInit{stateCtrl: FormControl;filteredSectors: any;allSectors;constructor(private dataService: DataService) {this.stateCtrl new ta().subscribe((data) {this.allSectors data.customers;this.filteredSectors l val ? this.filter(val) : this.allSectors.slice());});}filter(name) {return this.allSectors.filter(sector new RegExp( {name} , 'gi').test(sector.name));}displayFn(sector) {return sector ? sector.name : sector;}}https://riptutorial.com/9

Live ExampleUtilize md-autocomplete inside a reactive formThis example requires FormsModule and ReactiveFormsModule. Please import them in yourapplication/module.import {FormsModule, ReactiveFormsModule} from '@angular/forms';input-form-example.html form class "example-form" (ngSubmit) "submit(addForm.value)" [formGroup] "addForm" md-input-container class "example-full-width" input mdInput placeholder "Company (disabled)" disabled value "Google"formControlName "company" /md-input-container table class "example-full-width" cellspacing "0" tr td md-input-container class "example-full-width" input mdInput placeholder "First name" formControlName "fname" /md-input-container /td td md-input-container class "example-full-width" input mdInput placeholder "Long Last Name That Will Be Truncated" /md-input-container /td /tr /table p md-input-container class "example-full-width" textarea mdInput placeholder "Address" formControlName "address" 1600 AmphitheatrePkwy /textarea /md-input-container md-input-container class "example-full-width" textarea mdInput placeholder "Address 2" /textarea /md-input-container /p table class "example-full-width" cellspacing "0" tr td md-input-container class "example-full-width" input mdInput placeholder "City" formControlName "city" /md-input-container /td td md-input-container input mdInput placeholder "State"[mdAutocomplete] "auto"[formControl] "stateCtrl"formControlName "state" /md-input-container /td td md-input-container class "example-full-width" input mdInput #postalCode maxlength "5" placeholder "Postal Code" value "94043"formControlName "zip" md-hint align "end" {{postalCode.value.length}} / 5 /md-hint /md-input-container /td /tr /table button md-raised-buttontype "submit" Submit /button md-autocomplete #auto "mdAutocomplete" https://riptutorial.com/10

md-option *ngFor "let state of filteredStates async" [value] "state"(onSelectionChange) "selectState(state, addForm.value)" {{ state }} /md-option /md-autocomplete /form p Form values: /p p {{ addForm.value json }} /p ponent} from '@angular/core';{FormBuilder, FormGroup, FormControl} from js/add/operator/map';@Component({selector: 'input-form-example',templateUrl: 'input-form-example.html',styleUrls: ['input-form-example.css'],})export class InputFormExample {stateCtrl: FormControl;filteredStates: any;addForm: FormGroup;state;states https://riptutorial.com/11

'New Hampshire','New Jersey','New Mexico','New York','North Carolina','North 'Rhode Island','South Carolina','South inia','Washington','West ate fb: FormBuilder) {this.addForm this.fb.group({fname: '',address: '',address2: '',city: '',"state": this.state,zip: '',company: '',lname: ''});this.stateCtrl new FormControl();this.filteredStates me this.filterStates(name));}filterStates(val: string) {return val ? this.states.filter(s new RegExp( {val} , 'gi').test(s)): m));}selectState(state, form){// console.log(state);// console.log(form);form.state .com/12

.example-form {width: 500px;}.example-full-width {width: 100%;}Live ExampleOne md-autocomplete for multiple formControlThis example requires FormsModule and ReactiveFormsModule. Please import them in yourapplication/module.import {FormsModule, ReactiveFormsModule} from l: md-input-container input mdInput placeholder "State" [mdAutocomplete] "auto" [formControl] "stateCtrl" /md-input-container p /p md-input-container input mdInput placeholder "State2" [mdAutocomplete] "auto" [formControl] "stateCtrl2" /md-input-container p /p md-input-container input mdInput placeholder "State3" [mdAutocomplete] "auto" [formControl] "stateCtrl3" /md-input-container md-autocomplete #auto "mdAutocomplete" md-option *ngFor "let state of filteredStates async" [value] "state" {{ state }} /md-option /md-autocomplete autocomplete-overview-example.ts:import {Component} from '@angular/core';import {FormControl} from '@angular/forms';import 'rxjs/add/operator/startWith';import 'rxjs/add/operator/map';@Component({selector: 'autocomplete-overview-example',templateUrl: 'autocomplete-overview-example.html',})export class AutocompleteOverviewExample {stateCtrl: FormControl;stateCtrl2: FormControl;https://riptutorial.com/13

stateCtrl3: FormControl;filteredStates: any;states 'New Hampshire','New Jersey','New Mexico','New York','North Carolina','North 'Rhode Island','South Carolina','South inia','Washington','West Virginia','Wisconsin','Wyoming',];constructor() {this.stateCtrl new FormControl();this.stateCtrl2 new FormControl();this.stateCtrl3 new FormControl();this.filteredStates /14

.startWith(null).map(name this.filterStates(name));this.filteredStates ame this.filterStates(name));this.filteredStates ame this.filterStates(name));}filterStates(val: string) {return val ? this.states.filter(s s.toLowerCase().indexOf(val.toLowerCase()) 0): this.states;}}Live ExampleRead md-autocomplete online: 850/mdautocompletehttps://riptutorial.com/15

Chapter 3: md-buttonIntroductionThis topic includes examples on how to create a button and what its' directives and other stuff do.ParametersAttributeDescriptionmd-buttonCreates a rectangular button w/ no elevation.md-raisedbuttonCreates a rectangular button w/ elevationmd-icon-buttonCreates a circular button with a transparent background, meant to containan iconmd-fabCreates a circular button w/ elevation, defaults to theme's accent colormd-mini-fabSame as md-fab but smallerdisableRippleWhether the ripple effect for the button is disabled.RemarksFor more information and more examples, visit the docs.ExamplesSimple buttonsTo create a button, use the md-button attribute for a flat button and md-raised-button for an elevatedbutton: button button button button buttonmd-button Button /button md-raised-button Raised Button /button md-fab md-icon add /md-icon /button md-mini-fab md-icon check /md-icon /button md-icon-button md-icon person add /md-icon /button Plunker DemoFor more information about icons, see the docs on md-icon.Read md-button online: 870/md-buttonhttps://riptutorial.com/16

Chapter 4: md-datepickerIntroductionThis topic focuses on examples related to md-datepicker.RemarksFor more details, please check the md-datepicker documentation here.ExamplesData binding with md-datapickerdatepicker-overview-example.html: md-input-container input mdInput[mdDatepicker] "picker"[(ngModel)] "date"placeholder "Choose a date" button mdSuffix [mdDatepickerToggle] "picker" /button /md-input-container md-datepicker #picker /md-datepicker div Date Chosen using 'ngModel': div {{ date }} /div /div datepicker-overview-example.ts:import {Component, OnInit} from '@angular/core';@Component({selector: 'datepicker-overview-example',templateUrl: 'datepicker-overview-example.html'})export class DatepickerOverviewExample implements OnInit {date;ngOnInit(){this.date new Date();}}Live demoPassing selected date value to a function using eventhttps://riptutorial.com/17

datepicker-overview-example.html: md-input-container input mdInput [mdDatepicker] "picker" placeholder "Choose a date" [(ngModel)] "value" button mdSuffix [mdDatepickerToggle] "picker" /button /md-input-container md-datepicker #picker [startAt] "startDate" (selectedChanged) "selectedDate( event)" /mddatepicker p ngModel Value: {{value}} /p p Date from selectedDate(): {{checkDate}} /p datepicker-overview-example.ts:import {Component} from '@angular/core';@Component({selector: 'datepicker-overview-example',templateUrl: 'datepicker-overview-example.html'})export class DatepickerOverviewExample {value: Date new Date();checkDate: Date;selectedDate(date){// ngModel still returns the old valueconsole.log("ngModel: " this.value);// date passes the newly selected valueconsole.log("Selected Value: " date);this.checkDate date;}}Live demoOpen datepicker on focusThis example also includes the use of properties: minmaxstartAtstartViewtouchUidatepicker-ove

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: import { NgModule } from '@angular/core'; import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material'; https://riptutorial.com .

Related Documents:

11 am - Bernie O'Malley, RIP Kevin O'Brien, RIP 5 pm - Gary Gilliland, RIP Mon. April 19th - 9 am - John Blair, Jr., RIP Tues. April 20th - 9 am - Michael & Gwen LaHair, RIP Wed. April 21st - 9 am - Anthony Dunn Thurs. April 22nd - 9 am - David Acevedo, RIP Fri. April 23rd - 9 am - Edmund Kelly, RIP Sat. April 24th - 9 am - Louis White, RIP

Rip Van Winkle! Rip Van Winkle! NARRATOR: Rip looked all around but could see no one. RIP: Did you hear that, boy? STRANGER: (distantly yelling) Rip Van Winkle! Rip Van Winkle! WOLF: Grrrr. NARRATOR: Wolf bristled up his back, looking down the valley. Then Rip saw a strange figure slowly toiling up the side of

it could be considered a new framework. Angular versions 2 and up are backward compatible till the Angular 2, but not with Angular 1. To avoid confusion, Angular 1 is now named Angu-lar JS and Angular versions 2 and higher are named Angular. Angular JS is based on JavaScript while Angular is based on JavaScript superset called TypeScript.

Esto solo se aplica a las versiones 2.0.0-beta.3 y superiores. Instala el módulo @angular/animations: npm install @angular/animations --save 2.0.0-beta.8 Esto solo se aplica a las versiones 2.0.0-beta.8 y superiores. Instale el módulo @angular/cdk: npm install @angular/cdk --save

Angular Kinetics similar comparison between linear and angular kinematics Mass Moment of inertia Force Torque Momentum Angular momentum Newton’s Laws Newton’s Laws (angular analogs) Linear Angular resistance to angular motion (like linear motion) dependent on mass however, the more closely mass is distributed to the

Both Angular 2 and 4 are open-source, TypeScript-based front-end web application platforms. is the latest version of Angular. Although Angular 2 was a complete rewrite of AngularJS, there are no major differences between Angular 2 and Angular 4. Angular 4 is only an improvement and is backward compatible with Angular 2.

0. Since the angular measure q is the angular analog of the linear distance measure, it is natural to define the average angular velocity Xw\ as Xw\ q f-q 0 Dt where q 0 is the initial angular position of the object when Dt 0 and q f is the final angular position of the object after a time Dt of angular motion.

API RP 505 «API RP 505 « Recommended Practice for classification of locations for ElectricalRecommended Practice for classification of locations for Electrical Installations at Petroleum facilities classified as Class I, zone 0, zone1, zone2 » Foreword states : « API publications may be used by anyone desiring to do so. Every effort has been made by the Institute to assure the accuracy and .