MEAN STACK LAB MODULE -2
1A)Angular application setup.
To set up Angular on your system, follow these steps:
### 1. **Install Node.js**
Angular requires Node.js and npm (Node Package Manager), which are included with Node.js installation.
- Download and install Node.js from the official website: [Node.js](https://nodejs.org/)
- Verify installation by running the following commands in your terminal:
‘ ``command prompt code:
node -v
npm -v
```
### 2. **Install Angular CLI**
The Angular CLI (Command Line Interface) is used to create, build, and manage Angular projects.
- To install Angular CLI globally, run the following command:
``` command prompt code:
npm install -g @angular/cli
### 3. **Create a New Angular Project**
Now, create a new Angular project using the Angular CLI:
- Navigate to the directory where you want to create the project:
```command prompt code:
ng new project-name
```
You will be prompted to configure the project. Choose the appropriate options like adding Angular routing and
selecting the style format (CSS, SCSS, etc.).
### 4. **Navigate to the Project Folder**
Move into the newly created Angular project folder:
``` command prompt code:
cd project-name
```
### 5. **Run the Application**
Start the development server by running:
``` command prompt code:
ng serve
```
- Open a browser and navigate to `http://localhost:4200/` to see your Angular app running.
1B) Create a new component called hello and render hello on the page
After Angular app setup
Run a command to generate new component
“”ng generate component component_name””
Then change the script of app.component_name.html
1c)Add a event to hello component template and when it is clicked it should change the name
App.component.ts
Code:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true, // Marking the component as standalone
template: `
<div class="hello-card" (click)="toggleUser()">
<h2>Hello, {{ currentUser }}!</h2>
</div>
`,
styles: [`
.hello-card {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
max-width: 300px;
margin: 50px auto;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
`]
})
export class AppComponent {
currentUser: string = 'User 1';
toggleUser() {
this.currentUser = this.currentUser === 'User 1' ? 'User 2' : 'User 1';
}
}
2A)create a login form with user name and password fields if the user enter the correct
details it should render a welcome otherwise invalid login using “ngif” in angular
code:
App.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms'; // Importing FormsModule for
ngModel binding
import { CommonModule } from '@angular/common'; // Importing CommonModule for
ngIf directive
@Component({
selector: 'app-root',
standalone: true, // Use standalone component
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
imports: [FormsModule, CommonModule], // Importing necessary modules
})
export class AppComponent {
username: string = '';
password: string = '';
isAuthenticated: boolean = false;
invalidCredentials: boolean = false;
correctUsername = 'user123';
correctPassword = 'pass123';
login() {
if (this.username === this.correctUsername && this.password ===
this.correctPassword) {
this.isAuthenticated = true;
this.invalidCredentials = false;
} else {
this.invalidCredentials = true;
this.isAuthenticated = false;
}
}
}
2B)use “ngfor” Create a courses array and rendering it in the template using ngFor directive in
a list format.
Code: (app.component.ts)
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
template: `
<h1>Fruit List</h1>
<ul>
<li *ngFor="let fruit of fruits" (click)="selectFruit(fruit)">
{{ fruit }}
</li>
</ul>
`,
imports: [CommonModule]
})
export class AppComponent {
fruits: string[] = ['Apple', 'Banana', 'Orange', 'Mango', 'Grapes'];
selectFruit(fruit: string) {
console.log(fruit); // Logs selected fruit to the console
}}
2C)display the correct option based on value passed to the “ngswitch” directive
Code(app.component.ts):
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
template: `
<div class="container">
<h1>Fruit List</h1>
<ul class="fruit-list">
<li *ngFor="let fruit of fruits" (click)="selectFruit(fruit)" class="fruit-item">
{{ fruit }}
</li>
</ul>
<h2>Selected Fruit Details:</h2>
<div class="fruit-details" [ngSwitch]="selectedFruit">
<p *ngSwitchCase="'Apple'">Apple is a sweet, edible fruit produced by an apple tree.</p>
<p *ngSwitchCase="'Banana'">Bananas are elongated, edible fruits produced by several kinds of large
herbaceous flowering plants.</p>
<p *ngSwitchCase="'Orange'">Oranges are juicy citrus fruits that are sweet and tangy.</p>
<p *ngSwitchCase="'Mango'">Mangoes are a stone fruit known for their sweetness and vibrant color.</p>
<p *ngSwitchCase="'Grapes'">Grapes are small, sweet fruits that grow in clusters on vines.</p>
<p *ngSwitchDefault>Select a fruit to see its details.</p>
</div>
</div>
`,
styles: [`
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
h1 {
text-align: center;
color: #333;
.fruit-list {
list-style-type: none;
padding: 0;
.fruit-item {
padding: 10px;
margin: 5px 0;
background-color: #e0f7fa;
border: 1px solid #b2ebf2;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
.fruit-item:hover {
background-color: #b2ebf2;
.fruit-details {
margin-top: 20px;
padding: 10px;
background-color: #fff3e0;
border: 1px solid #ffccbc;
border-radius: 4px;
h2 {
color: #555;
`],
imports: [CommonModule]
})
export class AppComponent {
fruits: string[] = ['Apple', 'Banana', 'Orange', 'Mango', 'Grapes'];
selectedFruit: string = '';
selectFruit(fruit: string) {
this.selectedFruit = fruit;
}}
2D)create custom structural directive called repeat which should repeat the element given a
number of times.
import { Component, Directive, Input, TemplateRef, ViewContainerRef } from
'@angular/core';
import { FormsModule } from '@angular/forms';
@Directive({
selector: '[repeat]',
standalone: true // Mark the directive as standalone
})
export class RepeatDirective {
@Input() set repeat(times: number) {
this.viewContainer.clear(); // Clear any existing views
for (let i = 0; i < times; i++) {
this.viewContainer.createEmbeddedView(this.templateRef); // Create the
element specified times
}
}
constructor(private templateRef: TemplateRef<any>, private viewContainer:
ViewContainerRef) {}
}
@Component({
selector: 'app-root',
template: `
<div>
<label for="repeatTimes">Enter number of repetitions: </label>
<input id="repeatTimes" type="number" [(ngModel)]="repeatCount" />
</div>
<div *repeat="repeatCount">
<p>This element is repeated {{ repeatCount }} times!</p>
</div>
`,
standalone: true,
imports: [RepeatDirective, FormsModule],
})
export class AppComponent {
repeatCount = 1; // Default value for repetitions
}
1D)progressively building poolcarz applications
first create a new .ts file in app directory
car.service.ts
code:
import { Injectable } from '@angular/core';
export interface Car {
id: number;
model: string;
year: number;
@Injectable({
providedIn: 'root'
})
export class CarService {
private cars: Car[] = [
{ id: 1, model: 'Toyota Camry', year: 2020 },
{ id: 2, model: 'Honda Accord', year: 2021 }
];
getCars(): Car[] {
return this.cars;
addCar(car: Car): void {
this.cars.push(car);
then create a car component
Code:
Ng generate component car
And modify the car.component.ts
code:
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { CarService, Car } from '../car.service';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-car',
standalone: true,
template: `
<div class="container">
<h2>PoolCarz Management</h2>
<form (submit)="addCar(); $event.preventDefault()">
<div class="input-group">
<input
[(ngModel)]="newCar.model"
[ngModelOptions]="{standalone: true}"
placeholder="Car Model"
required
/>
<input
[(ngModel)]="newCar.year"
type="number"
[ngModelOptions]="{standalone: true}"
placeholder="Year"
required
/>
<button type="submit">Add Car</button>
</div>
</form>
<ul class="car-list">
<li *ngFor="let car of cars" class="car-item">{{ car.model }} ({{ car.year }})</li>
</ul>
</div>
`,
styles: [`
.container {
max-width: 600px;
margin: auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
font-family: Arial, sans-serif;
h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.input-group {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
input {
flex: 1;
min-width: 200px; /* Minimum width for responsiveness */
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
transition: border-color 0.3s;
input:focus {
border-color: #007bff; /* Bootstrap primary color */
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
button {
padding: 10px 15px;
background-color: #007bff; /* Bootstrap primary color */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
button:hover {
background-color: #0056b3; /* Darker shade on hover */
.car-list {
list-style-type: none;
padding: 0;
margin-top: 20px;
.car-item {
padding: 10px;
border-bottom: 1px solid #eee;
transition: background-color 0.3s;
.car-item:hover {
background-color: #f1f1f1; /* Light gray background on hover */
}
@media (max-width: 600px) {
.input-group {
flex-direction: column;
input {
margin-right: 0;
margin-bottom: 10px;
`],
encapsulation: ViewEncapsulation.None,
imports: [FormsModule, CommonModule]
})
export class CarComponent implements OnInit {
cars: Car[] = [];
newCar: Car = { id: 0, model: '', year: new Date().getFullYear() };
constructor(private carService: CarService) {}
ngOnInit(): void {
this.cars = this.carService.getCars();
addCar(): void {
if (this.newCar.model && this.newCar.year) {
this.newCar.id = this.cars.length + 1; // Assign a simple ID
this.carService.addCar(this.newCar); // Add the new car to the service
this.cars = this.carService.getCars(); // Update the local cars array
this.newCar = { id: 0, model: '', year: new Date().getFullYear() }; // Reset the form
}}
Make sure the routing in
App.routing.ts
Code:
import { Routes } from '@angular/router';
import { CarComponent } from './car/car.component';
export const routes: Routes = [
{path: "", component: CarComponent}
];
3B)apply multiple css classes to the text using ng class directive
Code:
create a new component
ng generate component responsivetext
modify responsivetext.component.ts
code:
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
@Component({
selector: 'app-responsive-text',
standalone: true,
template: `
<div class="text-container" [ngClass]="textClasses">
This is responsive text with multiple classes.
</div>
<div class="button-container">
<button (click)="toggle('isLarge')">Toggle Large</button>
<button (click)="toggle('isHighlighted')">Toggle Highlight</button>
<button (click)="toggle('isBold')">Toggle Bold</button>
<button (click)="toggle('isItalic')">Toggle Italic</button>
<button (click)="toggle('isUnderlined')">Toggle Underline</button>
<button (click)="toggle('isRed')">Toggle Red</button>
<button (click)="toggle('isGreen')">Toggle Green</button>
<button (click)="toggle('isBlue')">Toggle Blue</button>
</div>
`,
styles: [`
.text-container {
font-size: 16px;
padding: 10px;
margin: 20px;
transition: all 0.3s ease;
.large {
font-size: 24px;
color: blue;
.highlight {
background-color: yellow;
.bold {
font-weight: bold;
.italic {
font-style: italic;
.underline {
text-decoration: underline;
.red {
color: red;
.green {
color: green;
.blue {
color: blue;
.button-container {
margin: 20px;
align-items: center;
display:flex;
button {
margin-right: 5px;
padding: 10px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
button:hover {
background-color: #0056b3;
`],
imports: [CommonModule]
})
export class ResponsiveTextComponent {
// Initialize style toggles
isLarge = false;
isHighlighted = false;
isBold = false;
isItalic = false;
isUnderlined = false;
isRed = false;
isGreen = false;
isBlue = false;
// Mapping class names to toggle variables
get textClasses() {
return {
large: this.isLarge,
highlight: this.isHighlighted,
bold: this.isBold,
italic: this.isItalic,
underline: this.isUnderlined,
red: this.isRed,
green: this.isGreen,
blue: this.isBlue
};
// Create a union type for the toggleable properties
private toggleableStyles = [
'isLarge',
'isHighlighted',
'isBold',
'isItalic',
'isUnderlined',
'isRed',
'isGreen',
'isBlue'
] as const;
// Toggle the state of a given style
toggle(style: typeof this.toggleableStyles[number]) {
this[style] = !this[style];
app.routing.ts
code:
import { Routes } from '@angular/router';
import { ResponsiveTextComponent } from './responsivetext/responsivetext.component';
export const routes: Routes = [
{path: "", component: ResponsiveTextComponent}
];
3a)apply multiple css properties to a paragraph in a component using “ngstyle”
create a new component
ng generate component para
modify para.component.ts
code:
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-para',
standalone: true,
imports: [CommonModule],
templateUrl: './para.component.html',
styleUrls: ['./para.component.css']
})
export class ParagraphStylerComponent {
// Updated CSS styles defined as an object
paragraphStyles = {
color: '#555', // Dark text color for contrast
fontSize: '18px',
lineHeight: '1.6', // Improved line height for readability
textAlign: 'justify',
padding: '20px', // Increased padding
border: '1px solid #ddd', // Light border color
borderRadius: '20px', // More rounded corners
backgroundColor: '#f9f9f9',
margin: '10px',
boxShadow: '0 4px 10px rgba(0,0,0,0.1)', // Deeper shadow for depth
transition: 'all 0.3s ease' // Smooth transitions for hover effects
};
paragraphContent = "This is a responsive paragraph styled using Angular's ngStyle. You can easily change the
styles to fit your design.";
App.routing.ts
import { Routes } from '@angular/router';
import { ParagraphStylerComponent } from './para/para.component';
export const routes: Routes = [
{path: "", component: ParagraphStylerComponent}
];
3c)Custom attribute directive
Create a .ts file in app directory
Show-message.directive.ts
Code:
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appShowMessage]',
standalone: true
})
export class ShowMessageDirective {
@Input('appShowMessage') message!: string;
private messageElement?: HTMLElement;
private buttonElement?: HTMLButtonElement;
private isRed: boolean = false; // Track color state
constructor(private el: ElementRef) {}
@HostListener('click') onClick() {
// Clear any previous content
if (!this.messageElement) {
this.el.nativeElement.innerHTML = '';
// Create and append the message element
this.messageElement = document.createElement('p');
this.messageElement.textContent = this.message;
this.messageElement.style.margin = '10px 0';
this.el.nativeElement.appendChild(this.messageElement);
// Create and append the button element
this.buttonElement = document.createElement('button');
this.buttonElement.textContent = 'Toggle Text Color';
this.buttonElement.style.marginTop = '10px';
this.buttonElement.style.cursor = 'pointer';
this.el.nativeElement.appendChild(this.buttonElement);
// Add click event to the button
this.buttonElement.addEventListener('click', (event) => {
event.stopPropagation(); // Prevent triggering the directive's click
this.toggleColor(); // Call toggle function
});
private toggleColor() {
// Toggle the color of the message
this.isRed = !this.isRed;
this.messageElement!.style.color = this.isRed ? '#ff0000' : ''; // Change to red or default
Then generate a new component
Ng generate component message
Then modify message.component.ts
import { Component } from '@angular/core';
import { ShowMessageDirective } from '../show-message.directive'; // Adjust the path as necessary
@Component({
selector: 'app-message-display',
standalone: true,
template: `
<div style="padding: 20px; text-align: center;" appShowMessage="Hello, World!">
<button style="padding: 10px; cursor: pointer;">
Click me to show message
</button>
</div>
`,
styles: [],
imports: [ShowMessageDirective] // Include the directive here
})
export class MessageDisplayComponent {}
must set a routing
import { Routes } from '@angular/router';
import { MessageDisplayComponent } from './message/message.component';
export const routes: Routes = [
{path: "", component: MessageDisplayComponent}
];
