Style Angular components — scoped component styles, Tailwind utility classes with class bindings, and Angular Material for ready-made accessible components.
Why: styles declared on a component apply ONLY inside that component — Angular scopes them automatically, so .card here never collides with .card anywhere else. Nothing to install, no naming conventions.
import { Component } from '@angular/core'
@Component({
selector: 'app-card',
template: `
<section class="card">
<h3>Only this component's .card is affected</h3>
</section>
`,
// Angular scopes these rules to this component automatically
styles: `
.card {
border: 1px solid #ddd;
border-radius: 12px;
padding: 16px;
}
`,
})
export class Card {}Why: utility classes live right on the element — class holds what every state shares, and [class] adds one computed set or the other, so conditional styles become an ordinary ternary. Note: the Tailwind course covers the utilities themselves; this is the Angular side of the workflow.
import { Component, input } from '@angular/core'
@Component({
selector: 'app-alert',
template: `
<!-- class is static; [class] adds computed classes on top -->
<div
class="rounded-lg border p-4 text-sm"
[class]="
kind() === 'error'
? 'border-red-300 bg-red-50 text-red-800'
: 'border-blue-300 bg-blue-50 text-blue-800'
"
>
{{ kind() === 'error' ? 'Something went wrong.' : 'Heads up!' }}
</div>
`,
})
export class Alert {
kind = input.required<'info' | 'error'>()
}Why: Angular Material is the official component library — accessible buttons, dialogs, tables, and form fields that follow Material Design and integrate with Angular's forms and routing. One command sets up the theme and fonts. Note: install with (ng add @angular/material) in the terminal.
import { Component, inject } from '@angular/core'
import { MatButtonModule } from '@angular/material/button'
import { MatDialog, MatDialogModule } from '@angular/material/dialog'
import { ConfirmDialog } from './confirm-dialog'
@Component({
selector: 'app-delete-account',
imports: [MatButtonModule, MatDialogModule],
template: `
<button matButton="filled" (click)="confirm()">Delete account</button>
`,
})
export class DeleteAccount {
private dialog = inject(MatDialog)
confirm() {
// Opens ConfirmDialog (another component) in an accessible modal
this.dialog.open(ConfirmDialog)
}
}