🎨 Meet Angular Material

Introduction to Angular Material and design systems

We’re ready to start building the app! It’s ideal to kick off any new project with a solid foundation for design. An app that looks good from the day one will keep you happy and motivated throughout the development process.

Steps

Step 1 - Install Angular Material

command line 
ng add @angular/material

Step 2 - Customize your Theme Colors (Optional)

Example of a custom color pallette.

file_type_scss2 styles.scss 
$custom-orange: (
    50: #fff3e0,
    100: #ffe0b2,
    200: #ffcc80,
    300: #ffb74d,
    400: #ffa726,
    500: #ff9800,
    600: #fb8c00,
    700: #f57c00,
    800: #ef6c00,
    900: #e65100,
    A100: #ffd180,
    A200: #ffab40,
    A400: #ff9100,
    A700: #ff6d00,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: white,
        900: white,
        A100: $black-87-opacity,
        A200: $black-87-opacity,
        A400: $black-87-opacity,
        A700: white,
    )
);
$firestarter-demo-primary: mat-palette($custom-orange);

Bonus Video

Questions? Let's chat

Open Discord