عرض رسالة تأكيد الحفظ في Angular

To show either text or an image saying “Data Saved” for 2 seconds when the user clicks the “save” button, you can use JavaScript. Here’s how you can do it:

1. First, add an element to your HTML where you want to display the message or image:

htmlCopy code
<div id="feedback">div>

2. Then, add some CSS to style the feedback message or image:

cssCopy code
#feedback {
  display: none; /* Hide the feedback initially */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

3. Next, use the following JavaScript code to show the feedback message or image for 2 seconds when the “save” button is clicked:

javascriptCopy code
document.getElementById('saveButton').addEventListener('click', function() {
  document.getElementById('feedback').textContent = 'Data Saved'; // Change to an image tag if you want to display an image
  document.getElementById('feedback').style.display = 'block'; // Show the feedback

  setTimeout(function() {
    document.getElementById('feedback').style.display = 'none'; // Hide the feedback after 2 seconds
  }, 2000);
});

Make sure to replace 'saveButton' with the actual ID of your “save” button.

This code will display the “Data Saved” message or image for 2 seconds when the “save” button is clicked.

لإظهار رسالة أو صورة تقول “تم حفظ البيانات” لمدة 2 ثانية عندما ينقر المستخدم على زر “حفظ”، يمكنك استخدام Angular و CSS مع JavaScript. في Angular، يمكنك استخدام خدمة لإدارة حالة العرض والإخفاء، ومن ثم استدعاء هذه الخدمة عند الضغط على الزر. إليك كيفية القيام بذلك:

1. أولاً، قم بإنشاء خدمة Angular لإدارة حالة العرض والإخفاء. يمكنك تسميتها FeedbackService، واجعلها تقوم بتخزين حالة العرض (مثل isShown) وتقديم طريقة لتغيير حالة العرض:

typescriptCopy code
// feedback.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class FeedbackService {
  isShown: boolean = false;

  showFeedback() {
    this.isShown = true;
    setTimeout(() => {
      this.isShown = false;
    }, 2000);
  }
}

2. ثم، في مكون Angular الخاص بالزر “حفظ”، قم بحقن FeedbackService واستخدمه لتغيير حالة العرض عند الضغط على الزر:

typescriptCopy code
// save-button.component.ts
import { Component } from '@angular/core';
import { FeedbackService } from './feedback.service';

@Component({
  selector: 'app-save-button',
  template: 'حفظ',
})
export class SaveButtonComponent {
  constructor(private feedbackService: FeedbackService) {}

  save() {
    // Save the data here

    // Show the feedback
    this.feedbackService.showFeedback();
  }
}

3. في القالب الخاص بمكون الزر “حفظ”، استخدم توجيه *ngIf لعرض الرسالة أو الصورة إذا كانت حالة العرض صحيحة (true):

htmlCopy code

<div *ngIf="feedbackService.isShown" class="feedback">تم حفظ البياناتdiv>

4. أخيرًا، استخدم CSS لتنسيق الرسالة أو الصورة كما تريد:

cssCopy code
/* styles.css */
.feedback {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

بهذا، عندما ينقر المستخدم على زر “حفظ”، ستظهر رسالة “تم حفظ البيانات” لمدة 2 ثانية ثم تختفي.