CODEWITHSUNDEEP
cssangularangular-material
Monopole Magnet
Monopole Magnet

Reputation: 435

Why is the expected Material button style not applied immediately when my Angular application loads, only later?

In an Angular app I'm building, I have a toolbar component with three links. The first leads back to the app, the others to different components. Both link elements have class="mat-button" applied, because I wanted to use existing styling.

The first component contains a button with attribute mat-raised-button.

The second component just contains text.

When the application initially loads, the toolbar looks ugly.

When clicking the second link, the second component is loaded, but the toolbar is still ugly.

When clicking the first link, the first component is loaded and the toolbar looks much better.

If I then click Home, I go back to the app page and the toolbar still looks good.

What I see in the toolbar is that the link elements have very little style applied initially:

Once I've clicked the first link, they have much more style applied:

But I thought if I load a module in AppModule, all of the module is loaded, including any available styles.

How can I make it so that the toolbar is pretty also initially? I could just use something other than mat-button, but I'm genuinely curious why this behaviour manifests.

StackBlitz with relevant code: https://stackblitz.com/edit/angular-wwlrtv

Upvotes: 0

Views: 1974

Answers (2)

sr9yar
sr9yar

Reputation: 5310

I've just had it with a new Angular 11 installation. Everything is by the book, default values, been close to copy-pasting elements from the material docs so far. Suddenly I realized the mat-toolbar (MatToolbarModule) has no styles and appears like a white space on the page:

enter image description here

After the first click on any button, the styles would load and stay until the next page reload. I had to go back and check the set up and I found that the MatCheckboxModule was not imported. There was no compilation errors/warnings.

Not imported module would break the styles that belong to other modules. All modules must be imported.

After importing the Checkbox module the styling went to normal.

enter image description here

Upvotes: 0

Schrader
Schrader

Reputation: 490

I changed the toolbar from 

<mat-toolbar>
  <a routerLink="" routerLinkActive="active" class="mat-button">Home</a>
  <a routerLink="path1" routerLinkActive="active" class="mat-button">Link 1 - Style is applied</a>
  <a routerLink="path2" routerLinkActive="active" class="mat-button">Link 2 - Nothing happens</a>
</mat-toolbar>

to

<mat-toolbar>
  <a routerLink="" routerLinkActive="active" mat-button>Home</a>
  <a routerLink="path1" routerLinkActive="active" mat-button>Link 1 - Style is applied</a>
  <a routerLink="path2" routerLinkActive="active" mat-button>Link 2 - Nothing happens</a>
</mat-toolbar>

and this fixed the problem.

Upvotes: 1

Related Questions