How To Setup PrimeNG In Angular

Apr 9, 2022 0 452

Ashmita

What is PrimeNG?

  • PrimeNG is a rich set of native angular UI components.
  • Users can make responsive websites using this framework component.
  • PrimeNG also supports the greater styling of your application.

Installation:-

Step 1: Create New Angular Project.

  • ng new myapp
  • cd myapp

Step 2: Install PrimeNG.

  • npm install primeng –save
  • npm install primeicons –save
  • npm install @angular/animations –save

Step 3: Implement CSS dependencies in angular.json.

"styles": [
                  "node_modules/primeicons/primeicons.css",
                  "node_modules/primeng/resources/themes/lara-light-indigo/theme.css",
                  "node_modules/primeng/resources/primeng.min.css",
                  "src/styles.css"
               ]

Open the app.module.ts file and write the following code in it.

import { NgModule,CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule     //implement BrowserAnimationModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
Step 4: Prime NG also supports different themes for your application. You can find that from the Prime NG website.
Step 5: Different Components used in PrimeNG for example.
1: AutoComplete
  •  AutoComplete is the User Interface feature component for the textbox.
  •  If the user enters some character in the textbox they give back to the suggestion list result.
Example:
  • app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from 'primeng/autocomplete'; 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AutoCompleteModule //import AutoCompleteModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  •  app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent 
{
  Country: string[] = ['India','Australia','Canada','Georgia','Germany','Japan'];
  output!: string[];
  search(event:any)
  {
     this.output = this.Country.filter(c => c.startsWith(event.query));
  }
}
  •  app.component.html
<div style="text-align: center;">
   <h2>Primeng AutoComplete</h2>
</div>
<div style="text-align: center;">
  <p-autoComplete [(ngModel)]="selectNumber" [suggestions]="output" (completeMethod)="search($event)" placeholder="Search" [dropdown]="true" ></p-autoComplete>
<!--Multiple Selection-->
  <p-autoComplete [(ngModel)]="selectNumber" [suggestions]="output" (completeMethod)="search($event)" [multiple]="true"></p-autoComplete>

<!--Force Selection-->
  <p-autoComplete [(ngModel)]="selectNumber" [suggestions]="output" (completeMethod)="search($event)" [forceSelection]="true"></p-autoComplete>

<!--Templating-->
  <p-autoComplete [(ngModel)]="selectNumber" [suggestions]="output" (completeMethod)="search($event)">
    <ng-template let-brand pTemplate="item">
            <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{selectNumber}}</div>
    </ng-template>
  </p-autoComplete>
</div>

2: Checkbox

  •  The Checkbox is an extension to the standard checkbox element with theming.

Example:

  •  app.module.ts 
import { NgModule  } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { CheckboxModule } from 'primeng/checkbox';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AutoCompleteModule,
    CheckboxModule        //used checkboxModule
  ],
  providers: [],
  bootstrap: [AppComponent],
     
})
export class AppModule { }
  •  app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  value!: any;
  constructor(){}
}
  •  app.component.html
<div style="text-align: center;">
  <h2>Primeng CheckBox</h2>
</div>
<div style="text-align: center;">
  <p-checkbox name="groupname" value="val1" [(ngModel)]="value" [binary]="true"></p-checkbox>
  <!--Label-->
  <p-checkbox name="groupname" value="val1" label="Value1" [(ngModel)]="value"></p-checkbox>
</div>

3: Dropdown

  •  Dropdown is used for selecting items from the list.

Example:

  •  app.module.ts
