Angular Ekleme Yaptıktan Modalin Textleri Boşaltmak

Angular Ekleme Yaptıktan Sonra Modalin Metinlerini Boşaltmak

Angular, tek sayfalık uygulamalar oluşturmak için kullanılan bir JavaScript çerçevesidir. Angular uygulamaları, bileşenlerden oluşur. Bileşenler, HTML, CSS ve JavaScript kodundan oluşan yeniden kullanılabilir kod parçalarıdır.

Modal, bir web sayfasının üzerinde açılan bir penceredir. Modallar genellikle kullanıcıdan bilgi almak veya bir işlem yapmak için kullanılır.

Angular’da modal oluşturmak için ng-bootstrap kütüphanesini kullanabilirsiniz. ng-bootstrap, Angular için bir dizi bileşen ve hizmet içeren bir kütüphanedir.

ng-bootstrap kütüphanesini kullanarak bir modal oluşturmak için aşağıdaki adımları izleyebilirsiniz:

  1. ng-bootstrap kütüphanesini Angular projenize yükleyin.
  2. app.module.ts dosyasına NgBootstrapModule modülünü ekleyin.
  3. app.component.html dosyasına modal bileşenini ekleyin.
  4. app.component.ts dosyasına modal bileşenini kullanmak için gerekli kodu ekleyin.

Modal bileşenini kullanarak bir modal oluşturduktan sonra, modalin metinlerini boşaltmak için aşağıdaki adımları izleyebilirsiniz:

  1. Modal bileşeninin @ViewChild dekoratörünü kullanarak modal bileşenine erişin.
  2. Modal bileşeninin nativeElement özelliğini kullanarak modal bileşeninin DOM öğesine erişin.
  3. Modal bileşeninin DOM öğesinin innerHTML özelliğini kullanarak modal bileşeninin metinlerini boşaltın.

Aşağıdaki kod örneği, modal bileşeninin metinlerini boşaltmak için nasıl kullanılabileceğini göstermektedir:

“`typescript
import { Component, ViewChild, ElementRef } from ‘@angular/core’;
import { NgbModal } from ‘@ng-bootstrap/ng-bootstrap’;

@Component({
selector: ‘app-modal’,
templateUrl: ‘./modal.component.html’,
styleUrls: [‘./modal.component.css’]
})
export class ModalComponent {
@ViewChild(‘modal’) modal: ElementRef;

constructor(private modalService: NgbModal) { }

openModal() {
this.modalService.open(this.modal);
}

closeModal() {
this.modalService.dismissAll();
}

clearModalText() {
this.modal.nativeElement.innerHTML = ”;
}
}
“`

Yukarıdaki kod örneğinde, clearModalText() metodu modal bileşeninin metinlerini boşaltmak için kullanılmaktadır.

Faydalı Siteler ve Dosyalar

Yayımlandı

kategorisi