Angular architectures with NGRX

These settings are globally saved in the angular.json configuration file so they will be also applied when you'll run generators commands to create your components using the CLI.

NodeJS v.18.19.1 - better Node 20.x - is required. I really suggest to use NVM , Node Version Manager (Windows or Mac , or similar tools, to install several NodeJS versions on your machine

Here you can see a short video with the installation process explained so far:

no audio

Now go to the project folder, `ngrx-demo`, and open it on your favorite editor.

First time using Angular?

You can get more info about the creation of Angular projects in our free Angular Basics book

# Our goal

AppComponent (whose selector is app-root) is the root component of our application and is mounted once when the application starts.

In its HTML template we'll create:

a "navigation bar": some buttons we'll use to change the browser url when users click on them
a router-outlet component: a special Angular component that acts as a placeholder. This is the place where our Routed components will be loaded

First time using Angular Router?

You can read more about this topic in the chapter "Angular Router" of our book Angular Basics

The diagram below shows how we'll organize our application:

# Create Routed Components in v.19

SWITCH LAYOUT

We want to create an application with 3 routes.

Open terminal in the root of the project and run the following commands:

terminal

or using (short) alias:

terminal

Here how the project folder should look like:

Watch the video to see the procedure

The installation video was recorded using Angular v.18, when the --export-default feature was still not available.

no audio

export default in v.19

The --export-default option is available from Angular v.19 and it's very useful to simplify the process to lazy load the routes, as explained in the next lesson.

This flag exports your component using the default option.

Without the option the generated component will look like the following one:

features/counter/counter.component.ts

With the --export-default option it will add the default flag:

features/counter/counter.component.ts

See the procedure in Angular v.18

Expand to get more details about the previous procedure

SWITCH LAYOUT

We want to create an application with 3 routes.

I suggest to open the integrated terminal of your editor in the root of the project and run the following commands:

terminal

or using alias:

terminal

Watch the video to see the procedure:

no audio

# Export Routed Components as default

We have just created 3 components, but we still need to add router rules to associate each component with a specific URL.

But before defining these rules:

open the 3 components we just created

Export them as default.

This simplifies the definition of the router rules that we will implement in the next step. Read the Router & Lazy Loading lesson of the Angular Basics (free) book to get more details

So, open the components and add default keyword before class:

Export CounterComponent as default:

features/counter/counter.component.ts

Export ShopComponent as default:

features/shop/shop.component.ts

Export CartComponent as default:

features/cart/cart.component.ts

Why we exported as default?

We said that exporting all the route components as default would simplify the definition of router rules.

In fact this approach allowed us to define the routes using this syntax:

app.routes.ts

Without the default keyword the rule definition would have looked like this:

app.routes.ts

Why?

The syntax () => import('./[path]/my.component') uses a TypeScript feature known as Dynamic Imports that indicates what file we would like to load when a specific scenario happens.

This TypeScript file (aka as module) may contains more than just one class, although it's not a good practice. Let's imagine the file shop.component.ts contains this:

shop.component.ts

Using the following syntax we have to specify that:

when the file/module is loaded...
...we want to load a specific angular component that is available in that file

app.routes.ts

Exporting the component with default has eliminated the need for this since the component is now the "default choice" when the file is loaded.

app.routes.ts

Easy and clean!

# Router Rules

The router rules need to be defined now:

shop, cart and counter rules allow us to define the primary routes and which component should be loaded when the URL matches one of these paths
the '' path is the default route. So users are redirected to /shop when they open the site first time

Rules

app.routes.ts

Add 3 buttons in AppComponent to create a navigation menu using the routerLink directive. Each time a button is clicked, the user will be redirected to the specified url.

The router-outlet is the placeholder where the routed component will be loaded in according to the router rule and the browser url:

src/app.component.ts

Result:

Since the NavBar layout will become complicated soon, maybe it might be better to create an external component for it.

First create a new component using the CLI using the full syntax:

terminal

--flat tells the generator to avoid the creation of a specific folder for that component. Since we set inline templates and styles, the generator creates only one file for a component so we don't need a folder to contain it.

Anyway, from now on we will often use aliases which are more concise and convenient:

terminal

Now the component will hold the 3 buttons used to navigate and nothing more:

core/components/nav-bar.component.ts

We can now remove the buttons from AppComponent and create an instance of the NavBar Component using the app-nav-bar selector. We also need to add the NavBarComponent to the imports properties:

app.component.ts

# Tailwind

We love Tailwind and we'll use it to style the whole application.

To know more about styling in Angular and Tailwind read the Angular Basics Book

So let's install it:

src/app.component.ts

Or, if you prefer to use the exact versions we used in this book, you can specify them.

src/app.component.ts

Tailwind Configuration File

Run this command to generate a tailwind.config.ts file in the root of your project:

src/app.component.ts

Open the tailwind.config.ts and add the content path:

tailwind.config.ts

Open styles.css and make the Tailwind utilities globally available:

styles.css

The whole procedure is also described in the official Tailwind documentation

Problems with Visual Studio Code?

Read the article How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code

# Daisy UI

We can say that DaisyUI it's just like Bootstrap... but for Tailwind. It offers several classes to create nice buttons, cards, carousel and so on...

terminal

Add Daisy to Tailwind configuration plugins property:

tailwind.config.js

In the next video you can see the whole Tailwind and Daisy UI installation process.

no audio

# Force "Dark" Mode

DaisyUI utility classes automatically support themes based on your Operative System (OS) setting. This means that the application may have a different look depending on your OS theme.

However we'll only use and support "dark" mode so we can force our application to use it by adding data-theme="dark" to the html element of index.html file:

src/index.html

# package.json

By the time you read this book, some versions of the libraries used may have changed so here you can find the complete package.json in case you want to check and install the same versions used in this book:

package.json

We can now slightly improve the layout of the Navigation bar by adding some Daisy UI classes:

app/core/components/nav-bar.component.ts

routerLinkActive directive applies the CSS class when the URL in the browser matches the URL specified in the routerLink directive

# Max Screen Content

Currently, the routed component loaded in the router-outlet is taking all the available horizontal space, which is not so nice. We don't want the page to take up all the available space, especially on large and wide screens.

The Tailwind class max-w-screen-xl sets the maximum width of the container to a specific value (e.g., xl for extra-large screens, it means a max-width of 1280px). It ensures the content does not exceed this width, providing a consistent layout across different screen sizes.

So we wrap the <router-outlet> with max-w-screen-xl mx-6 xl:mx-auto:

SWITCH LAYOUT

src/app.component.ts

Latest versions of Angular also supports self-closing tags:

src/app.component.ts

max-w-screen-xl: the content width never exceeds xl size, that in Tailwind means 1280px. Read the Tailwind responsive guide to know what are the values of sm, md, xl and so on...
my-6: apply vertical margin. In tailwind 4 units means 1rem. So a value of 6 means 1.5rem
xl:mx-auto: this represents an inline media query. Above xl size, (1280px), the horizontal margins will be set to auto. It means the content will be centered.

To see how it works, add a bg-red-500 class to the wrapper:

src/app.component.ts

You can remove the bg-red-500 class since it was only for testing

AppComponent full source code:

src/app.component.ts

# Bonus: Simulate Color Theme with Chrome Dev Tools

Since DaisyUI enables the support for dark and light themes, it can be useful to simulate the OS theme change and we can do quickly using Chrome Dev Tools:

Open Chrome Dev Tools
Press CMD/CTRL + SHIFT + P
Search for "show rendering"
Emulate prefers-color-scheme

# Quiz Time

How can you create a component with Angular CLI?

ng create component
ng add component
ng generate component

# Interactive Demo & Source Code

# Download the Source Code

If you are stuck or something isn't working in your local project you can download the source code directly from StackBlitz:

Click the "Cloud" icon
Download and extract the project from the zip file
Open in your favorite editor and run npm install to install all the dependencies

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register

Send your feedback

Create the Project

38 snippets

85 mins

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Requirements

If this is your first time using Angular, we highly recommend reading our book Angular Basics first.

# Create An Angular v.18/19 project

So let's start creating a new Angular application.

Run this command on your terminal to generate a new Angular project:

terminal

Select:

Stylesheet format: CSS
PreRender (SSR): NO

Parameters:

-t: inline template
-s: inline styles
-S: skip tests

These settings are globally saved in the angular.json configuration file so they will be also applied when you'll run generators commands to create your components using the CLI.

NodeJS v.18.19.1 - better Node 20.x - is required. I really suggest to use NVM , Node Version Manager (Windows or Mac , or similar tools, to install several NodeJS versions on your machine

Here you can see a short video with the installation process explained so far:

no audio

Now go to the project folder, `ngrx-demo`, and open it on your favorite editor.

First time using Angular?

You can get more info about the creation of Angular projects in our free Angular Basics book

# Our goal

AppComponent (whose selector is app-root) is the root component of our application and is mounted once when the application starts.

In its HTML template we'll create:

a "navigation bar": some buttons we'll use to change the browser url when users click on them
a router-outlet component: a special Angular component that acts as a placeholder. This is the place where our Routed components will be loaded

First time using Angular Router?

You can read more about this topic in the chapter "Angular Router" of our book Angular Basics

The diagram below shows how we'll organize our application:

# Create Routed Components in v.19

SWITCH LAYOUT

We want to create an application with 3 routes.

Open terminal in the root of the project and run the following commands:

terminal

or using (short) alias:

terminal

Here how the project folder should look like:

Watch the video to see the procedure

The installation video was recorded using Angular v.18, when the --export-default feature was still not available.

no audio

export default in v.19

The --export-default option is available from Angular v.19 and it's very useful to simplify the process to lazy load the routes, as explained in the next lesson.

This flag exports your component using the default option.

Without the option the generated component will look like the following one:

features/counter/counter.component.ts

With the --export-default option it will add the default flag:

features/counter/counter.component.ts

See the procedure in Angular v.18

Expand to get more details about the previous procedure

SWITCH LAYOUT

We want to create an application with 3 routes.

I suggest to open the integrated terminal of your editor in the root of the project and run the following commands:

terminal

or using alias:

terminal

Watch the video to see the procedure:

no audio

# Export Routed Components as default

We have just created 3 components, but we still need to add router rules to associate each component with a specific URL.

But before defining these rules:

open the 3 components we just created

Export them as default.

This simplifies the definition of the router rules that we will implement in the next step. Read the Router & Lazy Loading lesson of the Angular Basics (free) book to get more details

So, open the components and add default keyword before class:

Export CounterComponent as default:

features/counter/counter.component.ts

Export ShopComponent as default:

features/shop/shop.component.ts

Export CartComponent as default:

features/cart/cart.component.ts

Why we exported as default?

We said that exporting all the route components as default would simplify the definition of router rules.

In fact this approach allowed us to define the routes using this syntax:

app.routes.ts

Without the default keyword the rule definition would have looked like this:

app.routes.ts

Why?

The syntax () => import('./[path]/my.component') uses a TypeScript feature known as Dynamic Imports that indicates what file we would like to load when a specific scenario happens.

This TypeScript file (aka as module) may contains more than just one class, although it's not a good practice. Let's imagine the file shop.component.ts contains this:

shop.component.ts

Using the following syntax we have to specify that:

when the file/module is loaded...
...we want to load a specific angular component that is available in that file

app.routes.ts

Exporting the component with default has eliminated the need for this since the component is now the "default choice" when the file is loaded.

app.routes.ts

Easy and clean!

# Router Rules

The router rules need to be defined now:

shop, cart and counter rules allow us to define the primary routes and which component should be loaded when the URL matches one of these paths
the '' path is the default route. So users are redirected to /shop when they open the site first time

Rules

app.routes.ts

Add 3 buttons in AppComponent to create a navigation menu using the routerLink directive. Each time a button is clicked, the user will be redirected to the specified url.

The router-outlet is the placeholder where the routed component will be loaded in according to the router rule and the browser url:

src/app.component.ts

Result:

Since the NavBar layout will become complicated soon, maybe it might be better to create an external component for it.

First create a new component using the CLI using the full syntax:

terminal

Anyway, from now on we will often use aliases which are more concise and convenient:

terminal

Now the component will hold the 3 buttons used to navigate and nothing more:

core/components/nav-bar.component.ts

app.component.ts

# Tailwind

We love Tailwind and we'll use it to style the whole application.

To know more about styling in Angular and Tailwind read the Angular Basics Book

So let's install it:

src/app.component.ts

Or, if you prefer to use the exact versions we used in this book, you can specify them.

src/app.component.ts

Tailwind Configuration File

Run this command to generate a tailwind.config.ts file in the root of your project:

src/app.component.ts

Open the tailwind.config.ts and add the content path:

tailwind.config.ts

Open styles.css and make the Tailwind utilities globally available:

styles.css

The whole procedure is also described in the official Tailwind documentation

Problems with Visual Studio Code?

Read the article How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code

# Daisy UI

We can say that DaisyUI it's just like Bootstrap... but for Tailwind. It offers several classes to create nice buttons, cards, carousel and so on...

terminal

Add Daisy to Tailwind configuration plugins property:

tailwind.config.js

In the next video you can see the whole Tailwind and Daisy UI installation process.

no audio

# Force "Dark" Mode

DaisyUI utility classes automatically support themes based on your Operative System (OS) setting. This means that the application may have a different look depending on your OS theme.

However we'll only use and support "dark" mode so we can force our application to use it by adding data-theme="dark" to the html element of index.html file:

src/index.html

# package.json

package.json

We can now slightly improve the layout of the Navigation bar by adding some Daisy UI classes:

app/core/components/nav-bar.component.ts

routerLinkActive directive applies the CSS class when the URL in the browser matches the URL specified in the routerLink directive

# Max Screen Content

So we wrap the <router-outlet> with max-w-screen-xl mx-6 xl:mx-auto:

SWITCH LAYOUT

src/app.component.ts

Latest versions of Angular also supports self-closing tags:

src/app.component.ts

max-w-screen-xl: the content width never exceeds xl size, that in Tailwind means 1280px. Read the Tailwind responsive guide to know what are the values of sm, md, xl and so on...
my-6: apply vertical margin. In tailwind 4 units means 1rem. So a value of 6 means 1.5rem
xl:mx-auto: this represents an inline media query. Above xl size, (1280px), the horizontal margins will be set to auto. It means the content will be centered.

To see how it works, add a bg-red-500 class to the wrapper:

src/app.component.ts

You can remove the bg-red-500 class since it was only for testing

AppComponent full source code:

src/app.component.ts

# Bonus: Simulate Color Theme with Chrome Dev Tools

Since DaisyUI enables the support for dark and light themes, it can be useful to simulate the OS theme change and we can do quickly using Chrome Dev Tools:

Open Chrome Dev Tools
Press CMD/CTRL + SHIFT + P
Search for "show rendering"
Emulate prefers-color-scheme

# Quiz Time

How can you create a component with Angular CLI?

ng create component
ng add component
ng generate component

# Interactive Demo & Source Code

# Download the Source Code

If you are stuck or something isn't working in your local project you can download the source code directly from StackBlitz:

Click the "Cloud" icon
Download and extract the project from the zip file
Open in your favorite editor and run npm install to install all the dependencies

Angular architectures with NGRX

Send your feedback

Angular architectures with NGRX

# Requirements

# Create An Angular v.18/19 project

Now go to the project folder, ngrx-demo, and open it on your favorite editor.

# Our goal

# Create Routed Components in v.19

See the procedure in Angular v.18

# Export Routed Components as default

Why?

# Router Rules

Rules

Navigation Bar

Result:

# Navigation Bar Component

# Tailwind

Tailwind Configuration File

# Daisy UI

# Force "Dark" Mode

# package.json

# Improve NavBar Component Layout

# Max Screen Content

# Bonus: Simulate Color Theme with Chrome Dev Tools

# Quiz Time

How can you create a component with Angular CLI?

# Interactive Demo & Source Code

# Download the Source Code

Send your feedback

# Requirements

# Create An Angular v.18/19 project

Now go to the project folder, ngrx-demo, and open it on your favorite editor.

# Our goal

# Create Routed Components in v.19

See the procedure in Angular v.18

# Export Routed Components as default

Why?

# Router Rules

Rules

Navigation Bar

Result:

# Navigation Bar Component

# Tailwind

Tailwind Configuration File

# Daisy UI

# Force "Dark" Mode

# package.json

# Improve NavBar Component Layout

# Max Screen Content

# Bonus: Simulate Color Theme with Chrome Dev Tools

# Quiz Time

How can you create a component with Angular CLI?

# Interactive Demo & Source Code

# Download the Source Code

Now go to the project folder, `ngrx-demo`, and open it on your favorite editor.

Now go to the project folder, `ngrx-demo`, and open it on your favorite editor.