{"id":2071,"date":"2024-12-22T09:56:17","date_gmt":"2024-12-22T08:56:17","guid":{"rendered":"https:\/\/blog.rabahi.net\/?page_id=2071"},"modified":"2024-12-22T12:04:51","modified_gmt":"2024-12-22T11:04:51","slug":"getting-started","status":"publish","type":"page","link":"https:\/\/blog.rabahi.net\/?page_id=2071","title":{"rendered":"Getting started"},"content":{"rendered":"\n<p class=\"has-medium-font-size\"><strong>Installation node<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open your browser and go to <a href=\"https:\/\/nodejs.org\/fr\">https:\/\/nodejs.org\/fr<\/a><\/li>\n\n\n\n<li>Download and install Node 22 LTS (currently in December 2024)<\/li>\n\n\n\n<li class=\"has-small-font-size\">Verify node installation :<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code aligncenter\"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\n$ node -v\nV22.12.0\n<\/pre><\/div>\n\n\n<p class=\"has-medium-font-size\"><strong>Installation ng<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\n$ npm\u00a0install\u00a0-g\u00a0@angular\/cli\n<\/pre><\/div>\n\n\n<p class=\"has-medium-font-size\"><strong>Initialize new application<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\n$ ng\u00a0new\u00a0my-app --defaults --no-standalone\n<\/pre><\/div>\n\n\n<p>Verify your installation :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\n$ cd my-app\n$ npm start\n<\/pre><\/div>\n\n\n<p><br>Open your browser and go to <a href=\"http:\/\/localhost:4200\/\">http:\/\/localhost:4200\/<\/a><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Install PrimeNg<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\n$ npm install primeng @primeng\/themes\n<\/pre><\/div>\n\n\n<p>update <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-amber-color\">app.modules.ts<\/mark> file to add Provider<br><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\n\nimport { AppRoutingModule } from '.\/app-routing.module';\nimport { AppComponent } from '.\/app.component';\n\n\/\/ primeNG provider\nimport { provideAnimationsAsync } from '@angular\/platform-browser\/animations\/async';\nimport { providePrimeNG } from 'primeng\/config';\nimport Aura from '@primeng\/themes\/aura';\n\n@NgModule({\n  declarations: &#x5B;\n    AppComponent\n  ],\n  imports: &#x5B;\n    BrowserModule,\n    AppRoutingModule\n  ],\n  providers: &#x5B;\n    \/\/ add primeNG providers\n    provideAnimationsAsync(),\n        providePrimeNG({\n            theme: {\n                preset: Aura\n            }\n        })  \n  ],\n  bootstrap: &#x5B;AppComponent]\n})\nexport class AppModule { }\n\n<\/pre><\/div>\n\n\n<p class=\"has-medium-font-size\"><strong>First component<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\n$ ng generate component my-component\n<\/pre><\/div>\n\n\n<p>update <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-amber-color\">app.component.html<\/mark> file :<br><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!-- add selector --&gt;\n&lt;app-my-component&gt;&lt;\/app-my-component&gt;\n\n&lt;router-outlet \/&gt;\n<\/pre><\/div>\n\n\n<p>This will display on <a href=\"http:\/\/localhost:4200\/\">http:\/\/localhost:4200\/<\/a> <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nmy-component works!\n<\/pre><\/div>\n\n\n<p class=\"has-medium-font-size\"><strong>Add an InputText<\/strong><\/p>\n\n\n\n<p>First, in app.module, import InputTextModule like this :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\n\nimport { AppRoutingModule } from '.\/app-routing.module';\nimport { AppComponent } from '.\/app.component';\n\n\/\/ primeNG provider\nimport { provideAnimationsAsync } from '@angular\/platform-browser\/animations\/async';\nimport { providePrimeNG } from 'primeng\/config';\nimport Aura from '@primeng\/themes\/aura';\nimport { MyComponentComponent } from '.\/my-component\/my-component.component';\n\n\/\/ import primeNG modules\nimport { InputTextModule } from 'primeng\/inputtext';\nimport { FormsModule } from '@angular\/forms';\n\n@NgModule({\n  declarations: &#x5B;\n    AppComponent,\n    MyComponentComponent\n  ],\n  imports: &#x5B;\n    BrowserModule,\n    AppRoutingModule,\n    \/\/ import primeNG modules\n    InputTextModule,\n    FormsModule\n  ],\n  providers: &#x5B;\n    \/\/ add primeNG providers\n    provideAnimationsAsync(),\n        providePrimeNG({\n            theme: {\n                preset: Aura\n            }\n        })  \n  ],\n  bootstrap: &#x5B;AppComponent]\n})\nexport class AppModule { }\n<\/pre><\/div>\n\n\n<p>Now you can use it in your in your my-component.component.js file :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { Component } from '@angular\/core';\n\n@Component({\n  selector: 'app-my-component',\n  standalone: false,\n  templateUrl: '.\/my-component.component.html',\n  styleUrl: '.\/my-component.component.css'\n})\nexport class MyComponentComponent {\n\n  \/\/ add firstname variable and initialize it to 'John'\n  firstname: string='John';\n}\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nin your my-component.component.html file :\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;p&gt;my-component works!&lt;\/p&gt;\n\n&lt;div class=&quot;card flex justify-center&quot;&gt;\n    &lt;input type=&quot;text&quot; pInputText &#x5B;(ngModel)]=&quot;firstname&quot; \/&gt;\n&lt;\/div&gt;\n\nHi {{ firstname }} !\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>Installation node Installation ng Initialize new application Verify your installation : Open your browser and go to http:\/\/localhost:4200\/ Install PrimeNg update app.modules.ts file to add Provider First component update app.component.html file : This will display on http:\/\/localhost:4200\/ Add an InputText First, in app.module, import InputTextModule like this : Now you can use it in your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2069,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2071","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/pages\/2071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2071"}],"version-history":[{"count":61,"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/pages\/2071\/revisions"}],"predecessor-version":[{"id":2134,"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/pages\/2071\/revisions\/2134"}],"up":[{"embeddable":true,"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/pages\/2069"}],"wp:attachment":[{"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}