Angular Material Commands

[abu18saud]

Add Material To Your Prrogect

ng add @angular/material

Add navbar

ng g @angular/material:navigation nav

Add dashboard

ng g @angular/material:dashboard home

Add Address Form

ng generate @angular/material:address-form

Add Table

ng generate @angular/material:table

Add Table

ng generate @angular/material:table

Add Tree

ng generate @angular/material:tree

resource

https://material.angular.io/guide/schematics

reduce

• https://www.digitalocean.com/community/tutorials/list-processing-with-map-filter-and-reduce

Add Material Moudule

• ng g m material

stackblitzes

• https://stackblitz.com/edit/angular-googlecharts

Command

• npm install --save @angular-material-components/datetime-picker --force
• npm i @angular/material-moment-adapter --force
• npm i moment
• npm i @angular/material-moment-adapter

Date Library

• npm install date-fns --save

titles

This is display 4

This is display 3

This is display 2

This is display 1

This is heading for h1

This is heading for h2

This is heading for h3

This is heading for h4

This is body text

This is a bold body text

This is caption text

• يمكنك استخدام h كما ينيغي

  This is heading for h1

  This is heading for h2

  This is heading for h3

  This is heading for h4

Buttons

Basic Primary Accent Warn Disabled Link

Icon Primary Accent

Toggle Buttons

• الفردي

  Toggle {{toggleBtn.checked}}

• على شكل مجموعة

  Angular React Vue {{ toggleGroup.value }}

  badges

  Notifications
  Notifications
  Notifications
  Notifications
  Notifications
  Notifications
  Notifications
  Notifications
  Notifications
  Notifications

Progress Spinner

• دوران لا نهائي

  <mat-spinner *ngIf="showSpinner" color="accent"> <button (click)="loadData()">Load Data

  showSpinner = false;

  loadData() { this.showSpinner = true; setTimeout(() => { this.showSpinner = false; }, 5000); }

  navbar

  Codevolution
  Home About Services

.navbar { justify-content: space-between; }

span{ padding-right: 1rem; }

Sidenav

Sidenav Main Toggle opened Open Close Toggle

opened = false;

log(state:any) { console.log(state); }

menu

<mat-menu #appMenu="matMenu" xPosition="after" yPosition="above">
<button mat-menu-item [matMenuTriggerFor]="subMenu">FrontEnd</button>
<button mat-menu-item [matMenuTriggerFor]="backEnd">BackEnd</button>

<button class="center" mat-flat-button [matMenuTriggerFor]="appMenu">Menu

<mat-menu #subMenu="matMenu">

Angular

<button mat-menu-item>React</button>
<button mat-menu-item>vue</button>

<mat-menu #backEnd="matMenu">

C#

<button mat-menu-item>php</button>
<button mat-menu-item>Java</button>

.center{ margin: 10rem; }

Lists

Item 1 Item 2 Item 3 home Home About Service home

Heading

Line

folder

Heading

Line

Grid List

<mat-grid-list rowHeight="fit" style="height: 200px" gutterSize="10px" cols="2">

<mat-grid-tile>Title 1</mat-grid-tile>
<mat-grid-tile>Title 1</mat-grid-tile>
<mat-grid-tile>Title 1</mat-grid-tile>
<mat-grid-tile>Title 1</mat-grid-tile>

mat-grid-tile{ background-color: lightblue; }

Expansion Panel - أداة رائعة للتوسيع والطي

Angular Fundamentals Total Duration: 3 hours

This is the panel content. Add course details

Enroll Angular Material Total Duration: 2 hours

This is the panel content. Add course details

Enroll

Cards

Card Title This is the card content Login

Tabs

<mat-tab-group #tabRef (selectedChange)="logChange(tabRef.selectedIndex)">

Angular Content React Content Vue Content

{{ tabRef.selectedIndex }} logChange(state:any){ console.log(state); }

Stepper

أفقي

<mat-horizontal-stepper linear>
<mat-step label="Shipping Address" completed=true>
  <p>Shipping Addess Details</p>
</mat-step>
<mat-step label="Billing Address" completed=false optional>
  <p>Billing Address Details</p>
  <div>
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button matStepperNext>Next</button>
  </div>
</mat-step>
<mat-step label="Place Order" completed=false>
  <p>Billing Address Details</p>
</mat-step>

عامودي

<mat-vertical-stepper linear>
<mat-step label="Shipping Address" completed=true>
  <p>Shipping Addess Details</p>
</mat-step>
<mat-step label="Billing Address" completed=false optional>
  <p>Billing Address Details</p>
  <div>
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button matStepperNext>Next</button>
  </div>
</mat-step>
<mat-step label="Place Order" completed=false>
  <p>Billing Address Details</p>
</mat-step>

input

Name Min 5 characters

Select

<mat-form-field>
<mat-label>Favorite food</mat-label>
<mat-select [(value)]="selectedValue" multiple>
  <mat-option>None</mat-option>
  <mat-optgroup label="Web">
  <mat-option value="angular">Angular</mat-option>
  <mat-option value="react">React</mat-option>
  <mat-option value="vue">Vue</mat-option>
  </mat-optgroup>
  <mat-optgroup label="Mobile">
  <mat-option value="ionic">Ionic</mat-option>
  <mat-option value="reactnative">React Native</mat-option>
  </mat-optgroup>
