My linux world » Getting started

Installation node

Open your browser and go to https://nodejs.org/fr
Download and install Node 22 LTS (currently in December 2024)
Verify node installation :

$ node -v
V22.12.0

Installation ng

$ npm install -g @angular/cli

Initialize new application

$ ng new my-app --defaults --no-standalone

Verify your installation :

$ cd my-app
$ npm start

Open your browser and go to http://localhost:4200/

Install PrimeNg

$ npm install primeng @primeng/themes

update app.modules.ts file to add Provider

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// primeNG provider
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    // add primeNG providers
    provideAnimationsAsync(),
        providePrimeNG({
            theme: {
                preset: Aura
            }
        })  
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

First component

$ ng generate component my-component

update app.component.html file :

<!-- add selector -->
<app-my-component></app-my-component>

<router-outlet />

This will display on http://localhost:4200/

my-component works!

Add an InputText

First, in app.module, import InputTextModule like this :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// primeNG provider
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
import { MyComponentComponent } from './my-component/my-component.component';

// import primeNG modules
import { InputTextModule } from 'primeng/inputtext';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    MyComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // import primeNG modules
    InputTextModule,
    FormsModule
  ],
  providers: [
    // add primeNG providers
    provideAnimationsAsync(),
        providePrimeNG({
            theme: {
                preset: Aura
            }
        })  
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now you can use it in your in your my-component.component.js file :

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  standalone: false,
  templateUrl: './my-component.component.html',
  styleUrl: './my-component.component.css'
})
export class MyComponentComponent {

  // add firstname variable and initialize it to 'John'
  firstname: string='John';
}

in your my-component.component.html file :

<p>my-component works!</p>

<div class="card flex justify-center">
    <input type="text" pInputText [(ngModel)]="firstname" />
</div>

Hi {{ firstname }} !