🎨 Angular Material Typography: Make Your App Look Fancy!
What is Typography? 🤔
Typography is just a fancy way of saying, “Let’s make text look cool!” It’s all about making words readable, stylish, and visually appealing. Angular Material uses Material Design typography rules to keep things neat and consistent.
👣 Step 1: Start a New Angular Project
Open your terminal (or pretend you’re hacking into a mainframe 💻) and type:
ng new my-ang-type --style=scss --defaults
cd my-ang-type
Boom! You just created a fresh Angular project. 🎉
📦 Step 2: Install Angular Material
We need Angular Material to get those pro-level fonts. Run:
ng add @angular/material
Think of this as adding a fashionable wardrobe for your text. 😎
📝 Step 3: Edit app.component.html
Delete everything inside src/app.component.html. Let’s give it a fresh new look:
<h1>Angular Material Typography</h1> <br><br>
<h2>Jackdaws love my big sphinx of quartz.</h2><br><br>
<h3>The quick brown fox jumps over the lazy dog</h3><br><br>
<h4>The quick brown fox jumps over the lazy dog</h4><br><br>
<h5>The quick brown fox jumps over the lazy dog</h5><br><br>
<router-outlet />
Why these sentences? Because they contain every letter in the English alphabet! 🧐
🔎 Step 4: Pick a Fancy Font
Go to Google Fonts and grab something stylish like:
✔ Roboto (default)
✔ Poppins (for extra elegance ✨)
✔ Coiny (for a fun, playful look 😆)
✔ Karla Tamil Upright (because why not?)
🎨 Step 5: Update styles.css
Now, let’s dress up our app by changing the default font in src/styles.css:
html, body { height: 100%; }
body { margin: 0; font-family: 'Poppins', sans-serif; }
Want a different style? Just swap 'Poppins' with another font name.
🚀 Step 6: Run Your App
Time to check out your Typography masterpiece! Run:
ng serve
Go to http://localhost:4200 and admire your stylish text! ✨
💡 Bonus: Showcasing All HTML5 Tags
Want a cool HTML5 reference page? Ask ChatGPT to:
"Create a sample HTML file to showcase all tags in HTML5"
You may get as below:
Copy the generated HTML file, and paste in to app.component.html file [keeping only body contents] now you have a super reference page for future projects! 🚀
🎉 And That’s It for Basics!
Congratulations! You just leveled up your typography game in Angular Material. Now, your app won’t just function well—it’ll look amazing too! 🏆
Happy Coding! 😃🚀
And Here have fun further!!!
Here’s a sample app.component.html file that showcases all major Angular Material components in Angular 19. It includes buttons, cards, inputs, tables, dialogs, and more, so you can see everything in action! 🚀
📝 Modify the contents as shown below in the respective files and See The SUPER MAGIC?!:
app.component.html with the code below
📄 app.component.html (Showcasing All Material Components)
<div class="container">
<h1>🌟 Angular Material Components Showcase 🌟</h1>
<!-- Buttons -->
<h2>Buttons</h2>
<button mat-button>Basic Button</button>
<button mat-raised-button color="primary">Raised Button</button>
<button mat-stroked-button color="accent">Stroked Button</button>
<button mat-fab color="warn"><mat-icon>favorite</mat-icon></button>
<!-- Icons -->
<h2>Icons</h2>
<mat-icon>home</mat-icon>
<mat-icon>menu</mat-icon>
<mat-icon>settings</mat-icon>
<!-- Input Fields -->
<h2>Form Fields</h2>
<mat-form-field appearance="fill">
<mat-label>Full Name</mat-label>
<input matInput placeholder="Enter your name">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Email</mat-label>
<input matInput type="email" placeholder="Enter your email">
</mat-form-field>
<mat-form-field>
<mat-label>Select an option</mat-label>
<mat-select>
<mat-option value="1">Option 1</mat-option>
<mat-option value="2">Option 2</mat-option>
<mat-option value="3">Option 3</mat-option>
</mat-select>
</mat-form-field>
<!-- Cards -->
<h2>Cards</h2>
<mat-card>
<mat-card-header>
<mat-card-title>Material Card</mat-card-title>
<mat-card-subtitle>Subtitle goes here</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
This is an example of an Angular Material card.
</mat-card-content>
<mat-card-actions>
<button mat-button color="primary">Action</button>
</mat-card-actions>
</mat-card>
<!-- Table -->
<h2>Tables</h2>
<table mat-table [dataSource]="[{name: 'Alice', age: 25}, {name: 'Bob', age: 30}]" class="mat-elevation-z8">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{element.name}}</td>
</ng-container>
<ng-container matColumnDef="age">
<th mat-header-cell *matHeaderCellDef>Age</th>
<td mat-cell *matCellDef="let element">{{element.age}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['name', 'age']"></tr>
<tr mat-row *matRowDef="let row; columns: ['name', 'age'];"></tr>
</table>
<!-- Dialog -->
<h2>Dialog</h2>
<button mat-raised-button color="primary" (click)="openDialog()">Open Dialog</button>
<!-- Snackbar -->
<h2>Snackbar</h2>
<button mat-raised-button color="accent" (click)="openSnackBar()">Show Snackbar</button>
<!-- Toggle & Slider -->
<h2>Toggle & Slider</h2>
<mat-slide-toggle>Toggle Me!</mat-slide-toggle>
<mat-slider min="0" max="100" step="10" value="50"></mat-slider>
<!-- Tabs -->
<h2>Tabs</h2>
<mat-tab-group>
<mat-tab label="Tab 1">Content for Tab 1</mat-tab>
<mat-tab label="Tab 2">Content for Tab 2</mat-tab>
</mat-tab-group>
</div>
📄 app.component.ts (Handles Dialog & Snackbar)
Add this inside app.component.ts to handle the dialog and snackbar functionality.
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public dialog: MatDialog, private snackBar: MatSnackBar) {}
openDialog() {
this.dialog.open(DialogContent);
}
openSnackBar() {
this.snackBar.open('Hello! This is a Snackbar!', 'Close', { duration: 3000 });
}
}
@Component({
selector: 'dialog-content',
template: `<h1 mat-dialog-title>Dialog</h1>
<div mat-dialog-content>This is a sample dialog!</div>
<div mat-dialog-actions><button mat-button mat-dialog-close>Close</button></div>`
})
export class DialogContent {}
📄 app.module.ts (Register Material Components)
Make sure to import Angular Material modules in app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent, DialogContent } from './app.component';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatCardModule } from '@angular/material/card';
import { MatSelectModule } from '@angular/material/select';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSliderModule } from '@angular/material/slider';
import { MatTabsModule } from '@angular/material/tabs';
@NgModule({
declarations: [AppComponent, DialogContent],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatIconModule,
MatFormFieldModule,
MatInputModule,
MatCardModule,
MatSelectModule,
MatDialogModule,
MatSnackBarModule,
MatTableModule,
MatSlideToggleModule,
MatSliderModule,
MatTabsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
🎯 Features Showcased in This App:
✅ Buttons (Basic, Raised, Fab)
✅ Icons (Material Icons)
✅ Form Fields (Inputs, Select)
✅ Cards (For content display)
✅ Tables (For structured data)
✅ Dialogs (Popup modals)
✅ Snackbar (Notification messages)
✅ Sliders & Toggles (Interactive controls)
✅ Tabs (For navigation)
🚀 Run the App!
After setting up all the files, run:
ng serve
Now, open http://localhost:4200/ in your browser, and you will see all the Angular Material components in action! 🎉
This gives you a complete showcase of Angular Material components in Angular 19. Hope this helps! Let me know if you need any modifications. 🚀🔥
No comments:
Post a Comment