Angular Event Management Application - Source
Code
[Link]
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './[Link]';
import { EventManagementComponent } from './event-management/[Link]';
@NgModule({
declarations: [
AppComponent,
EventManagementComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
[Link]
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent {
title = 'Event Organizer';
}
[Link]
<div>
<h1>{{ title }}</h1>
<app-event-management></app-event-management>
</div>
[Link]
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 20px;
}
[Link]
import { Component } from '@angular/core';
interface Guest {
name: string;
email: string;
rsvp: string;
}
interface Feedback {
email: string;
comments: string;
}
@Component({
selector: 'app-event-management',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class EventManagementComponent {
event = { name: '', date: '', time: '', venue: '' };
guests: Guest[] = [];
newGuest: Guest = { name: '', email: '', rsvp: 'Maybe' };
feedbacks: Feedback[] = [];
addGuest() {
if ([Link] && [Link]) {
[Link]({ ...[Link] });
[Link] = { name: '', email: '', rsvp: 'Maybe' };
}
}
updateRSVP(email: string, status: string) {
const guest = [Link](g => [Link] === email);
if (guest) {
[Link] = status;
}
}
addFeedback(email: string, comments: string) {
if (email && comments) {
[Link]({ email, comments });
}
}
}
[Link]
<!-- Create Event -->
<h2>Create Event</h2>
<input [(ngModel)]="[Link]" placeholder="Event Name" />
<input [(ngModel)]="[Link]" type="date" />
<input [(ngModel)]="[Link]" type="time" />
<input [(ngModel)]="[Link]" placeholder="Venue" />
<!-- Add Guest -->
<h2>Add Guest</h2>
<input [(ngModel)]="[Link]" placeholder="Guest Name" />
<input [(ngModel)]="[Link]" placeholder="Guest Email" />
<button (click)="addGuest()">Add Guest</button>
<!-- Event Details -->
<h2>Event Details</h2>
<p><b>Name:</b> {{ [Link] }}</p>
<p><b>Date:</b> {{ [Link] }}</p>
<p><b>Time:</b> {{ [Link] }}</p>
<p><b>Venue:</b> {{ [Link] }}</p>
<!-- Guest List -->
<h2>Guest List</h2>
<ul>
<li *ngFor="let guest of guests">
{{ [Link] }} ({{ [Link] }})
<select [(ngModel)]="[Link]" (change)="updateRSVP([Link], [Link])">
<option>Attending</option>
<option>Not Attending</option>
<option>Maybe</option>
</select>
</li>
</ul>
<!-- Feedback -->
<h2>Feedback</h2>
<form #feedbackForm="ngForm" (ngSubmit)="addFeedback([Link], [Link]); fe
<input name="feedbackEmail" #feedbackEmail="ngModel" ngModel placeholder="Guest Email" required />
<textarea name="feedbackComments" #feedbackComments="ngModel" ngModel placeholder="Comments" requir
<button type="submit">Submit Feedback</button>
</form>
<!-- Show Feedback -->
<div *ngIf="[Link] > 0">
<h3>Feedback Received</h3>
<ul>
<li *ngFor="let fb of feedbacks">
<b>{{ [Link] }}</b>: {{ [Link] }}
</li>
</ul>
</div>
[Link]
h2 {
margin-top: 20px;
color: #34495e;
}
input, textarea, select, button {
margin: 5px;
padding: 8px;
font-size: 14px;
}
button {
cursor: pointer;
background: #3498db;
color: white;
border: none;
border-radius: 4px;
}
button:hover {
background: #2980b9;
}