Temp Angular for IMMSS

Step 1

 ng new directive-demo

cd directive-demo

Step 2:

Open app.component.ts file and puth the contents as below:

import { CommonModule } from '@angular/common';

import { Component } from '@angular/core';

import { NgFor, NgClass, NgIf } from '@angular/common';

@Component({

  selector: 'app-root',

  imports: [CommonModule,NgFor, NgIf, NgClass],

  templateUrl: './app.component.html',

  styleUrl: './app.component.css'

})

export class AppComponent {

  title = 'directive-demo';

  movies = [

    'Amaran',

    'Coolie',

    'Vikram',

    'Pushpa',

    'Animal'

  ]

}

---------------------------------------------------------------------------------------------------------------

Open app.component.html and put the contents as follows:

li<h1>

  ngFor Example

</h1>

<ul>

  <li *ngFor="let movie of movies">{{movie}}</li>

</ul>

<!-- index -->

<h3> index Example</h3>

<ul>

  <li *ngFor="let movie of movies; let i = index">

   {{i+1}}-{{movie}}</li>

</ul>

<!-- First and Last  -->

 <h3> First and Last Example</h3>

<ul>

  <li *ngFor="let movie of movies; let isFirst=first; let isLast=last">

  <strong *ngIf="isFirst">First:</strong>

  <strong *ngIf="isLast">Last:</strong>

    {{movie}}

  </li>

</ul>

<!-- Odd & Event  -->

<h3>

    ngFor ODD & even Example

</h3>

<ul>

  <li *ngFor="let movie of movies; let isEven= even; let isOdd=odd;"

      [ngClass]="{'even-item': isEven, 'odd-item': isOdd}"

  >

         {{movie}}

  </li>

</ul>

---------------------------------------------------------------------------------------------------------------

Open the file app.component.css and the make the contents as shown:

.even-item {

    background-color: rgb(139, 216, 139);

}

.odd-item {

    background-color: rgb(235, 238, 241);

}

---------------------------------------------------------------------------------------------------------------

ng serve to see the browser similar to as shown below

🚀 Getting Started with Angular Material (The Fun Way!)

So, you want to make your Angular app look cool and modern using Angular Material? You're in the right place! Follow these super easy steps, and let’s get that Material magic going! ✨

---

🛠️ Step 1: Install Node.js (If You Haven’t Already)

Before we dive into Angular, you need Node.js. Download and install it from here: 👉 Node.js Official Website

After installation, check if everything is set up properly:

ng -v    # Check Angular version
node -v  # Check Node.js version
npm -v   # Check NPM version

🎉 If you see version numbers, you’re good to go!

---

🌍 Step 2: Install Angular CLI Globally

Now, let’s get Angular CLI installed globally so we can use it anywhere.

npm install -g @angular/cli

Once done, confirm the installation:

ng version

If you see the Angular CLI version, you're golden! 🎊

---

🔧 Step 3: Fix Execution Policy Issues (Windows Only)

If you get errors about scripts being blocked, fix it with this command:

Get-ExecutionPolicy -List
Set-ExecutionPolicy Unrestricted -Scope CurrentUser

---

🏗️ Step 4: Create a New Angular Project

Let's create our Material magic project:

ng new matdemo

• When asked about CSS, choose CSS (or SCSS if you're feeling fancy!).
• When asked "Do you want server-side rendering?", just say No.

✅ Once done, open package.json and check everything looks good.

Now, let’s move into our project folder:

cd matdemo

---

🚀 Step 5: Serve the Angular App

Time to check if our app is running smoothly!

ng serve -o

This will launch your app in the browser at: 👉 http://localhost:4200/

Now, let’s open it inside Visual Studio Code:

• Copy http://localhost:4200/
• Open VS Code, right-click on the file explorer and choose "Split Right" for multitasking!

---

🎨 Step 6: Add Angular Material

Time to make things look cool! Run this command to add Angular Material:

ng add @angular/material

• Choose Y when it asks about Angular Material.
• Pick the default theme (or go crazy and choose another one!).
• Say Yes for Typography.
• Say Yes for Animations.

✅ Check package.json to make sure Material is installed. ✅ Also, check main.ts, app.config.ts, and app.component.ts for Material setup.

---

🏗️ Step 7: Add Material Components to Your App

Update app.component.ts

Add Material Slide Toggle Module:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatSlideToggleModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

Update app.component.html

Now, add some Material UI elements:

<mat-slide-toggle></mat-slide-toggle><br>
<input matInput placeholder="Enter Name" type="text" value="IMMSS"><br>
<button mat-button>Basic</button>
<button mat-raised-button>Raised</button>
<button mat-stroked-button>Stroked</button>

🚀 Boom! You’ve just added your first Angular Material components!

---

🔥 Step 8: Add Material Icons

Want some cool icons? Add MatIconModule inside app.component.ts:

import { MatIconModule } from '@angular/material/icon';

Now, use it in HTML:

<mat-icon>home</mat-icon>

---

🎯 Final Step: Restart Your Angular Server

If things don’t update, restart your Angular server:

ng serve -o

🎉 Check your browser – you should see your stunning Material UI!

---

🏆 Level Up: Explore More!

Want to add even more Material awesomeness? Check out: 👉 Material Angular Official Docs 👉 Awesome YouTube Tutorial

Happy Coding! 🚀🔥

------------------------------------------------------------------------------------------------------------------

You may face some Challenges! Don't hesitate to contact me 4 any breakups!👍