Angular Material

Angular material is a UI component library|package to provide rich user interaction

 with angular app
Angular material is providing so many built in components and directives to provide better look and feel

Angular material is an alternative to bootstrap css

  angular material------> native | built in with angular[provided by angular team]
                          less responsive

   bootstrap css -------> third party css framework[provided by twitter]
                           more responsive

*angular material will use angular animations internally
*angular material is based on angular cdk[component development kit]

   raw gold[biscuit gold]-->mould----->ornaments [chain,ring,...]

   angular cdk[raw level]-->moulded--->datepicker,tabcontainer,..[components-->material]

angular material is providing following components | directives:
 1.mat-button         --rectangular text based button without elevation
 2.mat-raised-button  --rectangular text based button with elevation
 3.mat-icon-button    --circular button with transparent color to show icon, this requires

 mat-icon component
                       syntax:
                          <button mat-icon-button>
                             <mat-icon>
                               iconname  [edit,delete,favorite,..]
                             </mat-icon>
                           </button>

icon names are predefined, this can be downloaded from
        http://fonts.googleapis.com/icon?family=Material+Icons


4.matTooltip--this will display fancy tooltip
 5.mat-card  --this is a container to group related text, controls,..
 6.mat-form-field--this is used to apply text based styling like floating text, underline,
                   icon, hint,..
 7.matInput     --this should be applied to textbox or text area to apply mat-form-field
                  text based styling[like floating text,..] 


syntax:
         <mat-form-field>
              <input type="text" matInput>
              <mat-icon matSuffix>iconname</mat-icon>
                 ...
         </mat-form-field>

8.mat-spinner--this is used to display spinner[animated circle]


Example 


Go to command prompt and install the animations package as 
ng add @angular/material


















Next check, with this below command 

>npm i @angular/material









npm i @angular/cdk










angular material installation will provide built-in CSS files

node_modules/@angular/material/prebuilt-themes/indigo-pink.css

 this css will provide color options like primary, warn,..

You can see that it  is automatically reflected in the angular.json file as shown below









*goto src folder and select styles.css
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

styles.css







Note:
-----
->the style files imported into styles.css will be global through out the project
-> ~ symbol will substitute node_modules/ 



Example

*create a component
  >ng g c demo --flat









demo Component.html

<button mat-button color="primary">Login</button> <br>
<button mat-raised-button color="primary" matTooltip="save user details">Register</button> <br>
<button mat-icon-button color="warn">
    <mat-icon>
        favorite
    </mat-icon>
</button>
<br>
<mat-card>
    <mat-form-field>
        <input matInput placeholder="username">
        <mat-icon matSuffix>person_outline</mat-icon>
        <mat-hint>username is case sensitive</mat-hint>
    </mat-form-field>
</mat-card>
<br>
<mat-tab-group>
    <mat-tab label="news">
        <h3>display new info</h3>
    </mat-tab>
    <mat-tab label="sports">
        <h3>display sports info</h3>
    </mat-tab>
    <mat-tab label="shares">
        <h3>display shares info</h3>
    </mat-tab>
</mat-tab-group>
<br>
<mat-spinner color="primary"></mat-spinner>


*goto app.module.ts
    ...
import{MatButtonModule} from "@angular/material/button";
import{MatIconModule} from "@angular/material/icon";
import{MatTooltipModule} from "@angular/material/tooltip"
import{MatCardModule} from "@angular/material/card";
import{MatFormFieldModule} from "@angular/material/form-field";
import{MatInputModule} from "@angular/material/input";
import{MatTabsModule} from "@angular/material/tabs";
import{MatProgressSpinnerModule} from "@angular/material/progress-spinner";
import{BrowserAnimationsModule} from "@angular/platform-browser/animations";
@NgModule({
     ..
imports:   [ BrowserModule,MatButtonModule,MatIconModule,MatTooltipModule,MatCardModule,MatFormFieldModule,MatInputModule,MatTabsModule,MatProgressSpinnerModule,BrowserAnimationsModule
  ],
  ..
bootstrap:[DemoComponent]
    })
  ...





Output












Note:
-----

Material.angular.io is a official website of angular material, this will provide
  samples for different material components
              browser
           material.angular.io
                  |
              components
...
datepicker-------   basic datepicker
                                            <>[view code]
                                             |
                                   ....         -->copy code



















goto demo.component.html
   <mat-form-field appearance="fill">        --> paste datepicker component code
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <br>


import{MatDatepickerModule} from "@angular/material/datepicker";
import{MatNativeDateModule} from "@angular/material/core";
@NgModule({
    ...
 imports:[...,MatDatepickerModule,MatNativeDateModule]
    ...
     })
   ...


Output