javascripthtmlangularprimengangular16

Can't bind to 'pTooltip' since it isn't a known property of 'button' in angular PrimeNG


I am use Angular 16 And I use primgn16 for the project

I actually got this error when migrating Angular from version 12 to version 16 This worked well in version 12 of the project

Maybe this photo will convey my meaning better

enter image description here

Of course, I tried with this method and the problem was still the same

[pTooltip]="{{ 'COMMON.Refresh' | translate }}"

or

[pTooltip]=" ('COMMON.Refresh' | translate )"

Solution

  • Please ensure that you are having the TooltipModule imported in the same place, this component is declared inside a module! if its a standalone component, then you need to add the TooltipModule to the imports array.

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import {RouterModule} from '@angular/router';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    
    import { AppComponent }   from './app.component';
    
    import { TooltipModule } from 'primeng/tooltip';
    import { ButtonModule } from 'primeng/button';
    import { InputTextModule } from 'primeng/inputtext';
    import { RippleModule } from 'primeng/ripple';
    
    @NgModule({
      imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TooltipModule,
        ButtonModule,
        RippleModule,
        InputTextModule
      ],
      declarations: [ AppComponent ],
      bootstrap:    [ AppComponent ]
    })
    
    export class AppModule { }
    

    primeng tooltip stackblitz