Meet Angular Material Introduction to Angular Material and design systems

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.


*Enrollment provides full access to this course (and updates) for life.

Or Signup for Unlimited PRO Access
👈 App Overview
Schematics 👉

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

Q&A Chat