Scribd
Upload
22 views

Set Up An Angular 8 Project With Material and NGXS - Reader Mode

Uploaded by

Urias Santos
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

Set Up An Angular 8 Project With Material and NGXS - Reader Mode

Uploaded by

Urias Santos
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Customize appearance

Set Up an Angular 8 Project with Material and


NGXS

A Guide to creating an Angular project with


Angular material ( ex layout) and NGXS for
state management

Photo by Math on Unsplash

In this article, I will show you how to set up a full Angular project.

1. Create a project with Angular CLI


2. Install Angular Material
3. Install State Management with NGXS

For more content like this, check out https://betterfullstack.com

Create a project with Angular CLI

For those who are new to Angular, the Angular CLI is a command-line
interface tool that you use to initialize, develop, scaffold, and maintain
Angular applications.

For those who want to upgrade the angular-cli to the current version 8,
run the following commands:

upgrade angular-cli commands

Personally, I do not run npm cache verify on my computer.


However, there are some computers that need to run that command.

This command means that it veri es the contents of the cache folder,
garbage collecting any unneeded data, and verifying the integrity of
the cache index and all cached data.

Then, we check ng --version to see the latest version on your


computer.

Finally, run ng new project-name to create a project.

ng new project-name

If you pick scss for your style and your company has a proxy, then
you need to run one more command

install node-sass in case of proxy

DONE. Now we can install Angular Material.

Install Angular Material

This section will divide it into 3 parts:

1. Install Angular Material


2. Show the right way to import Material to an Angular project
3. BONUS by adding the Angular ex layout

Install Angular Material

To install Angular Material is quite easy. From this guide you just need
to run:

ng add @angular/material

Then, they will ask you some questions during installation:

questions during install angular material

In this example, I do not pick any theme, I selected custom option, and
install both HammerJS and Browser animations.

The right way to import Material to an Angular


project

The idea here is as a front-end developer, I do not want to import


Angular material modules in every single Angular module that I am
working on.

So, I will create one shared Angular module and put all Angular
Material modules that I need into it. Then I import it into my app as
needed.

create material module

Then, we will put all the material modules that we need into that
material module.

MaterialModule

DONE. Now we will use this module to import to Angular modules


when we use angular material to develop the UI.

BONUS by adding angular ex layout

Angular Flex Layout provides a sophisticated layout API using Flexbox


CSS and mediaQuery.

This module provides Angular developers with component layout


features using a custom Layout API, mediaQuery observables, and
injected DOM exbox-2016 CSS stylings.

To install:

npm i -s @angular/flex-layout

After installation, you just import it into your shared module and use
it. To me, I put it into material module because I will use this one
together with material components.

Now, you can use the Angular Layout attributes in your HTML tags for
ex layout.

Check out all of the available options for using Angular Layout in your
application.

Install State Management

There are some options to pick for state management such as NGRX,
NGXS, or using Rxjs to manage data in your application.

In this section, I will use NGXS as state management because this


state management is very easy to set up and use.

First, run the command:

npm i -s @ngxs/store @ngxs/logger-plugin


@ngxs/storage-plugin

This command will install the store and 2 plugins into your angular
application.

@ngxs/logger-plugin is a simple console log plugin to logs actions as


they are processed.

@ngxs/storage-plugin will back your stores with localStorage,


sessionStorage, or any other mechanism you wish.

Second, create the store module to con gure it for your application:

create store module

Finally, update the store.module.ts le:

store.module.ts

Now you can create your state and action. Then, put the state le
inside the NgxsModule.

Summary

In this article, I set up a project using Angular 8, Angular Material with


Angular ex layout for fast development, and NGXS for state
management..

I hope you found this article useful! You can reach me at my website.
Feel free to leave any questions in the comments below. I’ll be glad to
help out!

You might also like