Material & Angular not working for me

JavaScript
1

Hello All,

I’m working through a tutorial to learn Angular 17 and I’m stuck getting Material components to work with the Angular application. Put together a script to display a button, basic copy/past but the buttons aren’t reflecting the output that appears on material.angular.io site.
my buttons appear as black but the example the buttons appear blue… I included the links below

What am I missing.

app.component.html

<section>
  <div class="example-label">Flat</div>
  <div class="example-button-row">
    <button mat-raised-button>Basic</button>
    <button mat-flat-button disabled>Disabled</button>
    <a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, MatButtonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'AppComponent';  
}

app.component.css

.example-button-row .mat-mdc-button-base {
  margin: 8px 8px 8px 0;
}

sample of package.json - as you can see angular material is installed

  "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.10",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/material": "^17.3.10",

Link to my script and as you can see its black:
https://9000-idx-learning-1716289302225.cluster-fnjdffmttjhy2qqdugh3yehhs2.cloudworkstations.dev/?monospaceUid=72457

this link is from material.angular.io site and example:
https://stackblitz.com/run?file=package.json

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.