</mat-select>

{{selectedValue}}

selectedValue: string= "";

Autocomplete

الأساسية

{{option}}

options: string[] = ["Angular","React","Vue"];

الكائنات

{{option.name}}

objectOptions = [
{ name: 'Angular' },
{ name: 'React' },
{ name: 'vue' },

];

الفلاتر - لا تعمل بشكل جيد

<form>
<mat-form-field>
  <input type="text" matInput [matAutocomplete]="auto" [formControl]="myControl" />
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{option}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

import { FormControl } from '@angular/forms'; import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; import { map, startWith } from 'rxjs/operators';

myControl = new FormControl(); filteredOptions: Observable<string[]> = {} as Observable<string[]>;

OnInit() { this.filteredOptions = this.myControl.valueChanges.pipe( startWith(''), map(value => this._filter(value)) ); }

private _filter(value: string): string[] { const filterValue = value.toLowerCase(); return this.options.filter(option => option.toLowerCase().includes(filterValue)); }

مربعات الاختيار

Subscribe

Subscribe

Subscribe

Subscribe

أزرار الراديو

Angular React Vue

منتقي التاريخ

minDate = new Date();

maxDate = new Date(2022, 3, 10); // لإلغاء اختيار نهايات الأسبوع على سبيل المثال dateFilter = date => { const day = date.getDay(); return day != 5 && day != 6;

Tooltip - التلميح

<button 

mat-raised-button matTooltip="Welcome to Codevolution" matTooltipPosition="after" matTooltipShowDelay="2000" matTooltipHideDelay="2000">Hello

Snackbar

<button mat-button (click)="openSnackBar('Item deleted', 'Undo')"> Delete

import { MatSnackBar } from "@angular/material/snack-bar"; constructor(private snackBar: MatSnackBar){}

openSnackBar(message: any, action: any) { let snackBarRef = this.snackBar.open(message, action, {duration: 2000});

snackBarRef.afterDismissed().subscribe(() => {
  console.log('The snackbar action dismissed')
});
snackBarRef.onAction().subscribe(() => {
  console.log('The snackbar action was triggered!')
});

Custom

@Component({ selector: 'custom-snackbar', template: <span style='color: orange'>Custom Snackbar</span> }) export class CustomSnackBarComponent{}

openCustomSnackBar(){ this.snackBar.openFromComponent(CustomSnackBarComponent, {duration: 2000}); }

<button mat-button (click)="openCustomSnackBar()"> Show custom snackbar

مربعات الحوار - Dialogs

• Cli ng g c dialog-example --skipTests

• appModule.ts entryComponents: [DialogExampleComponent],

  //--------------------------------------------

• ts Dialog Component import { Component, OnInit, Inject } from '@angular/core'; import { MAT_DIALOG_DATA } from "@angular/material/dialog";

  constructor(@Inject(MAT_DIALOG_DATA) public data:any) { }

  • HTML Dialog Component

    Session timeout

    Hi {{ data.name}}. You will be logged out due to inactivity Keep me logged in Log out

//---------------------------------------------

• home HTML <button mat-raised-button (click)="openDialog()"> Open Dialog

  • home ts import { MatDialog } from "@angular/material/dialog"; import { DialogExampleComponent } from '../dialog-example/dialog-example.component';

  constructor(public dialog: MatDialog){}

  openDialog() { let dialogRef = this.dialog.open(DialogExampleComponent, {data: {name: 'Vishwas'}}); dialogRef.afterClosed().subscribe(result => { console.log(Dialog result: ${result}); }); }

[abu18saud]

Changing Primary Color in Angular Material

https://stackoverflow.com/questions/38734518/changing-primary-color-in-angular-material-2

[abu18saud]

أداة اختيار الألوان: https://material.io/resources/color/#!/?view.left=1&view.right=1&primary.color=8e8540

http://mcg.mbitson.com/#!?mcgpalet=%233f51b5

[abu18saud]

الثيمات التي يمكن اختيارها: purple-green.css pink-bluegrey.css indigo-pink.css deeppurple-amber.css purple-green.css

[abu18saud]

محتوى customTheme.scss

// Custom Theming for Angular Material // For more information: https://material.angular.io/guide/theming @use '@angular/material' as mat; // Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! @include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ $portal-primary: mat.define-palette(mat.$teal-palette, 700); $portal-accent: mat.define-palette(mat.$red-palette, 900); $portal-warn: mat.define-palette(mat.$deep-orange-palette, 500);

$portal-theme: mat.define-light-theme(( color: ( primary: $portal-primary, accent: $portal-accent, warn: $portal-warn, ), typography: mat.define-typography-config( $font-family: 'DroidKufi-Regular', ) ));

@include mat.all-component-themes($portal-theme);

//for dark theme $portal-primary-dark: mat.define-palette(mat.$green-palette, 900); $portal-accent-dark: mat.define-palette(mat.$orange-palette); $portal-warn-dark: mat.define-palette(mat.$yellow-palette);

$portal-dark-theme: mat.define-dark-theme(( color: ( primary: $portal-primary-dark, accent: $portal-accent-dark, warn: $portal-warn-dark,
), typography: mat.define-typography-config( $font-family: 'DroidKufi-Regular', ) ));

.drak-theme-mode{ @include mat.all-component-themes($portal-dark-theme); }