DemoThe goal of this lesson is to take our Angular Material Theming and add navigational elements. The two for this lesson will include Angular Material Tree and Angular Material Expansion PanelIf you are well versed in Firebase and are just wondering how to get this tree to work with Firestore, you might want to jump to Tree

Lesson Steps

1. Project Setup
2. Firestore
3. Router Updates
4. Component Updates

Project Setup

Create Firebase Project

Angular Firebase has an amazing guide for this Beginners Guide to Firebase, so you could check that out as well.

You will need a Google Account

Please navigate to Firebase Console here you can create a new project with any name that you would like. Once inside of your new project please create a firestore database, under the Database tab.When prompted select locked mode.

GitHub Lesson 10 clone

For our starter template we will use our previes lesson repo, make sure you are in a directory you would like to place the repo locally and begin work.In your terminal, clone the repo to a new folder

Remove the old origin

You can then add your own git repo if you would like, or just track changes locally. Add remote

Add firebase

If you have not yet downloaded firebase CLI please install npm install -g firebase-tools.

After install

Now we will initialize this project

Make sure to select Firestore, and accept all other defaults

You will then need to add firebase to your project, again please checkout the link from above how to do this, of follow the video.

Firestore

Firestore Service Creation

If you don't have the Angular CLI npm install -g @angular/cli.

Using the Angular CLI we will start by creating a service.

This service will allow us to connect to Firebase Firestore.

Firestore Database Setup

We want to build this structure inside of Firestore

In Firestore we will setup this basic structure. Remember every collection must have a document. You can find more in the Firestore Docs Overview

Add Angular Firebase Service

This service was somthing that was created by Jeff in Advanced Firestore Usage Guide with Angular

Code

Update Firstore Service

Router Updates

The following routes are setup in order of which they will lazy load and be traversed to display the books path.

App Router

Need to update the main router to reference booksapp-routing.module.ts

Book Top Level Router

In our updated setup for our book router we need to lazy load the book list (for all of our books), as well as the book detail (for a single book).books-routing.modules.ts

Book Detail Router

Remember this is where we added the named outlet in the last lesson book-drawer. This component is where we will focus on loading our new tree.

Component Updates

Now that we have all the plumbing set we can add a new component to our book-drawer component.

Create book-list

We need to first be able to select a book before navigating to the book detail. For this we will create a book-list module.

Expansion Panel for book-list

Populating the expansion panel

Use the firestore service to populate the Observables for each book.

Create book-tree

I will break down this entire comopnent in further detail below, for now here is the code.

Reference book-tree inside book-drawer

We can now update book-drawer.book-drawer.component.html

Please make sure to also import BookTreeModule in book-drawer.module.ts.

Tree

Angular Material Tree

Breaking down the dynamic Tree

There are two key directives that drive the dynamic tree dataSource and treeControl.

• dataSource: Provides a stream containing the latest data array to render. Influenced by the tree's stream of view window (what dataNodes are currently on screen). Data source can be an observable of data array, or a data array to render.
• treeControl: Controls layout and functionality of the visual tree.

book-tree.comopnent.html

dataSource

In our example we assign dataSource to a new object from class DynamicDataSource. This class is passed off the necessary dependency injected classes that we will need from our BookTreeComponent.

DynamicDataSource

The DynamicDataSource's main job is to get initial data for the setup of the tree, control the flow of any additional data, and react when the tree is toggled.The data type that we are using in our tree is defined by class DynamicFlatNode, this class holds the data that we use throughout our tree as an array. Maybe better put our Tree is made up of an Array of DynamicFlatNode.

You can see in the first line of DynamicDataSource that we create a new BehaviorSubject for the array. This makes essentially an empty array for the tree's dataSource.

For our example we set the initial data for this by subscribing to our bookId and getting the corresponding book's chapters. You will notice that we create a DynamicFlatNode Object and add that to the array nodes. We then assign DynamicDataSource's data property the array that we have created.