Angular7 - Malzemeler / CDK-Sanal Kaydırma

Bu, Angular 7'ye eklenen ve Virtual Scrolling adlı yeni özelliklerden biridir. Bu özellik CDK'ya (Bileşen Geliştirme Kiti) eklenir. Sanal kaydırma, görünür alan öğelerini kullanıcıya gösterir, kullanıcı kaydırdıkça sonraki liste görüntülenir. Bu, tam liste tek seferde yüklenmediğinden ve yalnızca ekrandaki görünürlüğe göre yüklendiğinden daha hızlı deneyim sağlar.

Neden Sanal Kaydırma Modülüne ihtiyacımız var?

Tüm verilerin birlikte yüklenmesinin performans sorunlarına neden olabileceği büyük bir listeye sahip bir kullanıcı arayüzünüz olduğunu düşünün. Angular 7 Virtual Scrolling'in yeni özelliği, kullanıcı tarafından görülebilen öğeleri yüklemeyle ilgilenir. Kullanıcı ekranı kaydırdıkça, kullanıcının görebileceği bir sonraki etki alanı öğeleri listesi görüntülenir. Bu, daha hızlı deneyim sağlar ve kaydırma da çok pürüzsüzdür.

Projemize bağımlılığı ekleyelim -

npm install @angular/cdk –save

Sanal kaydırma modülü için bağımlılığı kurmayı bitirdik.

Projemizde sanal kaydırma modülünü nasıl kullanabileceğimizi daha iyi anlamak için bir örnek üzerinde çalışacağız.

Önce sanal kaydırma modülünü ekleyeceğiz. app.module.ts aşağıdaki gibi -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

App.module.ts'de ScrollDispatchModule'u içe aktardık ve aynısı yukarıdaki kodda gösterildiği gibi içe aktarım dizisine eklendi.

Sonraki adım, ekranda görüntülenecek verileri elde etmektir. Son bölümde oluşturduğumuz hizmeti kullanmaya devam edeceğiz.

Verileri url'den alacağız, https://jsonplaceholder.typicode.com/photosYaklaşık 5000 görüntü için veriye sahip. Verileri buradan alıp sanal kaydırma modülünü kullanarak kullanıcıya göstereceğiz.

URL'deki detaylar, https://jsonplaceholder.typicode.com/photos aşağıdaki gibidir -

Görüntü url'si ve küçük resim url'si olan json verileridir. Küçük resim url'sini kullanıcılara göstereceğiz.

Verileri alacak hizmet aşağıdadır -

myservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "https://jsonplaceholder.typicode.com/photos";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

App.component.ts'den hizmeti şu şekilde arayacağız -

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public albumdetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.albumdetails = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.albumdetails);
      });
   }
}

Şimdi değişken albumdetails api'deki tüm verilere sahiptir ve toplam sayı 5000'dir.

Artık verilerimiz görüntülenmeye hazır olduğuna göre, verileri görüntülemek için app.component.html içinde çalışalım.

Etiketi eklememiz gerekiyor, <cdk-virtual-scroll-viewport></cdk-virtual-scroll-viewport>sanal kaydırma modülü ile çalışmak için. Verilerin görüntülenmesini istediğimiz .html dosyasına etiketin eklenmesi gerekir.

İşte çalışması <cdk-virtual-scroll-viewport> app.component.html'de.

<h3>Angular 7 - Virtual Scrolling</h3>
<cdk-virtual-scroll-viewport [itemSize] = "20">
   <table>
      <thead>
         <tr>
            <td>ID</td>
            <td>ThumbNail</td>
         </tr>
      </thead>
      <tbody>
         <tr *cdkVirtualFor = "let album of albumdetails">
            <td>{{album.id}}</td>
            <td>
               <img src = "{{album.thumbnailUrl}}" width = "100" height = "100"/>
            </td>
         </tr>
      </tbody>
   </table>
</cdk-virtual-scroll-viewport>

Kullanıcıya id ve küçük resim url'sini ekranda görüntülüyoruz. Şimdiye kadar çoğunlukla * ngFor kullandık, ancak içeride<cdk-virtual-scroll-viewport>, veriler arasında döngü yapmak için * cdkVirtualFor kullanmalıyız.

App.component.html içinde doldurulan albumdetails değişkeninde dolaşıyoruz. Sanal kaydırma modülünün yüksekliğine bağlı olarak öğe sayısını görüntüleyecek [itemSize] = "20" sanal etiketine bir boyut atanır.

Sanal kaydırma modülüyle ilgili css aşağıdaki gibidir -

table {
   width: 100%;
}
cdk-virtual-scroll-viewport {
   height: 500px;
}

Sanal kaydırmaya verilen yükseklik 500 pikseldir. Bu yüksekliğe uyan görüntüler kullanıcıya gösterilecektir. Sanal kaydırma modülümüzün görüntülenmesini sağlamak için gerekli kodu eklemeyi bitirdik.

Tarayıcıdaki Virtual Scroll Module çıktısı aşağıdaki gibidir -

Kullanıcıya ilk 4 görüntünün gösterildiğini görebiliriz. 500px yüksekliğini belirledik. Tablo için kaydırma görüntülenir, kullanıcı kaydırdıkça, bu yüksekliğe sığacak resimler aşağıda gösterildiği gibi görüntülenecektir -

Kullanıcı kaydırdıkça gerekli görüntüler yüklenir. Bu özellik performans açısından oldukça kullanışlıdır. İlk başta, 5000 görüntünün tamamını yüklemez, bunun yerine kullanıcı kaydırdıkça url'ler çağrılır ve görüntülenir.