File Upload Interface - Copy this Angular, Css Component to your project
User Profile Can u update code in ionic and list of meetings should store in server using api ..import { Component, OnInit } from '@angular/core'; import { MeetingService } from './meetings.service'; import { Meeting } from './meetings.model'; @Component({ selector: 'app meetings', templateUrl: './meetings.page.html', styleUrls: ['./meetings.page.scss'], }) export class MeetingsPage implements OnInit { meetingType: string = 'daily'; isCreatingMeeting: boolean = false; isListingMeetings: boolean = false; meetingDate: string = ''; fromDate: string = ''; toDate: string = ''; meetingAudience?: string = ''; meetingDescription ?: string = ''; editingMeeting: Meeting | null = null; meetings: Meeting[] = []; constructor(private meetingService: MeetingService ) { } ngOnInit() { this.meetingService.getMeetings().subscribe((meetings: Meeting[] | undefined) => { if (meetings) { this.meetings = meetings; // this.filteredMeetings = meetings; } }); } toggleCreateMeeting() { this.isCreatingMeeting = !this.isCreatingMeeting; this.isListingMeetings = false; if (this.isCreatingMeeting && !this.editingMeeting) { this.resetMeetingFields(); } } toggleListOfMeetings() { this.isListingMeetings = !this.isListingMeetings; this.isCreatingMeeting = false; } onMeetingTypeChange() { this.resetMeetingFields(); } resetMeetingFields() { this.meetingDate = ''; this.fromDate = ''; this.toDate = ''; this.meetingAudience = ''; this.meetingDescription = ''; this.editingMeeting = null; } createMeeting() { if ( (this.meetingType === 'daily' || this.meetingType === 'adhoc') && (!this.meetingDate || !this.meetingAudience || !this.meetingDescription) ) { alert('Please fill in all fields.'); return; } if ( this.meetingType === 'weekly' && (!this.fromDate || !this.toDate || !this.meetingAudience || !this.meetingDescription) ) { alert('Please fill in all fields.'); return; } if (this.editingMeeting) { this.editingMeeting.date = this.meetingType === 'weekly' ? ${this.fromDate} to ${this.toDate} : this.meetingDate; this.editingMeeting.audience = this.meetingAudience; this.editingMeeting.description = this.meetingDescription; this.editingMeeting = null; } else { this.meetings.push({ title: this.meetingType + ' Meeting', date: this.meetingType === 'weekly' ? ${this.fromDate} to ${this.toDate} : this.meetingDate, audience: this.meetingAudience, description: this.meetingDescription, meetingType: this.meetingType, }); } this.saveMeetingsToLocalStorage(); this.toggleCreateMeeting(); } editMeeting(meeting: Meeting) { this.meetingDate = meeting.date; this.meetingAudience = meeting.audience; this.meetingDescription = meeting.description; this.editingMeeting = meeting; this.toggleCreateMeeting(); } deleteMeeting(meeting: Meeting) { this.meetings = this.meetings.filter(m => m !== meeting); this.saveMeetingsToLocalStorage(); alert('Meeting deleted successfully.'); } saveMeetingsToLocalStorage() { localStorage.setItem('meetings', JSON.stringify(this.meetings)); } } based on tis update variable names also
