Angular Enum Tanımlama ve Listeleme

Bir çok yazılım dilinde enum tipleri kullanılmaktadır. Projelerimizde sabit değeler ve neredeyse hiç değişmeyecek yapılar için kullanırız. Tanımladık sonra istediğimiz her yerde çağırıp kullanabiliriz. Angular projelerimizde de enum kullanmak mümkün. Enum tanımlaması ile gerekli yerlerde işlerinizi kolaylaştırabilecek ve tanımlamalara rahatça ulaşabileceksiniz. Bunun yanında enum verileri HTML tarafından nasıl listeleriz bundan bahsedeceğim. Enum yapıları bazı durumlarda kullanıcılara göstermek için de kullanabiliyoruz.

Buna en yakın örneklerden biri cinsiyet verisi. Cinsiyet erkek, kadın ve isteğe bağlı olarak diğer seçenekleri içermektedir. Bu tanımlamaları bir defa tanımlayıp sürekli kullanmak kodlarımızın hem okunaklı hem de erişilebilirlik açından da rahat olacaktır.

Enum Tanımlama

Enum tanımlamaları aşağıdaki tanımlayabilir ve istediğimiz veriyi atabiliyoruz. Kullanacağınız yerler için değişiklik göstereceği için Türkçe olarak tanımlama konusunda dikkatli olmanızı tavsiye ederim. Ben burada sadece cinsiyeti göstermek ve atadığımız veriyi ulaşmak için kullanacağım o yüzden Türkçe karakter kullandım.

export enum Gender {
    Man="Man",
    Woman="Woman"
}

Enum Kullanımı

Enum dosyasını sayfanızın üstünde import ettikten sonra enum adını yazarak kolayca kullanabilirsiniz.

import { Gender } from '../enums/gender';

Gender.Man

Gender.Woman

Enum Değerlerini HTML'de Listeleme

Enum değerlerini select elementi içinde listelemek için bazı işlemler yapamamız gerek. Öncelikle enum tanımlamamızı Object.keys ile alıyoruz. Sonrasında bu genders tanımlamamızı bir fonksiyon içinde bölerek string tipinde dizi şeklinde çıktı vermesini istiyoruz.

genders = Object.keys(Gender);
 public genderEnums(): Array {
    const keys = Object.keys(Gender);
    return keys.slice();
  }

Enum HTML'de Çağırma

İlk option değeri olarak "Seçiniz" şeklinde belirledim. Diğer optionlar ise ngFor ile kendi gelecek. *ngFor ile genderEnums() fonksiyonumuzdan gelen değerleri döngüye sokuyoruz. Gelen verileri de option için gerekli yerlere yazıyoruz. Bu sayede enum ile tanımlanmış değerlerimizi istersek HTML tarafında da kullanabilmemiz münkün oluyor. Bu yöntem yerine standart şekilde de bu verileri buraya koymak elbette normal. Fakat enum değerleri fazla olduğunu düşünürsek bu yöntem sizin işinizi kolaylaştıracak daha az kod ile aynı işi yapabileceksiniz.

Seçiniz{{g}}

Umarım faydalı olmuştur. İyi çalışmalar dilerim.

• #javascript
• #angular13
• #angular

Paylaş:

• Facebook
• Twitter
• Google+
• Pinteres
• WhatsApp
• LinkedIn