Yandex Metrica
Angular Enum Tanımlama ve Listeleme - Yasin Sunmaz

Yasin Sunmaz

Kodladıkça değişen bir dünya...

Angular Enum Tanımlama ve Listeleme

14.02.2022 yasinsunmaz 947 0

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.

  • Yorum yapabilmek için giriş yapmalısınız. Giriş yapmak için tıklayınız.

Diğer Yazılar

Visual Studio Code'da Angular İçin En İyi Eklentiler

05.07.2023 yasinsunmaz 615 0

Angular, modern web uygulamaları geliştirmek için popüler bir JavaScript çatısıdır. Angular projelerinizde daha verimli çalışmak ve geliştirme süreci...

Angular "bundle initial exceeded maximum budget" Hatası Çözümü

29.06.2023 yasinsunmaz 282 0

Angular'da aldığım "Error: bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 745.34 kB with a total of 1.73 MB." hatasının çöz&uu...

Angular "exceeded maximum budget" Hatası Çözümü

27.06.2023 yasinsunmaz 329 0

Angular'da aldığım "exceeded maximum budget. Budget 4.00 kB was not met by 10.22 kB with a total of 14.22 kB." hatasının çözümünü bu yazımd...

Angular 13 Validator Kullanımı

14.03.2022 yasinsunmaz 1179 0

Angular'da form uygulamalarımızda verilerin daha düzgün alınması ve gerekli sınırlamalara göre veri girişinin olması oldukça önemlidir. En temel kont...

MIME type ('text/html') is not a supported stylesheet MIME type Hatası Çözümü

27.02.2022 yasinsunmaz 1592 0

Angular'da projenin tasarımını yaparken genel CSS'ler için style.css dosyamı hazırladım. Fakat projeyi çalıştırdığımda CSS kodları sayfada etkin gör...