Component doesnot load ng properties ionic

Question

I am developing angular app,

Where i have generated one component called as 'flow-breadcrumb'

flow-breadcrumb.html

<ul class="bv-flow-bar">
  <li *ngFor="let item of steps; let i = index;" [ngClass]="getActiveClass(item)" [style.width.%]="100/stepCount">
      <span>{{item}}</span>
  </li>
</ul>

flow-breadcrumb.scss

flow-breadcrumb {
    .bv-flow-bar {
        padding-left: 0 !important;
        li {
            list-style-type: none;
            float: left;
            position: relative;
            text-align: center;
            span {
                width: 2.5rem;
                height: 2.5rem;
                line-height: 2rem;
                border: 2px solid map-get($colors, primary);
                color: map-get($colors, primary);
                display: block;
                text-align: center;
                margin: 0 auto;
                border-radius: 15px;
                background-color: map-get($colors, white);
                font-weight: bold;
            }
            &:after {
                content: "";
                position: absolute;
                width: 100%;
                height: 2px;
                background-color: map-get($colors, primary);
                top: 1.2rem;
                left: -50%;
                z-index: -1;
            }
            &.bv-flow-active {
                color: map-get($colors, primary);
                span {
                    border-color: map-get($colors, primary);
                    color: map-get($colors, primary);
                }
                &:after {
                    background-color: map-get($colors, primary);
                }
                &~li {
                    span {
                        border-color: map-get($colors, lightgray);
                        border-width: 2px;
                        color: map-get($colors, lightgray);
                        font-weight: normal;
                    }
                    &:after {
                        background-color: map-get($colors, lightgray);
                    }
                }
            }
            &:first-child:after {
                content: none;
            }
        }
        &:after {
            content: '';
            display: block;
            clear: both;
        }
    }
}

flow-breadcrumb.ts

export class FlowBreadcrumbComponent implements OnInit {

  @Input()
  public stepCount: number = 0;
  @Input()
  public step: number = 0;

  public steps: Array<number> = [];


  public getActiveClass(index: number): string {
      if (this.step == index) {
          return 'bv-flow-active';
      } else {
          return '';
      }
  }

  public ngOnInit(): void {
      for (let n = 1; n <= this.stepCount; n++) {
          this.steps.push(n);
      }
  }

And in the components.module.ts

@NgModule({
    declarations: [
        FlowBreadcrumbComponent
    ],
    imports: [],
    exports: [
        FlowBreadcrumbComponent
    ]
})
export class ComponentsModule { }

I have written only those above code, when i try to run the app it shows me error:

Template parse errors: Can't bind to 'ngClass' since it isn't a known property of 'li'. ("<ul class="bv-flow-bar">
      <li *ngFor="let item of steps; let i = index;" [ERROR ->][ngClass]="getActiveClass(item)" [style.width.%]="100/stepCount">
          <span>{{item}}</span>

where i am making mistake ? please help me to find..

Answer 1

You are missing the IonicModule import on the components.module.ts Imports array.