//html
<div class="deletion-settings-container">
<form>
<div class="form-group">
<label for="deletionTime">Deletion Time:</label>
<input type="number" id="deletionTime" [(ngModel)]="deletionTime.value" name="deletionTime" required>
</div>
<div class="form-group">
<label for="timeUnit">Time Unit:</label>
<select id="timeUnit" [(ngModel)]="deletionTime.unit" name="timeUnit">
<option value="Minutes">Minutes</option>
<option value="Hours">Hours</option>
<option value="Days">Days</option>
<option value="Weeks">Weeks</option>
<option value="Months">Months</option>
<option value="Years">Years</option>
</select>
</div>
<button type="button" (click)="saveDeletionTime()">Save</button>
</form>
</div>
//ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { UserService } from '../Services/userprofile.service';
import { DeletionSettings } from '../shared/deletionsettings';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
@Component({
selector: 'app-deletion-settings',
standalone: true,
imports: [CommonModule, FormsModule],
templateUrl: './deletion-settings.component.html',
styleUrl: './deletion-settings.component.css'
})
export class DeletionSettingsComponent {
deletionTime = {
value: 0,
unit: 'Minutes'
};
constructor(private userService: UserService, private snackBar: MatSnackBar, private router: Router, private location: Location) {}
saveDeletionTime() {
if (this.deletionTime.value < 0) {
console.error('Deletion time value must be non-negative');
this.snackBar.open('Deletion time value must be non-negative', 'Close', { duration: 5000 });
return;
}
const settings: DeletionSettings = {
deletionTimeValue: this.deletionTime.value,
deletionTimeUnit: this.deletionTime.unit
};
this.userService.updateDeletionTime(settings).subscribe({
next: (response) => {
console.log('Deletion time updated successfully', response);
// You can also add some user feedback here like a success message
this.snackBar.open('Deletion time updated successfully', 'Close', { duration: 5000 });
this.router.navigateByUrl(`/users`);
},
error: (error) => {
console.error('Error updating deletion time', error);
// You can add error handling logic here
this.snackBar.open('Failed to update deletion time. Please try again', 'Close', { duration: 5000 });
}
});
}
goBack(): void {
this.location.back();
}
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter