Angular: ngInclude and ngBindHtml is not a known property of div

Question

Hi I've been trying to learn Angular in the past days and I would like to use ngHtmlBind or ngInclude directives. However, when I use it and serve my app, the console says this:

Uncaught Error: Template parse errors:
Can't bind to 'ngBindHtml' since it isn't a known property of 'div'.

Uncaught Error: Template parse errors:
Can't bind to 'ngInclude' since it isn't a known property of 'div'.

I am at a loss reading the documentation. Maybe it's because I am using the CLI and directives are called differently (i.e. instead of 'ng-for', it is implemented as *ngFor)?

I tried ngFor and ngIf and they are working correctly. But when I use ngBindHtml and ngInclude, the error shows up.

Here is my code:

app.module.ts

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

import { AppComponent } from './app.component';
import { SonglistComponent } from './songlist/songlist.component';
import { ChartComponent } from './chart/chart.component';

import { DataService } from './data.service';
import { SafePipe } from './safe.pipe';

@NgModule({
  declarations: [
    AppComponent,
    SonglistComponent,
    ChartComponent,
    SafePipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

chart.component.html

<div class="chart" *ngFor="let song of dataService.currentPlaylist">
    <div class="chart-options">
        <span class="glyphicon glyphicon-remove" aria-hidden="true" (click)="closeChart()"></span>
    </div>
    <h1 class="chart-title">{{song.title}}</h1>
    <p class="chart-artist">by {{song.artist}}</p>
    <p class="chart-key">Key: {{song.key}}</p>
    <div class="chart-body" *ngBindHtml="song.chart">
    </div>
</div>

Where did you see such directives as `ngHtmlBind` and `ngInclude`? — yurzui, Jun 28 '17 at 05:13
@yurzui I was reading the documentation. Here is the link to the ngBindHtml doc: https://docs.angularjs.org/api/ng/directive/ngBindHtml — Ace Eusebio, Jun 28 '17 at 05:16
Ok i should rephrase: you are using **angular** not **angularjs** — yurzui, Jun 28 '17 at 05:21
@yurzui Yes. Would that mean that the built-in directives are different for the two? Is it possible that *angularjs* has ngBindHtml while *angular* does not? — Ace Eusebio, Jun 28 '17 at 05:23
Well, yes, of course. Those are completely different frameworks. — JB Nizet, Jun 28 '17 at 05:24
https://stackoverflow.com/questions/31548311/angular-2-html-binding — yurzui, Jun 28 '17 at 05:25
@yurzui Hey man. Thanks for this. It works! If you would post it as an answer, I will mark it as the solution. — Ace Eusebio, Jun 28 '17 at 05:29
@JBNizet Oh so that's why. I am confused all this time. I am looking at the different documentation. Everytime I Google **angular**, all the **angularjs** docs show up. It's confusing. — Ace Eusebio, Jun 28 '17 at 05:30

score 22 · Accepted Answer · edited Jun 28 '17 at 05:41

22

There is no built-in directive ngBindHtml in angular. It's from angularjs

You should use innerHTML property instead:

<div class="chart-body" [innerHTML]="song.chart"></div>

Please refer to Template Syntax portion of the angular documentation (again, not angularjs) for more information: https://angular.io/guide/template-syntax

edited Jun 28 '17 at 05:41

Ace Eusebio

403
1
7
17

answered Jun 28 '17 at 05:31

yurzui

205,937
32
433
399

Angular: ngInclude and ngBindHtml is not a known property of div

1 Answers1