In Angular Material what does setting up global typography styles mean?

Issue

When using ng add @angular/material to add Material support to an Angular project there is a prompt Set up global Angular Material typography styles?

What does this even mean? The documentation states the prompt appears, but does not describe what it actually means.

Solution

By default, Angular Material doesn’t apply global CSS. Meaning that a standard element (eg. <h1>) will not have Angular materials’ styles applied to it.
So, when configured this way, in order to apply Angular material styles to a broad section of your HTML, you can use the mat-typography class

<h1>This header doesn't have Angular Material styling</h1>
<section class=”mat-typography”>
<h1>This header does have Angular Material styling</h1>
</section>

If you set up global typography styles; then the first <h1> will already be styled.

Answered By – LFLFM

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.