import { NgModule,CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { CheckboxModule } from 'primeng/checkbox';
import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AutoCompleteModule,
    CheckboxModule,
    DropdownModule,  //add dropdownmodule
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
  •  app.component.html
<div style="text-align: center;">
  <h2>Primeng Dropdown</h2>
</div>
<div style="text-align: center;">
  <p-dropdown [options]="country" [(ngModel)]="selectedCountry" optionLabel="name" optionValue="id"></p-dropdown>
  <!--Disabled Optins-->
  <p-dropdown [options]="country" [(ngModel)]="selectedCountry" optionLabel="name" optionDisabled="inactive"></p-dropdown>
  <!--Custome Content-->
  <p-dropdown [options]="country" [(ngModel)]="selectedCountry" optionLabel="name" [showClear]="true" placeholder="Select a Country">
    <ng-template pTemplate="selectedItem">
        <div class="country-item country-item-value"  *ngIf="selectedCountry">
            <img src="assets/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.name.toLowerCase()" />
            <div>{{selectedCountry.name}}</div>
        </div>
    </ng-template>
    <ng-template let-country pTemplate="item">
        <div class="country-item">
            <img src="assets/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.name.toLowerCase()" />
            <div>{{country.name}}</div>
        </div>
    </ng-template>
  </p-dropdown>
  <!--Virtual Scrolling-->
  <p-dropdown [options]="country" [virtualScroll]="true" itemSize="30"></p-dropdown>
  <!--Animation Configuration-->
  <p-dropdown [options]="country" [(ngModel)]="selectedCountry" [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'"></p-dropdown>
</div>
  •  app.component.ts
import { Component } from '@angular/core';

interface Country
{
  id: number,
  name: string
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  country!: Country[];
  selectedCountry!: Country;
  constructor(){
    this.country = 
    [
      {id: 1,name:'India'},
      {id: 2,name:'Australia'},
      {id: 3,name:'Canada'},
      {id: 4,name:'Georgia'},
      {id: 5,name:'Germany'},
    ];
  }
}

4: Input text

  •  Rendered the text user can enter the text.

Example:

  •  app.module.ts
import { NgModule,CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { CheckboxModule } from 'primeng/checkbox';
import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
import { InputTextModule } from 'primeng/inputtext';
import { InputNumberModule } from 'primeng/inputnumber';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AutoCompleteModule,
    CheckboxModule,
    DropdownModule,
    FormsModule,
    InputTextModule,    //add InputTextModule
    InputNumberModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
  •  app.component.html
<div style="text-align: center;">
  <h2>Primeng InputText</h2>
</div>
<div style="text-align: center;">
  <input type="text" pInputText />

  <!--Model Binding-->
  <input type="text" pInputText [(ngModel)]="name"/>

  <!--Float Label-->
  <span class="p-float-label">
    <input id="float-input" type="text" pInputText> 
    <label for="float-input">Username</label>
  </span>

  <!--icons-->
  <span class="p-input-icon-left">
    <i class="pi pi-search"></i>
    <input type="text" pInputText [(ngModel)]="name" placeholder="Search">         
  </span>

  <!--Sizes-->
  <input type="text" pInputText class="p-inputtext-sm" placeholder="Small">         
  <input type="text" pInputText class="p-inputtext-sm" placeholder="Small">         
  <input type="text" pInputText class="p-inputtext-lg"  placeholder="Large">  
</div>
  •  app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name:any;
  constructor(){}
}

5: Input Number

  •  Users can enter the number in inputNumber field.

Example:

  •  app.module.ts
import { NgModule,CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { CheckboxModule } from 'primeng/checkbox';
import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
import { InputTextModule } from 'primeng/inputtext';
import { InputNumberModule } from 'primeng/inputnumber';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AutoCompleteModule,
    CheckboxModule,
    DropdownModule,
    FormsModule,
    InputTextModule,
    InputNumberModule //add InputNumberModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
  •  app.component.html
<div style="text-align: center;">
  <h2>Primeng InputNumber</h2>
</div>
<div style="text-align: center;">
  <p-inputNumber [(ngModel)]="val"></p-inputNumber>

  <!--Decimal Mode-->
  <p-inputNumber [(ngModel)]="val" mode="decimal"></p-inputNumber>

  <!--minfraction maxfraction-->
  <p-inputNumber [(ngModel)]="val" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="2"></p-inputNumber>

  <!--United State Locale-->
  <p-inputNumber [(ngModel)]="val" mode="decimal" locale="en-US" [minFractionDigits]="2"></p-inputNumber>

  <!--Currency-->
  <p-inputNumber [(ngModel)]="val" mode="currency" currency="USD" locale="en-US"></p-inputNumber>

  <!--Prefix and Suffix-->
  <p-inputNumber [(ngModel)]="val" suffix=" mi"></p-inputNumber>  <!--Mile-->
  <p-inputNumber [(ngModel)]="val" prefix="%"></p-inputNumber>    <!--Percent--> 
  <p-inputNumber [(ngModel)]="val" prefix="Expires in " suffix=" days"></p-inputNumber>        <!--Expiry-->
  <p-inputNumber [(ngModel)]="val" prefix="↑ " suffix="℃" :min="0" :max="40"></p-inputNumber> <!--Temperature-->

  <!--Button-->
  <p-inputNumber [(ngModel)]="val" [showButtons]="true" mode="currency" currency="USD"></p-inputNumber>  <!--Stacked--> 
  
  <!--Step-->
  <p-inputNumber [(ngModel)]="val" [step]="0.25"></p-inputNumber> 

  <!--Min and Max Boundaries-->
  <p-inputNumber [(ngModel)]="val" [min]="0" [max]="100"></p-inputNumber>
</div>
  •  app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  val!:any;
  constructor(){
  }
}

6: Radio Button

  •  RadioButton is an extension to the standard radio button element with theming.

Example:

  •  app.module.ts
import { NgModule,CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { CheckboxModule } from 'primeng/checkbox';
import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
import { InputTextModule } from 'primeng/inputtext';
import { InputNumberModule } from 'primeng/inputnumber';
import { RadioButtonModule } from 'primeng/radiobutton';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AutoCompleteModule,
    CheckboxModule,
    DropdownModule,
    FormsModule,
    InputTextModule,
    InputNumberModule,
    RadioButtonModule    //add RadioButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
  •  app.component.html
<div style="text-align: center;">
  <h2>Primeng RadioButton</h2>
</div>
<div style="text-align: center;">
  <p-radioButton name="name" value="val" [(ngModel)]="selectedValue"></p-radioButton>

  <!--Label-->
  <p-radioButton name="name" value="val" label="Female" [(ngModel)]="selectedValue"></p-radioButton>
</div>
  •  app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedValue!:any;
  constructor(){}
}

7: Button

  •  The button is an extension to the standard button element with icons.

Example:

  •  app.module.ts
import { NgModule,CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { CheckboxModule } from 'primeng/checkbox';
import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
import { InputTextModule } from 'primeng/inputtext';
import { InputNumberModule } from 'primeng/inputnumber';
import { RadioButtonModule } from 'primeng/radiobutton';
import { ButtonModule } from 'primeng/button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AutoCompleteModule,
    CheckboxModule,
    DropdownModule,
    FormsModule,
    InputTextModule,
    InputNumberModule,
    RadioButtonModule,
    ButtonModule           //add ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
  •  app.component.html
<div style="text-align: center;">
  <h2>Primeng Button</h2>
</div>
<div style="text-align: center;">
  <!--Label-->
  <p-button label="Click" ></p-button>

  <!--icon-->
  <p-button label="Click" icon="pi pi-check" iconPos="left"></p-button>

  <!--Events-->
  <p-button label="Click" (onClick)="handleClick($event)"></p-button>

  <!--Text Buttons-->
  <button pButton type="button" label="Submit" class="p-button-text"></button>

  <!--Raised and rounded Button-->
  <button pButton type="button" class="p-button-raised p-button-rounded"></button>
</div>

8: Table

  •  The table is used to display data in tabular format.
  •  npm install @angular/cdk —save
  •  app.module.ts
import { NgModule,CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { CheckboxModule } from 'primeng/checkbox';
import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
import { InputTextModule } from 'primeng/inputtext';
import { InputNumberModule } from 'primeng/inputnumber';
import { RadioButtonModule } from 'primeng/radiobutton';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AutoCompleteModule,
    CheckboxModule,
    DropdownModule,
    FormsModule,
    InputTextModule,
    InputNumberModule,
    RadioButtonModule,
    ButtonModule,
    TableModule          //add TableModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
  •  app.component.html
<div style="text-align: center;">
<h2>Primeng Table</h2>
</div>
<div style="text-align: center;">
  <p-table [value]="customer">
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Email</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-customer>
        <tr>
            <td>{{customer.name}}</td>
            <td>{{customer.address}}</td>
            <td>{{customer.email}}</td>
        </tr>
    </ng-template>
</p-table>
</div>
  •  app.component.ts
import { Component } from '@angular/core';

export interface Customer {
  name:string;
  address:string;
  email:string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  customer!: Customer[];
  constructor(){
    this.customer =
    [
      {name:'priyanka',address:'surat',email:'priyanka@gmail.com'},
      {name:'divya',address:'ahemdabad',email:'divya@gmail.com'},
      {name:'krishna',address:'navsari',email:'krishna@gmail.com'},
      {name:'riya',address:'surat',email:'riya@gmail.com'},
      {name:'nitya',address:'bombay',email:'nitya@gmail.com'}
    ];
  }
}

Ashmita

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories