Can't bind to 'matTooltipPosition' since it isn't a known property of 'button'

Viewed 13555

i'm trying to integrate a new Angular theme, so after finishing the install of dependencies

  • i got this problem

ERROR in src/app/dashboard/dashboard.component.html:171:110 - error NG8002: Can't bind to 'matTooltipPosition' since it isn't a known property of 'button'. 171
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">

                                     <td class="td-actions text-right">
                                          <button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
                                              <i class="material-icons">edit</i>
                                          </button>
                                          <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
                                              <i class="material-icons">close</i>
                                          </button>
                                      </td>

you can find the deps in this link

2 Answers

You are using the angular material components in your code afaik.

So you first need to install the @angular/material libary:

   npm i @angular/material

After installing you just import the needed component modules in your ngModule:

    import {MatTooltipModule} from '@angular/material/tooltip';
    
   @ngModule({
        imports: [..., MatTooltipModule]
     })

To get started with angular/material:

https://material.angular.io/guide/getting-started

The above answer is perfectly alright but to add some more information,

If you are using modular approach then you might need to import it into your current module too.

enter image description here

As in my case from the above image. I need to import it into my "setting-manager.module.ts"

import {MatTooltipModule} from '@angular/material/tooltip';
@ngModule({
    imports: [MatTooltipModule]
})
Related