FrontEnd_Angular_Material_CSS-Grid_FlexLayout.md

Angular Material & Flexbox

Table of Contents

• Installation
• Modules
• Flexbox
• CSS Grid
• Icons
  • External SVG sets
• Online Resources

Installation

• Install Angular Material in an Angular project:
  • ng add @angular/material
• Install Angular Flex Layout
  • ng add @angular/flex-layout

Modules

• Import required Modules in a given component:
  • import { BrowserAnimationModule } from '@angular/platform-browser/animations'
  • import { FlexLayoutModule } from '@angular/flex-layout'
  • import { FormsModule } from '@angular/forms'
• Create a separate module to contain all Material related modules
  • ng g m shared/material

Flexbox

• Container div
  • display: flex
  • flex-direction
    • column / row
  • flex-wrap
    • wrap
  • justify-content
    • space-around / flex-start
• HTML Attributes
  • fxLayout="row"
  • fxLayoutAlign="start center"
  • fxLayoutAlign="space-between stretch"
  • On small screen sets flex-direction to column
    • fxLayout.xs="column"

CSS Grid

Icons

• Bootstrap Icons
  • use content of element inside svg element for adding inline content
• Google Fonts Icons
  • Find an icon and use its name in the following format <mat-icon>ICON_NAME</mat-icon>
• Icons8
  • Click on icon, Embed HTML, Base64, use img element

External SVG sets

https://material.angular.io/components/icon/overview#svg-icons

• In order to use external icons in the website:
• Copy SVG file containing SVG set in a folder e.g. ./src/assets/
• add MatIconRegistry module into component constructor
• add DomSanitizer module into component constructor
• iconRegistry.addSvgIconSet(sanitizer.bypassSecurityTrustResourceUrl('assets/file.svg')

Online resources

• Official Documentation: https://material.angular.io/
• Flexbox Layout Demo: https://tburleson-layouts-demos.firebaseapp.com/#/docs
• CSS Tricks Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• CSS Tricks CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/
• ClipPath generator:
  • https://bennettfeely.com/clippy/
  • https://css-tricks.com/almanac/properties/c/clip-path/

material.module.ts

import { NgModule } from '@angular/core';

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core'
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatListModule } from '@angular/material/list';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTreeModule } from '@angular/material/tree';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatBadgeModule } from '@angular/material/badge';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatRippleModule } from '@angular/material/core';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';


@NgModule({
  declarations: [],
  exports: [
    MatAutocompleteModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatCardModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatListModule,
    MatStepperModule,
    MatTabsModule,
    MatTreeModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatBadgeModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatRippleModule,
    MatBottomSheetModule,
    MatDialogModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatPaginatorModule,
    MatSortModule,
    MatTableModule
  ]
})
export class MaterialModule { }