<\/div>\n
Merhaba,<\/p>\n
Bu i\u00e7eri\u011fimizde Angular mimarisinde HTML’in d\u0131\u015f\u0131nda i\u015flevsel bir alan olu\u015fturmam\u0131z\u0131 sa\u011flayan ng-container<\/code> \u00f6zelli\u011fini inceliyor olaca\u011f\u0131z.<\/p>\n
ng-container Nedir?<\/h3>\nng-container<\/code>, sayfa \u00fczerinde HTML elementleriyle u\u011fra\u015fmaks\u0131z\u0131n bir b\u00f6l\u00fcm\/alan olu\u015fturmam\u0131za olanak sa\u011flayan, Document Object Model(DOM) i\u00e7erisinde tan\u0131mlanmayan lakin i\u00e7inde i\u00e7erik bar\u0131nd\u0131rabilen, \u00f6z\u00fc itibariyle ne directive, ne component ne de class yahut interface olan, sade ve sadece bir s\u00f6zdizimi\/syntax \u00f6\u011fesinden ibaret olan bir \u00f6zelliktir.<\/p>\n
Misal olarak;<\/p>\n
\n\r\n    <h1>Ba\u015fl\u0131k 1<\/h1>\r\n    <p>\u0130\u00e7erik<\/p>\r\n    <ng-container>\r\n      Container i\u00e7erik\r\n    <\/ng-container>\r\n<\/pre>\n<\/div>\n<\/a>Yukar\u0131daki \u015fablonu ele al\u0131rsak e\u011fer bunun render edilmi\u015f hali yandaki g\u00f6rseldeki gibi olacakt\u0131r. ng-container<\/code>‘\u0131n render edildikten sonra herhangi bir HTML elementine kar\u015f\u0131l\u0131k gelmedi\u011fine dikkatinizi \u00e7ekerim.<\/p>\n
ng-container Nerelerde Kullan\u0131l\u0131r?<\/h3>\nng-container<\/code>‘\u0131 genellikle ngIf<\/a>, ngFor<\/a> vs. gibi direktifler e\u015fli\u011finde kullanmaktay\u0131z. Bu durumlara \u00f6rnek olmas\u0131 hasebiyle a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmay\u0131 inceleyebilirsiniz:<\/p>\n
\n\r\n  programmingLanguages = [\r\n    { name: "Angular", active: true },\r\n    { name: "React", active: true },\r\n    { name: "Typescript", active: true },\r\n    { name: "Javascript", active: true },\r\n    { name: "Php", active: false }\r\n  ]\r\n<\/pre>\n<\/div>\nYukar\u0131da, i\u00e7erisinde baz\u0131 programlama dillerinin bilgilerini bar\u0131nd\u0131ran bir koleksiyon tan\u0131m\u0131 mevcuttur. Bizler bu koleksiyon i\u00e7erisindeki programlama dillerinden aktif olanlar\u0131 ekrana listelemek istiyorsak t\u00fcm \u00f6\u011feleri tek tek ngIf direktifi ile kontrol etmemiz gerekmektedir. ng-container<\/code>‘\u0131 kullanmaks\u0131z\u0131n bu i\u015flemi ger\u00e7ekle\u015ftirebilmek i\u00e7in span<\/code> HTML \u00f6\u011fesini a\u015fa\u011f\u0131daki gibi kullanabiliriz.<\/p>\n\n\r\n    <ul>\r\n      <span *ngFor="let language of programmingLanguages">\r\n        <li *ngIf="language.active">{{language.name}}<\/li>\r\n      <\/span>\r\n    <\/ul>\r\n<\/pre>\n<\/div>\nRender neticesi :
\n<\/a>
\nYa da component’lerin html dosyalar\u0131n\u0131 temiz tutabilmek ve render neticesinde \u00fcretilecek kaynak kodu da m\u00fcmk\u00fcn mertebe performansl\u0131 olacak \u015fekilde sade bir \u015fekilde sunabilmek i\u00e7in ng-container<\/code>‘\u0131 kullanarak burada daha do\u011fru bir tercihte bulunabiliriz.<\/p>\n
\n\r\n    <ul>\r\n      <ng-container *ngFor="let language of programmingLanguages">\r\n        <li *ngIf="language.active">{{language.name}}<\/li>\r\n      <\/ng-container>\r\n    <\/ul>\r\n<\/pre>\n<\/div>\nRender neticesi :
\n<\/a>
\nDikkat ederseniz aktif olmayan programlama dillerinin yerine ekstradan bir html eleman\u0131 \u00fcretilmeyece\u011fi i\u00e7in maliyet ve performans a\u00e7\u0131s\u0131ndan lehimize bir davran\u0131\u015f sergilenmi\u015f olmaktad\u0131r.<\/p>\n
ng-container \u0130le ng-template \u0130li\u015fkisi<\/h3>\nng-container<\/code> ile var olan ng-template<\/code>‘ler i\u00e7erisindeki \u015femalar\u0131 a\u015fa\u011f\u0131daki gibi ngTemplateOutlet<\/strong><\/code> ile dinamik bir \u015fekilde \u00e7ekebilirsiniz.<\/p>\n\n\r\n  template: `\r\n    <div class="div1">\r\n      <ng-container *ngTemplateOutlet="div1content"><\/ng-container>\r\n    <\/div>\r\n    <div class="div2">\r\n      <ng-container *ngTemplateOutlet="div2content"><\/ng-container>\r\n    <\/div>\r\n    <div class="div3">\r\n      <ng-container *ngTemplateOutlet="div3content"><\/ng-container>\r\n    <\/div>\r\n\r\n    <ng-template #div1content>div1 i\u00e7eri\u011fi<\/ng-template>\r\n    <ng-template #div2content>div2 i\u00e7eri\u011fi<\/ng-template>\r\n    <ng-template #div3content>div3 i\u00e7eri\u011fi<\/ng-template>\r\n`,\r\n  styles: [`\r\n    .div1 { color:red; }\r\n    .div2 { color:blue; }\r\n    .div3 { color:green; }\r\n`]\r\n<\/pre>\n<\/div>\n<\/a>
\n\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde Angular mimarisinde HTML’in d\u0131\u015f\u0131nda i\u015flevsel bir alan olu\u015fturmam\u0131z\u0131 sa\u011flayan ng-container \u00f6zelli\u011fini inceliyor olaca\u011f\u0131z. ng-container Nedir? ng-container, sayfa \u00fczerinde HTML elementleriyle u\u011fra\u015fmaks\u0131z\u0131n bir b\u00f6l\u00fcm\/alan olu\u015fturmam\u0131za olanak sa\u011flayan, Document Object Model(DOM) i\u00e7erisinde tan\u0131mlanmayan...<\/p>\n","protected":false},"author":1,"featured_media":7400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420],"tags":[2156,4646,4645,4648,4647],"class_list":["post-25463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-angular-ng-container","tag-ng-container","tag-ng-template","tag-ngtemplateoutlet"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=25463"}],"version-history":[{"count":7,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25463\/revisions"}],"predecessor-version":[{"id":25474,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25463\/revisions\/25474"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7400"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=25463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=25463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=25463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}