error NG8002: Can’t bind to ‘user’ since it isn’t a known property of ‘app-add-edit-box’ & Error occurs in the template of component ShowBoxComponent

Here is the exact error I am receiving from the terminal when I try to load the angular server. As some additional information when I open the localhost page, it says "Cannot GET /box".

Error: src/app/box/show-box/show-box.component.html:23:28 - error NG8002: Can't bind to 'box' since it isn't a known property of 'app-add-edit-box'.
1. If 'app-add-edit-box' is an Angular component and it has 'box' input, then verify that it is part of this module.
2. If 'app-add-edit-box' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.


23         <app-add-edit-box [box]="box" *ngIf="ActivateAddEditBoxComp"></app-add-edit-box>
                              ~~~~~~~~~~~~~

  src/app/user/show-box/show-box.component.ts:6:16
    6   templateUrl: './show-box.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ShowBoxComponent.

I am new to using angular, and I’m not sure how to fix this error. In my show.component.html file I have what is shown below, and it was taken from the bootstrap modal.

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{ModalTitle}}</h5>
        <button type="button" class="close"
          data-dismiss="modal" aria-label="Close"
          (click)="closeClick()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <app-add-edit-box [box]="box" *ngIf="ActivateAddEditBoxComp"></app-add-edit-box>
      </div>
    </div>
  </div>
</div>

Here is what I have in my show.component.ts

import { Component, OnInit } from '@angular/core';
import { SharedService } from 'src/app/shared.service';

@Component({
  selector: 'app-show-box',
  templateUrl: './show-box.component.html',
  styleUrls: ['./show-box.component.css']
})
export class ShowUserComponent implements OnInit {

  constructor(private service:SharedService) { }

  BoxList:any=[];

  ModalTitle:string;
  ActivateAddEditBoxComp:boolean=false;
  box:any;

  ngOnInit(): void {
    this.refreshBoxList();
  }

  addClick(){
    this.box={
      BoxId:0,
      Box1:"",
      Box2:"",
    }
    this.ModalTitle="Add Box";
    this.ActivateAddEditBoxComp=true;
  }

  closeClick(){
    this.ActivateAddEditBoxComp=false;
    this.refreshBoxList();
  }

  refreshBoxList(){
    this.service.getBoxList().subscribe(data=>{
      this.BoxList=data;
    })
  }

}

Here is my add-edit-box.ts file

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

@Component({
  selector: 'app-add-edit-box',
  templateUrl: './add-edit-box.component.html',
  styleUrls: ['./add-edit-box.component.css']
})
export class AddEditBoxComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Source: Ask Javascript Questions

LEAVE A COMMENT