As I mentioned for the previous applications, there are a few things that we will do at the beginning of every application build to get things ready. These are things like:

• Generating the application
• Installing extra packages (if necessary)
• Restructuring the generated application to our liking

Generate the Application

Make sure you have the latest Angular CLI installed:

npm install -g @angular/cli

Generate a new application with the following command:

ng new angularstart-chat --defaults --style=scss --inline-template --inline-style --skip-tests

Open the project in VS Code or your favourite editor

With the project created, we are going to make just a few modifications to get things going.

Install Packages

In the last application we built we started using Angular Material and we used one of the built-in themes. This time we are going a little more advanced and we will build our own custom theme.

We will add Angular Material and choose a Custom theme now, but we will configure the theme later in the project.

Add Angular Material by running the following command within your new project:

ng add @angular/material

You will be prompted to choose a theme — make sure to pick Custom this time.

You can select y to the prompt about typography, and you should also Include and enable animations.

Everything required for Angular Material will now have been set up automatically for you.

We are also going to install ngxtension so that we can make use of the connect function we discussed in the advanced state management module:

Install the Ngxtension library:

ng add ngxtension

NOTE: If the above install command does not work, try:

npm install ngxtension --legacy-peer-deps