Geli\u015fmi\u015f Kullan\u0131c\u0131 Deneyimi:<\/strong> Animasyonlar, eri\u015filebilirlik (WAI-ARIA) deste\u011fi ve duyarl\u0131 tasar\u0131m \u00f6zellikleri ile kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/li>\n<\/ul>\nPrimeNG Kurulumu ve Projeye Entegrasyonu<\/h3>\n PrimeNG kullanmaya ba\u015flamadan \u00f6nce, Angular projenize gerekli paketleri kurman\u0131z ve yap\u0131land\u0131rman\u0131z gerekir.<\/p>\n
1. PrimeNG ve PrimeIcons Paketlerini Kurma<\/h4>\n \u0130lk ad\u0131m olarak, PrimeNG k\u00fct\u00fcphanesini ve bile\u015fenler taraf\u0131ndan kullan\u0131lan ikon setini projenize eklemelisiniz. Angular projenizin k\u00f6k dizininde terminali a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
\nnpm install primeng primeicons --save\n<\/code><\/pre>\nBu komut, primeng<\/code> ana k\u00fct\u00fcphanesini ve primeicons<\/code> ikon setini node_modules<\/code> klas\u00f6r\u00fcn\u00fcze indirecektir.<\/p>\n2. Temalar\u0131 ve Stil Dosyalar\u0131n\u0131 angular.json’a Ekleme<\/h4>\n PrimeNG bile\u015fenlerinin g\u00f6rsel olarak d\u00fczg\u00fcn g\u00f6r\u00fcnmesi i\u00e7in bir tema ve PrimeNG’nin kendi stil dosyalar\u0131n\u0131 angular.json<\/code> dosyan\u0131za eklemeniz gerekir. Bu dosya, Angular projenizin genel yap\u0131land\u0131rmas\u0131n\u0131 i\u00e7erir.<\/p>\nangular.json<\/code> dosyan\u0131z\u0131 a\u00e7\u0131n ve projects -> [your-project-name] -> architect -> build -> options -> styles<\/code> dizisinin alt\u0131na a\u015fa\u011f\u0131daki sat\u0131rlar\u0131 ekleyin. Bir tema se\u00e7imi yapman\u0131z gerekecektir; burada “lara-light-blue” temas\u0131n\u0131 \u00f6rnek olarak kullan\u0131yoruz. PrimeNG’nin bir\u00e7ok farkl\u0131 temas\u0131 bulunmaktad\u0131r (lara-light-blue, saga-blue, arya-green, vela-orange vb.).<\/p>\n\n\"styles\": [\n \"src\/styles.css\",\n \"node_modules\/primeng\/resources\/themes\/lara-light-blue\/theme.css\", \/\/ Se\u00e7ti\u011finiz tema\n \"node_modules\/primeng\/resources\/primeng.min.css\", \/\/ PrimeNG temel stilleri\n \"node_modules\/primeicons\/primeicons.css\" \/\/ PrimeIcons ikon stilleri\n],\n<\/code><\/pre>\n3. BrowserAnimationsModule’\u00fc Dahil Etme<\/h4>\n PrimeNG bile\u015fenlerinin \u00e7o\u011fu, d\u00fczg\u00fcn \u00e7al\u0131\u015fabilmek i\u00e7in Angular’\u0131n animasyon mod\u00fcl\u00fcne ihtiya\u00e7 duyar. Bu mod\u00fcl\u00fc app.module.ts<\/code> (veya standalone bile\u015fen kullan\u0131yorsan\u0131z ilgili bile\u015fen dosyan\u0131za) eklemelisiniz.<\/p>\nE\u011fer mod\u00fcl tabanl\u0131 bir projeniz varsa, src\/app\/app.module.ts<\/code> dosyan\u0131z\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin:<\/p>\n\n\/\/ app.module.ts\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { BrowserAnimationsModule } from '@angular\/platform-browser\/animations'; \/\/ Bu sat\u0131r\u0131 ekleyin\n\nimport { AppComponent } from '.\/app.component';\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n BrowserAnimationsModule \/\/ Buraya ekleyin\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n<\/code><\/pre>\nE\u011fer standalone bile\u015fenler kullan\u0131yorsan\u0131z (Angular 15+), main.ts<\/code> veya app.config.ts<\/code> dosyan\u0131zda provideAnimations()<\/code> fonksiyonunu eklemeniz gerekir:<\/p>\n\n\/\/ main.ts veya app.config.ts\nimport { bootstrapApplication } from '@angular\/platform-browser';\nimport { provideAnimations } from '@angular\/platform-browser\/animations'; \/\/ Bu sat\u0131r\u0131 ekleyin\nimport { AppComponent } from '.\/app\/app.component';\n\nbootstrapApplication(AppComponent, {\n providers: [\n provideAnimations() \/\/ Buraya ekleyin\n ]\n}).catch(err => console.error(err));\n<\/code><\/pre>\nPrimeNG Bile\u015fenlerini Kullanma<\/h3>\n Kurulum tamamland\u0131ktan sonra, PrimeNG bile\u015fenlerini Angular uygulaman\u0131zda kullanmaya ba\u015flayabilirsiniz. Her bile\u015fen, kendi Angular mod\u00fcl\u00fc i\u00e7inde gelir ve kullanmak istedi\u011finiz bile\u015fenin mod\u00fcl\u00fcn\u00fc app.module.ts<\/code> (veya ilgili standalone bile\u015fenin imports<\/code> dizisine) eklemeniz gerekir.<\/p>\n1. Mod\u00fcl\u00fc \u0130\u00e7eri Aktarma<\/h4>\n \u00d6rne\u011fin, bir Button<\/code> (D\u00fc\u011fme) bile\u015feni kullanmak istiyorsan\u0131z, ButtonModule<\/code>‘\u00fc i\u00e7eri aktarman\u0131z gerekir.<\/p>\nMod\u00fcl tabanl\u0131 projenizde app.module.ts<\/code> dosyan\u0131z\u0131 g\u00fcncelleyin:<\/p>\n\n\/\/ app.module.ts\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { BrowserAnimationsModule } from '@angular\/platform-browser\/animations';\nimport { FormsModule } from '@angular\/forms'; \/\/ Input bile\u015fenleri i\u00e7in gerekli olabilir\n\n\/\/ PrimeNG mod\u00fcllerini buraya ekleyin\nimport { ButtonModule } from 'primeng\/button';\nimport { InputTextModule } from 'primeng\/inputtext';\nimport { CalendarModule } from 'primeng\/calendar';\n\nimport { AppComponent } from '.\/app.component';\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n BrowserAnimationsModule,\n FormsModule, \/\/ E\u011fer form elemanlar\u0131 kullanacaksan\u0131z ekleyin\n ButtonModule, \/\/ PrimeNG Button bile\u015feni i\u00e7in\n InputTextModule, \/\/ PrimeNG InputText bile\u015feni i\u00e7in\n CalendarModule \/\/ PrimeNG Calendar bile\u015feni i\u00e7in\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n<\/code><\/pre>\nStandalone bile\u015fen kullan\u0131yorsan\u0131z, do\u011frudan ilgili .ts<\/code> dosyan\u0131zdaki imports<\/code> dizisine ekleyebilirsiniz:<\/p>\n\n\/\/ app.component.ts (standalone)\nimport { Component } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\nimport { RouterOutlet } from '@angular\/router';\nimport { FormsModule } from '@angular\/forms';\n\n\/\/ PrimeNG mod\u00fclleri\nimport { ButtonModule } from 'primeng\/button';\nimport { InputTextModule } from 'primeng\/inputtext';\nimport { CalendarModule } from 'primeng\/calendar';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [\n CommonModule,\n RouterOutlet,\n FormsModule,\n ButtonModule, \/\/ PrimeNG Button bile\u015feni i\u00e7in\n InputTextModule, \/\/ PrimeNG InputText bile\u015feni i\u00e7in\n CalendarModule \/\/ PrimeNG Calendar bile\u015feni i\u00e7in\n ],\n templateUrl: '.\/app.component.html',\n styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent {\n title = 'my-primeng-app';\n username: string = '';\n selectedDate: Date | undefined;\n\n greet() {\n alert(Merhaba, ${this.username}!<\/code>);\n }\n}\n<\/code><\/pre>\n2. Bile\u015fenleri \u015eablonda Kullanma<\/h4>\n Mod\u00fclleri i\u00e7eri aktard\u0131ktan sonra, bile\u015fenleri HTML \u015fablonunuzda (\u00f6rne\u011fin app.component.html<\/code>) kullanabilirsiniz.<\/p>\n\n\n\n
PrimeNG Bile\u015fen Kullan\u0131m\u0131<\/h2>\n\n \n D\u00fc\u011fme Bile\u015feni<\/h3>\n <\/p-button>\n <\/p-button>\n\n \n Giri\u015f Kutusu Bile\u015feni<\/h3>\n \n Kullan\u0131c\u0131 Ad\u0131<\/label>\n <\/span>\n Girilen Ad: {{ username }}<\/b><\/p>\n\n \n Takvim Bile\u015feni<\/h3>\n \n <\/p-calendar>\n Tarih Se\u00e7<\/label>\n <\/span>\n Se\u00e7ilen Tarih: {{ selectedDate | date:'fullDate' }}<\/b><\/p>\n<\/div>\n<\/code><\/pre>\n
Yukar\u0131daki \u00f6rneklerde, p-button<\/code>, pInputText<\/code> (bir direktif olarak input<\/code> elementine uygulan\u0131r) ve p-calendar<\/code> bile\u015fenlerini kulland\u0131k.label<\/code> \u00f6zelli\u011fi ile d\u00fc\u011fme metnini, icon<\/code> ile PrimeIcons’tan bir ikon ekledik.(onClick)<\/code> ile bir olay dinleyicisi ekledik.[(ngModel)]<\/code> ile iki y\u00f6nl\u00fc veri ba\u011flamay\u0131 kullanarak InputText<\/code> ve Calendar<\/code> bile\u015fenlerinin de\u011ferlerini Angular bile\u015fenimizdeki de\u011fi\u015fkenlerle senkronize ettik.styleClass<\/code> ile PrimeNG’nin yard\u0131mc\u0131 stil s\u0131n\u0131flar\u0131n\u0131 kulland\u0131k (p-button-success<\/code>, p-button-danger<\/code>, p-ml-2<\/code> gibi).p-float-label<\/code> s\u0131n\u0131f\u0131, giri\u015f kutular\u0131nda etiketlerin animasyonlu bir \u015fekilde yukar\u0131 kaymas\u0131n\u0131 sa\u011flar.<\/p>\nTemaland\u0131rma ve \u00d6zelle\u015ftirme<\/h3>\n PrimeNG’nin en g\u00fc\u00e7l\u00fc y\u00f6nlerinden biri, kapsaml\u0131 temaland\u0131rma ve \u00f6zelle\u015ftirme yetenekleridir.<\/p>\n
1. \u00d6n Tan\u0131ml\u0131 Temalar<\/h4>\n PrimeNG, Material Design, Bootstrap ve kendi \u00f6zel temalar\u0131 (Lara, Saga, Arya, Vela gibi) dahil olmak \u00fczere bir\u00e7ok haz\u0131r tema sunar. angular.json<\/code> dosyas\u0131nda de\u011fi\u015ftirdi\u011finiz tema yolu, uygulaman\u0131z\u0131n genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc belirler. Farkl\u0131 temalar\u0131 deneyerek projenize en uygun olan\u0131 se\u00e7ebilirsiniz.<\/p>\n\u00d6rne\u011fin, temay\u0131 saga-orange<\/code> olarak de\u011fi\u015ftirmek i\u00e7in:<\/p>\n\n\"node_modules\/primeng\/resources\/themes\/saga-orange\/theme.css\",\n<\/code><\/pre>\n2. CSS De\u011fi\u015fkenleri ile \u00d6zelle\u015ftirme<\/h4>\n PrimeNG bile\u015fenleri, CSS de\u011fi\u015fkenlerini (CSS Custom Properties) yo\u011fun bir \u015fekilde kullan\u0131r. Bu sayede, uygulaman\u0131z\u0131n ana CSS dosyas\u0131nda veya bile\u015feninizin stil dosyas\u0131nda bu de\u011fi\u015fkenleri ge\u00e7ersiz k\u0131larak bile\u015fenlerin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc kolayca de\u011fi\u015ftirebilirsiniz.<\/p>\n
\u00d6rne\u011fin, birincil d\u00fc\u011fme rengini de\u011fi\u015ftirmek i\u00e7in src\/styles.css<\/code> dosyan\u0131za a\u015fa\u011f\u0131daki gibi bir kod ekleyebilirsiniz:<\/p>\n\n\/ src\/styles.css <\/em>\/\n:root {\n --primary-color: #673ab7; \/ Mor <\/em>\/\n --primary-color-text: #ffffff;\n}\n<\/code><\/pre>\nBu, t\u00fcm PrimeNG bile\u015fenlerinin birincil renklerini (d\u00fc\u011fmeler, vurgular vb.) g\u00fcncelleyecektir.<\/p>\n
3. PrimeFlex ile Layout Y\u00f6netimi<\/h4>\n PrimeFlex, PrimeNG ile birlikte gelen g\u00fc\u00e7l\u00fc bir CSS yard\u0131mc\u0131 k\u00fct\u00fcphanesidir. Flexbox tabanl\u0131 s\u0131n\u0131flar sa\u011flayarak duyarl\u0131 ve esnek layout’lar olu\u015fturman\u0131z\u0131 kolayla\u015ft\u0131r\u0131r. PrimeFlex’i kullanmak i\u00e7in \u00f6nce kurman\u0131z gerekir:<\/p>\n
\nnpm install primeflex --save\n<\/code><\/pre>\nArd\u0131ndan angular.json<\/code> dosyan\u0131za ekleyin:<\/p>\n\n\"styles\": [\n \"src\/styles.css\",\n \/\/ ... di\u011fer PrimeNG stilleri\n \"node_modules\/primeflex\/primeflex.css\" \/\/ PrimeFlex stilleri\n],\n<\/code><\/pre>\n\u015eablonunuzda p-d-flex<\/code>, p-flex-column<\/code>, p-ai-center<\/code>, p-mt-4<\/code> gibi s\u0131n\u0131flar\u0131 kullanarak layout’lar\u0131 kolayca y\u00f6netebilirsiniz. \u00d6rnek olarak yukar\u0131daki app.component.html<\/code> dosyas\u0131nda bu s\u0131n\u0131flar\u0131n baz\u0131lar\u0131n\u0131 kulland\u0131k.<\/p>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h3>\n PrimeNG, Angular geli\u015ftiricileri i\u00e7in g\u00fc\u00e7l\u00fc, esnek ve kapsaml\u0131 bir UI k\u00fct\u00fcphanesidir. Bu rehberde, PrimeNG’yi projenize nas\u0131l entegre edece\u011finizi, temel bile\u015fenleri nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ve uygulaman\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc nas\u0131l \u00f6zelle\u015ftirece\u011finizi \u00f6\u011frendiniz. PrimeNG’nin sundu\u011fu zengin bile\u015fen setini ve temaland\u0131rma yeteneklerini kullanarak, kullan\u0131c\u0131 dostu ve estetik a\u00e7\u0131dan ho\u015f Angular uygulamalar\u0131 geli\u015ftirebilirsiniz.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h4>\n\nPrimeIcons nedir ve neden kullanmal\u0131y\u0131m?<\/strong><\/dt>\nPrimeIcons, PrimeNG bile\u015fenlerinin \u00e7o\u011funda kullan\u0131lan, a\u00e7\u0131k kaynakl\u0131 bir ikon k\u00fct\u00fcphanesidir. PrimeNG bile\u015fenleriyle sorunsuz entegre oldu\u011fu i\u00e7in ek bir ikon k\u00fct\u00fcphanesi aray\u0131\u015f\u0131na girmenize gerek kalmaz. pi pi-check<\/code> gibi s\u0131n\u0131flarla ikonlar\u0131 kolayca kullanabilirsiniz.<\/dd>\nPrimeNG bile\u015fenlerini nas\u0131l \u00f6zelle\u015ftirebilirim?<\/strong><\/dt>\nPrimeNG bile\u015fenlerini \u00f6zelle\u015ftirmenin birka\u00e7 yolu vard\u0131r:<\/p>\n\nCSS De\u011fi\u015fkenleri:<\/strong> Temel renkler, fontlar ve di\u011fer stil \u00f6zellikleri i\u00e7in prime.css<\/code> dosyas\u0131ndaki CSS de\u011fi\u015fkenlerini kendi styles.css<\/code> dosyan\u0131zda ge\u00e7ersiz k\u0131labilirsiniz.<\/li>\nstyleClass<\/code> ve ngClass<\/code>:<\/strong> Bile\u015fenlerin styleClass<\/code> veya Angular’\u0131n ngClass<\/code> direktifleri ile kendi \u00f6zel CSS s\u0131n\u0131flar\u0131n\u0131z\u0131 uygulayabilirsiniz.<\/li>\n\u015eablonlar (Templates):<\/strong> Baz\u0131 PrimeNG bile\u015fenleri, i\u00e7 yap\u0131lar\u0131n\u0131 \u00f6zelle\u015ftirmek i\u00e7in <\/code> etiketleri arac\u0131l\u0131\u011f\u0131yla \u00f6zel \u015fablonlar tan\u0131mlaman\u0131za olanak tan\u0131r.<\/li>\n::ng-deep<\/code> (Dikkatli Kullan\u0131n):<\/strong> Eskiden s\u0131k\u00e7a kullan\u0131lan ::ng-deep<\/code> (veya \/deep\/<\/code>, >>><\/code>) kombinat\u00f6r\u00fc, bile\u015fenin kaps\u00fcllenmi\u015f stilini delip ge\u00e7mek i\u00e7in kullan\u0131l\u0131rd\u0131. Ancak bu kullan\u0131mdan kald\u0131r\u0131lm\u0131\u015ft\u0131r ve m\u00fcmk\u00fcn oldu\u011funca ka\u00e7\u0131n\u0131lmal\u0131d\u0131r. Bunun yerine CSS de\u011fi\u015fkenleri veya daha spesifik se\u00e7iciler tercih edilmelidir.<\/li>\n<\/ol>\n<\/dd>\nPrimeNG’yi Angular Standalone Bile\u015fenlerle kullanabilir miyim?<\/strong><\/dt>\nEvet, kesinlikle! Angular 14 ve sonras\u0131 ile tan\u0131t\u0131lan Standalone Bile\u015fenler, PrimeNG ile tamamen uyumludur. Her bile\u015fenin kendi TypeScript dosyas\u0131nda, imports<\/code> dizisine kullanmak istedi\u011finiz PrimeNG mod\u00fcllerini (\u00f6rne\u011fin ButtonModule<\/code>) eklemeniz yeterlidir. Ayr\u0131ca main.ts<\/code> veya app.config.ts<\/code> dosyan\u0131zda provideAnimations()<\/code>‘\u0131 eklemeyi unutmay\u0131n.<\/dd>\nPrimeNG \u00fccretli mi?<\/strong><\/dt>\nHay\u0131r, PrimeNG a\u00e7\u0131k kaynakl\u0131d\u0131r ve MIT lisans\u0131 alt\u0131nda \u00fccretsiz olarak kullan\u0131labilir. Ancak, PrimeTek (PrimeNG’nin geli\u015ftiricisi) ek \u00f6zellikler ve profesyonel temalar sunan PrimeBlocks ve PrimeTemplates gibi \u00fccretli \u00fcr\u00fcnlere de sahiptir. Temel PrimeNG k\u00fct\u00fcphanesi tamamen \u00fccretsizdir.<\/dd>\n<\/dl>\n<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Angular Uygulamalar\u0131nda PrimeNG Bile\u015fenlerini Kullanma Rehberi\nAngular uygulamalar\u0131n\u0131zda modern, \u015f\u0131k ve i\u015flevsel bir kullan\u0131c\u0131 aray\u00fcz\u00fc o","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1488],"tags":[],"class_list":{"0":"post-32269","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-angular","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
Angular Uygulamalar\u0131nda PrimeNG Bile\u015fenlerini Kullanma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Uygulamalar\u0131nda PrimeNG Bile\u015fenlerini Kullanma Rehberi\" \/>\n<meta property=\"og:description\" content=\"Angular Uygulamalar\u0131nda PrimeNG Bile\u015fenlerini Kullanma Rehberi Angular uygulamalar\u0131n\u0131zda modern, \u015f\u0131k ve i\u015flevsel bir kullan\u0131c\u0131 aray\u00fcz\u00fc o\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-19T15:42:07+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Angular Uygulamalar\u0131nda PrimeNG Bile\u015fenlerini Kullanma Rehberi\",\"datePublished\":\"2025-10-19T15:42:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/\"},\"wordCount\":1341,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Angular\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/\",\"name\":\"Angular Uygulamalar\u0131nda PrimeNG Bile\u015fenlerini Kullanma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-19T15:42:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Uygulamalar\u0131nda PrimeNG Bile\u015fenlerini Kullanma Rehberi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular Uygulamalar\u0131nda PrimeNG Bile\u015fenlerini Kullanma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"Angular Uygulamalar\u0131nda PrimeNG Bile\u015fenlerini Kullanma Rehberi","og_description":"Angular Uygulamalar\u0131nda PrimeNG Bile\u015fenlerini Kullanma Rehberi Angular uygulamalar\u0131n\u0131zda modern, \u015f\u0131k ve i\u015flevsel bir kullan\u0131c\u0131 aray\u00fcz\u00fc o","og_url":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-19T15:42:07+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"9 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Angular Uygulamalar\u0131nda PrimeNG Bile\u015fenlerini Kullanma Rehberi","datePublished":"2025-10-19T15:42:07+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/"},"wordCount":1341,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Angular"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/","name":"Angular Uygulamalar\u0131nda PrimeNG Bile\u015fenlerini Kullanma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-19T15:42:07+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-primeng-bilesenlerini-kullanma-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Uygulamalar\u0131nda PrimeNG Bile\u015fenlerini Kullanma Rehberi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=32269"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32269\/revisions"}],"predecessor-version":[{"id":32270,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32269\/revisions\/32270"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}