How to get mat-toolbar to respond to changes in Angular?

Question

I have been trying to make a basic header for the homepage, for my webapp for some time now, I want to use mat-toolbar, but it will not set the way that I want it to. My code is as follows.

 .maintooly { background-color: rgba(0,0,0,.7) }

 <mat-toolbar color="primary" class="main-tooly"> <span id="product-name"> HOMEPAGE </span> <div class="vertical-line title-line"> | </div> </mat-toolbar>

This is a watered down example but essentially I am trying to add a header to the to top of the page so it would look like this:

But instead it is looking like this:

Summmary: cannot get items in header to display side by side and cannot get the color of header to change or really do anything.

What exactly am I doing wrong here and how can I make this work?

Answer 1

解决方案是将导入工具放入 app.module.ts 文件中。