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