Angular: Why is ngClass not working with my boolean?

You are using the AngularJS (1.x) version of ng-class

You need to use the Angular 4 version

<div [ngClass]="{'dog-ear': isDogEared}"></div>

Select allOpen in new window

Just an aside - you can style odd pieces using straight CSS

What is it that is specifically AnuglarJS(1.x)?

I added
import { NgClass } from '@angular/common';

but could not get either:
<div ng-class="{ 'dog-ear' : isDogEared }"></div>

nor

    <div [NgClass]="{ 'dog-ear' : isDogEared }"></div>

to work.

ng-class => Angular 1.x
[ngClass] =>  Angular 4

Here is my code that works
Puzzle Component HTML

<div class="puzzle-piece">
  <img src="assets/images/{{value}}.jpg" />
  <div [ngClass]="{'dog-ear': isDogEared}"></div>
</div>

Select allOpen in new window

Component ts

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

@Component({
  selector: 'puzzle-piece',
  templateUrl: './puzzle-piece.component.html',
  styleUrls: ['./puzzle-piece.component.css']
})
export class PuzzlePieceComponent implements OnInit {
@Input() value:String;
@Output() isDogEared:boolean;
dogEarIndexes: number[];

  constructor() { 
    this.dogEarIndexes = [ 1,3,5 ];
  }

  ngOnInit() {
    this.isDogEared = this.dogEarIndexes.indexOf(+this.value) > -1;
  }
}

Select allOpen in new window

Canvas template

<div class="puzzle">
    <puzzle-piece *ngFor="let item of piece, let i = index" [value]="item" [pos]="i"></puzzle-piece>
</div>

Select allOpen in new window

Working sampler here

Note your use of @Output (which I copied in my code) is not quite correct. It should be an event Emitter not a boolean.

Rather make your boolean a normal property and if you need to send it up the hierarchy do so through an event emitter

I have a few questions about your code versus mine.

1)
I use:
  @Input() value:PuzzlePieceComponent;

but you use:
  @Input() value:string;

isn't it better to be binding to the actual object type?

2)
I see you set a "pos" value in the HTML. But I do not see what I expected in the Typescript file:

  @Input() pos:number;

isn't it better to be binding to the actual object type?

Depends on implementation - I am not using objects - my demo is just numbers in an array

I see you set a "pos" value in the HTML. But I do not see what I expected in the Typescript file:

The sample I use is multi-purposed so sometimes things are left behind from previous samples.

Pos is one of them - it is not actually used and should be ignored in this context.

I am trying to make my code look more like yours, but get an exception:

Uncaught Error: Template parse errors:
Can't bind to 'NgClass' since it isn't a known property of 'div'. ("<div class="puzzle-piece">
    <img src="../../../assets/images/{{ imageFilename }}" />  
    <div [ERROR ->][NgClass]="{ 'dog-ear' : isDogEared }"></div>
</div>"): ng:///AppModule/PuzzlePieceComponent.html@2:9

I changed to use a string and removed @Output:

  @Input() value:string;
  isDogEared:boolean;

I get the same error with and without the following:
import { NgClass } from '@angular/common';

HTML

<div class="puzzle">
    <puzzle-piece *ngFor="let piece of pieces, let i=index" [value]="piece" [id]="i"></puzzle-piece>
</div>

Select allOpen in new window

Thanks!

You are welcome.