Şablon Olarak SVG

SVG dosyalarını Angular uygulamalarınızda şablon olarak kullanabilirsiniz. Şablon olarak bir SVG kullandığınızda, tıpkı HTML şablonlarında olduğu gibi yönergeleri ve bağlamaları kullanabilirsiniz. Etkileşimli grafikleri dinamik olarak oluşturmak için bu özellikleri kullanın. SVG sözdizimi örneği Aşağıdaki örnekte bir SVG’nin şablon olarak kullanılmasına ilişkin sözdizimi gösterilmektedir. Özellik ve olay bağlamayı çalışırken görmek için aşağıdaki kodu svg.component.svg dosyanıza ekleyin: […]

Şablon Değişkenlerini Anlama

Şablon değişkenleri, bir şablonun bir bölümündeki verileri şablonun başka bir bölümünde kullanmanıza yardımcı olur. Kullanıcı girdisine yanıt vermek veya uygulamanızın formlarını hassas bir şekilde ayarlamak gibi görevleri gerçekleştirmek için şablon değişkenlerini kullanın. Bir şablon değişken aşağıdakilere atıfta bulunabilir: Sözdizimi Şablonda, bir şablon değişkeni bildirmek için hashtag sembolünü, #, kullanırsınız. Aşağıdaki #phone şablon değişkeni, değeri <input> […]

Yerleşik Kontrol Akışı

Angular şablonları, öğeleri koşullu olarak göstermenizi, gizlemenizi ve tekrarlamanızı sağlayan kontrol akışı bloklarını destekler. @if blok koşulluları @if bloğu, koşul ifadesi doğru olduğunda içeriğini koşullu olarak görüntüler: @if bloğu bir veya daha fazla ilişkili @else bloğuna sahip olabilir. Bir @if bloğundan hemen sonra, isteğe bağlı olarak istediğiniz sayıda @else if bloğu ve bir @else bloğu […]

İki Yönlü Bağlama

İki yönlü bağlama, uygulamanızdaki bileşenlere veri paylaşımı için bir yol sunar. Olayları dinlemek ve üst ve alt bileşenler arasında eş zamanlı olarak değerleri güncellemek için iki yönlü bağlamayı kullanın. İki yönlü bağlama,  property binding ile olay bağlamayı birleştirir: Bağlamalar Detaylar Property binding Belirli bir öğe özelliğini ayarlar. Event binding Bir öğe değişikliği olayını dinler. İki […]

Olay Bağlama

Olay bağlama, tuş vuruşları, fare hareketleri, tıklamalar ve dokunmalar gibi kullanıcı eylemlerini dinlemenizi ve bunlara yanıt vermenizi sağlar. Olaylara bağlanma Bir olaya bağlanmak için Angular olay bağlama sözdizimini kullanırsınız. Bu sözdizimi, eşittir işaretinin solundaki parantezler içinde bir hedef olay adı ve sağda tırnak içine alınmış bir şablon ifadesinden oluşur. Aşağıdaki örneği oluşturun; hedef olay adı […]

Sınıf ve stil bağlama

CSS sınıf adlarını bir öğenin sınıf niteliğine eklemek ve kaldırmak ve stilleri dinamik olarak ayarlamak için sınıf ve stil bağlamalarını kullanın. Tek bir CSS sınıfına bağlama Tek bir sınıf bağlayıcısı oluşturmak için aşağıdakileri yazın: [class.sale]=”onSale” Angular, bağlı ifade olan onSale doğru olduğunda sınıfı ekler ve ifade hatalı olduğunda –undefined olması dışında- sınıfı kaldırır. Birden fazla […]

Öznitelik Bağlama

Angular’da öznitelik bağlama, öznitelikler için değerleri doğrudan ayarlamanıza yardımcı olur. Öznitelik bağlama ile erişilebilirliği artırabilir, uygulamanızı dinamik olarak şekillendirebilir ve aynı anda birden fazla CSS sınıfını veya stilini yönetebilirsiniz. Sözdizimi Öznitelik bağlama sözdizimi property binding‘e benzer, ancak parantezler arasında bir öğe özelliği yerine, özniteliğin adından önce attr önekini ve ardından bir nokta koyarsınız. Ardından, öznitelik […]

En İyi Property Binding Kullanımları

Birkaç yönergeyi izleyerek, özellik bağlamayı hataları azaltmanıza ve kodunuzu okunabilir tutmanıza yardımcı olacak şekilde kullanabilirsiniz. Yan etkilerden kaçının Bir şablon ifadesinin değerlendirilmesi hiçbir görünür yan etkiye sahip olmamalıdır. Yan etkileri önlemeye yardımcı olmak için şablon ifadeler için sözdizimini kullanın. Genel olarak, doğru sözdizimi size bir özellik bağlama ifadesinde herhangi bir şeye bir değer atamanızı engeller. […]

Property Binding

Angular’da özellik bağlama, HTML öğelerinin veya yönergelerinin özellikleri için değerler ayarlamanıza yardımcı olur. Düğme özelliklerini değiştirme, yolları programlı olarak ayarlama ve bileşenler arasında değerleri paylaşma gibi işlemleri yapmak için özellik bağlamayı kullanın. Veri akışının anlaşılması Özellik bağlama, bir değeri bir yönde, bir bileşenin özelliğinden bir hedef öğe özelliğine taşır. Bir hedef öğe özelliğini okumak veya […]

Bağlamayı Anlama

Bir Angular şablonunda bağlama, şablondan oluşturulan kullanıcı arayüzünün bir parçası (bir DOM öğesi, yönerge veya bileşen) ile model (şablonun ait olduğu bileşen örneği) arasında canlı bir bağlantı oluşturur. Bu bağlantı, görünümü modelle senkronize etmek, görünümde bir olay veya kullanıcı eylemi gerçekleştiğinde modeli bilgilendirmek veya her ikisi için de kullanılabilir. Angular’ın  Change Detection algoritması, görünümü ve modeli […]