{"id":25444,"date":"2022-08-15T00:16:52","date_gmt":"2022-08-15T00:16:52","guid":{"rendered":"https:\/\/www.gencayyildiz.com\/blog\/?p=25444"},"modified":"2022-08-15T00:16:52","modified_gmt":"2022-08-15T00:16:52","slug":"angular-gelismis-component-yapilanmasi-ng-content","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/angular-gelismis-component-yapilanmasi-ng-content\/","title":{"rendered":"Angular – Geli\u015fmi\u015f Component Yap\u0131lanmas\u0131 | ng-content"},"content":{"rendered":"
<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde Angular mimarisinde, component’lerin html \u015fablonlar\u0131 i\u00e7erisine harici i\u00e7eriklerin y\u00fcklenmesini sa\u011flayan ng-content<\/code> \u00f6zelli\u011fini inceliyor olaca\u011f\u0131z.<\/p>\n

Ne \u00d6\u011frenece\u011fiz?<\/h4>\n

Biliyorsunuz ki, component’ler aras\u0131 ileti\u015fim i\u00e7in @Input ve @Output<\/a> dekorat\u00f6rlerinden istifade edebiliyor ve \u00f6zellikle parent component’ten child component’e veri aktarmak i\u00e7in @Input dekorat\u00f6r\u00fcn\u00fc kullanabiliyoruz. Fakat bu dekorat\u00f6rler e\u015fli\u011finde component’ler aras\u0131 ileti\u015fim sadece verilerle s\u0131n\u0131rl\u0131d\u0131r. Bazen component’ler aras\u0131 HTML \u00f6\u011feleri i\u00e7eren kodlar payla\u015fmam\u0131z ve edinen component taraf\u0131ndan bu kodlar\u0131 render etmemiz gerekebilir. \u0130\u015fte b\u00f6yle bir durumda ng-content<\/code> \u00f6zelli\u011finden istifade edebiliriz.<\/p>\n

ng-content Nedir?<\/h4>\n

ng-content<\/code>, html i\u00e7eriklerini parent component’ten child component’e ge\u00e7irmemizi ve render etmemizi sa\u011flayan, b\u00f6ylece dinamik bir \u015fekilde harici \u015fablonlar olu\u015fturmam\u0131za imkan tan\u0131yan bir \u00f6zelliktir. \u0130\u015flevsel olarak child component’in html’inde istenilen noktay\u0131 ya da noktalar\u0131 i\u015faretlememizi sa\u011flayarak parent’tan gelecek olan html \u00f6\u011felerini basmam\u0131z\u0131 ve yeniden kullan\u0131labilir bir component olu\u015fturmam\u0131z\u0131 m\u00fcmk\u00fcn k\u0131lmaktad\u0131r. <\/p>\n

Misal olarak a\u015fa\u011f\u0131daki component’i ele al\u0131rsak e\u011fer;<\/p>\n

\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-c1',\r\n  styleUrls: ['.\/c1.component.scss'],\r\n  template: `\r\n    <app-c2>Button 1<\/app-c2>\r\n`\r\n})\r\nexport class C1Component implements OnInit {\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n
g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere i\u00e7erisinde <app-c2>...<\/app-c2><\/code> selector’\u0131 bar\u0131nd\u0131rmaktad\u0131r ve b\u00f6ylece a\u015fa\u011f\u0131daki component’i \u00e7a\u011f\u0131rmaktad\u0131r.<\/p>\n
\n
\r\nimport { Component, Input, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-c2',\r\n  styleUrls: ['.\/c2.component.scss'],\r\n  template: `\r\n    <div>\r\n      <p>\u00d6rnek Button<\/p>\r\n      <button>\r\n        <ng-content><\/ng-content>\r\n      <\/button>\r\n    <\/div>\r\n`\r\n})\r\nexport class C2Component implements OnInit {\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n
Bu component’te ise 10.<\/strong><\/em> sat\u0131rda <ng-content><\/ng-content><\/code> \u00f6zelli\u011fi ile i\u015faretlemede bulunulmu\u015ftur. Parent component’in selector aras\u0131na koymu\u015f oldu\u011fu ‘Button 1’ de\u011feri i\u015fte tam da bu noktaya yerle\u015ftirilecektir.\"Angular<\/a>Netice itibariyle yap\u0131lan bu \u00e7al\u0131\u015fman\u0131n \u00e7\u0131kt\u0131s\u0131 yukar\u0131daki gibi olacakt\u0131r.<\/p>\n
Multiple ng-content<\/h4>\n
ng-content<\/code>, selector<\/code> ile ayr\u0131larak birden fazla olacak \u015fekilde kullan\u0131labilir.<\/p>\n
\n
\r\nimport { Component, Input, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-c2',\r\n  styleUrls: ['.\/c2.component.scss'],\r\n  template: `\r\n    <div>\r\n      <p>\u00d6rnek Button<\/p>\r\n      <div class="header">\r\n        <ng-content select="header"><\/ng-content>\r\n      <\/div>\r\n      <div class="body">\r\n        <ng-content select="body"><\/ng-content>\r\n      <\/div>\r\n      <div class="footer">\r\n        <ng-content select="footer"><\/ng-content>\r\n      <\/div>\r\n    <\/div>\r\n`,\r\n  styles: [`\r\n    .header{ background-color:green; }\r\n    .body{ background-color:red; }\r\n    .footer{ background-color:blue; }\r\n`\r\n  ]\r\n})\r\nexport class C2Component implements OnInit {\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n
Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer her biri bir selector<\/code>‘a sahip \u00fc\u00e7 ng-content<\/code> tan\u0131m\u0131 mevcuttur. Bu selector’lar\u0131 kullanabilmek i\u00e7in a\u015fa\u011f\u0131daki gibi bir i\u015flem ger\u00e7ekle\u015ftirilmelidir.<\/p>\n
\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-c1',\r\n  styleUrls: ['.\/c1.component.scss'],\r\n  template: `\r\n    <app-c2>\r\n      <header>Header Content<\/header>\r\n      <body>Body Content<\/body>\r\n      <footer>Footer Content<\/footer>\r\n    <\/app-c2>\r\n`\r\n})\r\nexport class C1Component implements OnInit {\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n
\"Angular<\/a>Bu \u00e7al\u0131\u015fman\u0131n neticesi de yukar\u0131daki gibi olacakt\u0131r.<\/p>\n
Ya da iste\u011finiz do\u011frultusunda selector<\/code>‘\u0131 a\u015fa\u011f\u0131daki gibi CSS se\u00e7icisi olarak da kullanabilirsiniz.<\/p>\n
\n
\r\nimport { Component, Input, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-c2',\r\n  styleUrls: ['.\/c2.component.scss'],\r\n  template: `\r\n    <div>\r\n      <div class="header">\r\n        <ng-content select=".header"><\/ng-content>\r\n      <\/div>\r\n      <div class="body">\r\n        <ng-content select=".body"><\/ng-content>\r\n      <\/div>\r\n      <div class="footer">\r\n        <ng-content select=".footer"><\/ng-content>\r\n      <\/div>\r\n    <\/div>\r\n`,\r\n  styles: [`\r\n    .header{ background-color:green; }\r\n    .body{ background-color:red; }\r\n    .footer{ background-color:blue; }\r\n`\r\n  ]\r\n})\r\nexport class C2Component implements OnInit {\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n
Ard\u0131ndan bu css se\u00e7icilerine kar\u015f\u0131l\u0131k a\u015fa\u011f\u0131daki gibi de\u011ferlerini g\u00f6nderebilirsiniz.<\/p>\n
\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-c1',\r\n  styleUrls: ['.\/c1.component.scss'],\r\n  template: `\r\n    <app-c2>\r\n      <div class="header">\r\n        <h1>Header Content<\/h1>\r\n      <\/div>\r\n      <div class="body">\r\n        <h4>Body Content<\/h4>\r\n      <\/div>\r\n      <div class="footer">\r\n        <h6>Footer Content<\/h6>\r\n      <\/div>\r\n    <\/app-c2>\r\n`\r\n})\r\nexport class C1Component implements OnInit {\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n
Sonu\u00e7;
\n\"Angular<\/a>
\nSe\u00e7ici taraf\u0131ndan i\u015faretlenmeyen\/belirlenmeyen alanlar\u0131 varsay\u0131lan olarak bir noktaya yans\u0131tabilmek i\u00e7in a\u015fa\u011f\u0131daki gibi davran\u0131\u015f sergilenebilir.<\/p>\n
\n
\r\nimport { Component, Input, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-c2',\r\n  styleUrls: ['.\/c2.component.scss'],\r\n  template: `\r\n    <div>\r\n      <div class="header">\r\n        <ng-content select=".header"><\/ng-content>\r\n      <\/div>\r\n      <div class="body">\r\n        <ng-content select=".body"><\/ng-content>\r\n      <\/div>\r\n      <div class="footer">\r\n        <ng-content select=".footer"><\/ng-content>\r\n      <\/div>\r\n      <div>\r\n        <ng-content><\/ng-content>\r\n      <\/div>\r\n    <\/div>\r\n`,\r\n  styles: [`\r\n    .header{ background-color:green; }\r\n    .body{ background-color:red; }\r\n    .footer{ background-color:blue; }\r\n`\r\n  ]\r\n})\r\nexport class C2Component implements OnInit {\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n
Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer en sonuncu olan ng-content<\/code> etiketi e\u015fle\u015fmeyen i\u00e7erikleri kar\u015f\u0131lamas\u0131 i\u00e7in tan\u0131mlanm\u0131\u015ft\u0131r. Misal olarak;<\/p>\n
\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-c1',\r\n  styleUrls: ['.\/c1.component.scss'],\r\n  template: `\r\n    <app-c2>\r\n      <div class="header">\r\n        <h1>Header Content<\/h1>\r\n      <\/div>\r\n      <div class="body">\r\n        <h4>Body Content<\/h4>\r\n      <\/div>\r\n      <div class="footer">\r\n        <h6>Footer Content<\/h6>\r\n      <\/div>\r\n      <div>\r\n        <h6>Diger Content<\/h6>\r\n      <\/div>\r\n    <\/app-c2>\r\n`\r\n})\r\nexport class C1Component implements OnInit {\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n
\u015feklinde bir veri geldi\u011finde a\u015fa\u011f\u0131daki gibi bir sonu\u00e7la kar\u015f\u0131la\u015f\u0131lacakt\u0131r.
\n\"Angular<\/a><\/p>\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, component’lerin html \u015fablonlar\u0131 i\u00e7erisine harici i\u00e7eriklerin y\u00fcklenmesini sa\u011flayan ng-content \u00f6zelli\u011fini inceliyor olaca\u011f\u0131z. Ne \u00d6\u011frenece\u011fiz? Biliyorsunuz ki, component’ler aras\u0131 ileti\u015fim i\u00e7in @Input ve @Output dekorat\u00f6rlerinden istifade edebiliyor ve \u00f6zellikle parent...<\/p>\n","protected":false},"author":1,"featured_media":7400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420,4610],"tags":[2156,4644,4643],"class_list":["post-25444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-14","tag-angular","tag-gelismis-component-yapilanmasi","tag-ng-content"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25444","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=25444"}],"version-history":[{"count":10,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25444\/revisions"}],"predecessor-version":[{"id":25462,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25444\/revisions\/25462"}],"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=25444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=25444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=25444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}