Let's create a few groups by following these steps:
- Hover over the root object in the central database area until you see the plus (+) button. This button allows us to add child properties and complex objects in JSON format.
- Click the plus button. You should see an inline editor for the property:
With the inline editor, we can build a basic tree hierarchy of chat groups or rooms.
- Create three groups, as shown in the following screenshot:
As we can see, we have a groups tree with three branches: room1, room2, and room3. We can also define the description properties so that we can display some user-friendly details on the Angular interface.
You can introduce more metadata for groups later, such as creation date, logo image, and many more.
- Click the Add button as soon as you are ready. Firebase will apply your changes and render the following tree hierarchy:
- As a practical experiment, update the data one more time. Add a name property to each room, as shown in the following screenshot:
This data is more than enough for us to implement the group list picker in our web interface. Now, let's move on and learn how to this with Angular and Material components.