Can't bind to 'ng-class' since it isn't a known property of 'p'.

[Arun Nair]

I get this error for  <p [ng-class]="{redborder: true}"> This is styled </p>  in my html file. What could be wrong?

My css file has

.redborder {

    border: 1px solid red;

}

My .ts file has 

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

@Component({

  selector: 'app-databinding-component',

  templateUrl: './databinding-component.component.html',

  styleUrls: ['./databinding-component.component.css']

})

export class DatabindingComponentComponent 

{

    stringinterpolation  = "This is string interpolation";

    numberinterpolation = 4; 

}

app.module.ts

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

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

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

// import { MainMenuComponent } from './main-menu/main-menu.component';

import { DatabindingComponentComponent } from './databinding-component/databinding-component.component';

@NgModule({

  declarations: [

    AppComponent,

    // MainMenuComponent,

    DatabindingComponentComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

main.ts

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

import { environment } from './environments/environment';

import { AppModule } from './app/app.module';

if (environment.production) {

  enableProdMode();

}

platformBrowserDynamic().bootstrapModule(AppModule);

Thanks,

Arun