Before we start making further changes to app.component.ts, let's switch the component to use inline templates and inline styles, so we don't have to switch back and forth between file for a relatively simple component.

1. Update app.component.ts to use an inline template
2. Remove app.component.html and app.component.css

src/app/app.component.ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  template: `
    <div style="text-align:center">
      <h1>
      LocalCast Weather
      </h1>
      <div>Your city, your forecast, right now!</div>
      <h2>Current Weather</h2>
      <app-current-weather></app-current-weather>
    </div>
  `
})
export class AppComponent {}

Let's start improving our app by implementing an app-wide toolbar:

3. Observe the h1 tag in app.component.ts:

src/app/app.component.ts
<h1>
  LocalCast Weather
</h1>

4. Update the h1 tag with mat-toolbar:

src/app/app.component.ts    
<mat-toolbar>
  <span>LocalCast Weather</span>
</mat-toolbar>

5. Observe the result; you should see a toolbar, as illustrated:

6. Update mat-toolbar with a more attention-grabbing color:

src/app/app.component.ts    
<mat-toolbar color="primary">

For a more native feeling, it is important that the toolbar touches the edges of the browser. This works well both on large- and small-screen formats. In addition, when you place clickable elements such as a hamburger menu or a help button on the far-left or far-right side of the toolbar, you'll avoid the potential that the user will click on empty space. This is why Material buttons actually have a larger hit-area than visually represented. This makes a big difference in crafting frustration-free user experiences:

src/styles.css
body {
  margin: 0;
}

This won't be applicable to this app, however, if you're building a dense application; you'll note that your content will go all the way to the edges of the application, which is not a desirable outcome. Consider wrapping your content area in a div and apply the appropriate margins using css, as shown:

src/styles.css
.content-margin {
  margin-left: 8px;
  margin-right: 8px;
}

In the next screenshot, you can see the edge-to-edge toolbar with the primary color applied to it: