Posts

Pluralsight Course - Styling Applications with Angular Material

Styling Applications with Angular Material

I’m happy to announce that my Pluralsight course Styling Applications with Angular Material is now updated to angular v10, thanks for your patience!

I’m also excited to announce that this course will be a part of the learning angular path, hence the title change!

Some of the major topics that we will cover include:

  • Concepts of material design
  • Setting up the development environment
  • Using the components and services
  • Data tables

This course will teach you everything from setting up a streamlined development environment
to building a production ready, great looking responsive website leveraging Material Design.

Hope you guys enjoy the course, stay curious and happy learning!

material_design

Angular 2 Material Replacing Bootstrap

In this weeks screencast we fully replace bootstrap with material components for angular 2. Material2 just announced their alpha 2 release, adding a bunch of components, perfect timing for live coding screencast, code at https://github.com/ajtowf/ng2_play. The ng2play repo has also been updated to the latest angular2 version which at the time of writing is beta 15, see the changelog for details.

During the coding session we integrate the following components into our app:

Make sure to check out the screencast below, enjoy!

Screencast

Documentation / Demo App

There isn’t any official documentation for material2 yet, but there is a demo app in their github repo, here are the steps to get it up and running on your local dev machine:

  1. Make sure you have `node` installed with a version at _least_ 4.2.3.
  2. Run `npm install -g angular-cli` to install the Angular CLI.
  3. Clone the angular/material2 repo
  4. From the root of the project, run `npm install`, then run `npm run typings` to install typescript definitions.
  5. To build the project, run `ng build`.
  6. To bring up a local server, run `ng serve`. This will automatically watch for changes and rebuild.

After the changes rebuild, the browser currently needs to be manually refreshed. Now you can visit the prompted URL in your browser to explore the demo app.

Resouces on Angular Material

To learn more about material deisgn and components for angular, make sure to check out my pluralsight course Angular Material Fundamentals.

Until next time, have a nice day folks and keep on coding!

pluralsight_angular_material_fundamentals

Angular Material Fundamentals Course at Pluralsight

Angular Material Fundamentals course released at pluralsight, make sure to check it out here, https://www.pluralsight.com/courses/angular-material-fundamentals, course trailer below:

Hope you guys enjoy the course and learn a lot, and as always, have a nice day!