Angular Component Style

Merhabalar, bugün sizlere Angular Component Style hakkında bir yazı hazırladım. Aslında bir çoğumuzun kullandığı yapılar, bende kullanıyorum. Sadece ezberden kullandığımı farkettim, araştırmalar yaptım örnekler inceledim ve mantığını anladım. Umarım sizler içinde faydalı olur, makale tadında bol örnekli bir yazı hazırladım..

Yazarken Angular’ın kendi dokümantasyonundan yararlandım, çevirebildiğim kadarıyla Türkçeye çevirmeye çalıştım. Buradan linke ulaşabilirsiniz.

Angular uygulamalarınızda direk olarak CSS standartlarını kullanabilirsiniz. Yani media queryler, selectorler, rules ve CSS hakkında bildiğiniz her bilgiyi ekleyebilir, uygulamarınıza renk katabilirsiniz.

Ayrı style dosyaları ile component bazında uygulamalarınıza style eklediğiniz için, bunların hepsi bir bütün olarak değerlendirildiğinde daha modüler bir tasarım yaratmanıza yardımcı olur.

Angularda html ve style tanımlamaları farklı şekillerde yapılabilmektedir. İsterseniz @Component bileşeninin içerisinde tanımlayabilir, isterseniz alışık olunan düzende ki gibi html ve css sayfalarından erişim sağlayabilirsiniz.

USING COMPONENT STYLES

STYLE SCOPE

@Component metadatasında tanımlanan stiller yalnız o component içerisinde geçerlidir. Başka bir component tarafından kullanılamaz. Örnekte gördüğünüz gibi StartComponent içerisindeki metadalarda tanımlanan <p> style yalnızca StartComponent için geçerlidir. AppComponent içerisinde tanımladığımız başka bir <p> için font-weight: normal geçerli değildir.

Diyebilirsiniz ki, tek dosyadaki style tanımlamaları varken neden böyle bir düzene gidilmiş? Şöyle açıklamak istiyorum;

• Uygulamamızı farklı componentleri birleştirerek, yani tümevarım mantığıyla geliştiriyoruz. Bu biz geliştiricilere nerede ne yazıyor, bütün kodu taramadan bulmamızı sağladığı için aradığımız noktayı hemen bulmamız bizlere fazlasıyla zaman kazandırmaktadır. Style dosyasında bir değişiklik yapmak istediğinizde, hangi component içerisinde kodunuzu yazdıysanız o klasöre gidip karmaşıklığa yol açmadan, bunu değiştirirsem başka nereler patlar veya nereyi bozarım demeden gönül rahatlığıyla değiştirebilirsiniz.
• Bunun en güzel yanlarından birisi de düzgün, düzenli ve temiz bir proje geliştiriyor olmamızdır.
• Yazdığımız kodlar başka bileşenlerde de tanımlanıyorsa aralarında herhangi bir etkileşim olmayacaktır. Ama ben A componenti içerisinde B componentini kullanmak istiyorum dediğinizde işler biraz değişebilir. O konuya da değineceğim.

SPECIAL SELECTORS

:host

Component içerisindeki style tanımlayacağınız yapılar için kullanabilirsiniz. Ben sizlere stackblitz üzerinden örnek kod paylaştım, basit ve anlaşılır şekilde :host’un componenti ve component içerisindeki componenti nasıl etkilediğini görebilirsiniz.

The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template.

Bu tanım Angular doc. içindeki kendi tanımlarıdır.

Burada anlatılmak istenilen,

:host elementine Component içerisinde herhangi bir yerden ulaşamazsınız, çünkü :host elementi componentin sahip olduğu bir yapı değildir. :host elementi component templatelerinin atası durumundadır.

Paylaştığım örnekten de anlayacağınız şekilde, :host elementi için bir id, class tanımlamadım, host sahip olduğu yapılara benim yazdığım değişiklikleri uyguladı.

Bir başka kullanım şekli olarak ;

:host .test { color: red; }

Şeklinde kullanabilirsiniz, bazı tanımlamak istediğiniz yapılar için bu;

:host(.test) { color: red; } şeklinde olabilir.

:host-context

Bazı durumlarda tanımlamalarımızın değişmesini isteriz. En basit örneği tema değişimleri. Light temada butonun bordo olmasını istiyoruz ama dark temada aynı buton mavi olmalı. Bunun için :host-context kullanabiliriz.

:host-context(.theme-light) button {

Get Bestte’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

background-color: purple;

color: white

}

:host-context elementi :host()’un fonksiyon hali olarak düşünülebilir. Başka bir selectorle kullanılacağı zaman kullanışlı olabilir.

::ng-deep

Tanımlandığı component içerisinde HTML bloklarına etki eder. Yine Stackblitz üzerinden de paylaştım. Eğer ::ng-deep ile birlikte herhangi bir tag için css tanımladıysanız, geçersiz kalacaktır. Çünkü ::ng-deep ile birlikte kullanım global bir kullanım haline dönüşür ve baskın çıkar.

Birde unutulmaması gereken nokta ::ng-deep’den önce :host kullanmayı unutmayın, unutursanız eğer tanımladığınız css kuralları diğer componentlere etki edebilir.

!!!!!!!! /deep/, >>> ve ::ng-deep

Bunları yalnız view encapsulation kullanacağınız zaman kullanmalısınız.

Loading Component Styles

Styles in component metadata

Angular CLI kullanarak inline component oluşturabilirsiniz;

ng generate component app-name –inline-style

ng g component app-name –inline-style

Style files in component metadata

Bu style yapısını kullanıyorsanız, diğer componentler tarafından erişim sağlanamaz ve diğer componentleri etkilemez.

Birden fazla style dosyası, styles veya styleUrls oluşturup tanımlayabiliriz.

Angular CLI kullanarak bu şekilde component oluşturmak çin

ng generate component my-app

ng g component my-app

Template inline styles

Template link tags

Non-CSS style files

Teşekkürler,

Kaynak: https://angular.io/guide/component-styles#host-context