@input on component gives error: Property 'showingSingle' does not exist on type

Question

SO I have a angular 8 application.

And I have this in the component DossierCorrespondenceComponent:

  @Input() showingSingle = false;

So that I can use it in a other component(DossierCorrespondenceListComponent). But if I do this:

<div *ngIf="!showingSingle && correspondenceEntries && correspondenceEntries.length > 0;">

Then I will get this error:

Property 'showingSingle' does not exist on type 'DossierCorrespondenceListComponent'.

So how to fix this?

Thank you

html:

<div *ngIf="!showingSingle  && correspondenceEntries && correspondenceEntries.length > 0;">
  <div class="main-row main-row-dossier">
    <section class="data-entry">
      <h3 class="dossier-header">Algemeen</h3>
      <table class="dossier-table">
        <thead class="dossier-tableheader">
          <tr>
            <th class="dossier-tablehead fixed-one-fifth">Datum</th>
            <th class="dossier-tablehead fixed-four-fifths">Onderwerp</th>
          </tr>
        </thead>
        <tbody class="dossier-tablebody">
          <tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (click)="gotoItem(i, entry.type)">
            <td>{{ entry.date | date:"dd-MM-y" }}</td>
            <td>{{ entry.name }}</td>
          </tr>
        </tbody>
      </table>
    </section>
  </div>
</div>

js:

export class DossierCorrespondenceListComponent implements OnInit {

  correspondenceEntries: DossierEntry[];

  constructor() { }

  ngOnInit() {
  }

js:

export class DossierCorrespondenceComponent implements OnInit {

  @Input()
  allCorrespondence: Array<DossierEntry>;
  @Input()
  correspondenceEntries: Array<DossierEntry>;
  @Input()
  attachmentEntries: Array<DossierEntry>;
 /*  allCorrespondence$: Observable<DossierEntry>;
  correspondenceEntries$: Observable<DossierEntry>;
  attachmentEntries$: Observable<DossierEntry>; */
  message = '';
  emptyMessageCorrespondentie = 'Geen correspondentie.';
  errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';

  correspondenceLoaded = false;

  @Input() showingSingle = false;

  single: DossierEntry;

  constructor(
    private healthAPIService: HealthAPIService,
    private prevRouterService: PreviousRouteService,
    private dossierService: DossierService
  ) {}

  ngOnInit() {
    this.healthAPIService.getDossierEntry('correspondence').subscribe(result => {
      this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
    }, msg => (this.message = this.errorMessageConnection));
  }

  handleCorrespondenceLoad(result) {
    if (result.length === 0) {
      this.message = this.emptyMessageCorrespondentie;
      return;
    }
    this.allCorrespondence = result;
    this.attachmentEntries = [];
    this.correspondenceEntries = [];

    const groups = _.groupBy(result, 'type');
    groups.correspondence.push(result);
    groups.attachments.push(result);

  }

  gotoItem(index, type: string) {
    this.showingSingle = true;

    /*    _.mapValues(type, function(group, key) {
      return type === 'correspondence' ? _.groupBy(group, 'attachments') : group;
}); */

    const groupData = _.groupBy(type, item => {
      return _.get(item, 'correspondence', 'attachments');
    });

    switch (type) {
      case 'correspondence': {
        this.single = this.correspondenceEntries[index];
        break;
      }
      case 'attachments': {
        this.single = this.attachmentEntries[index];
        break;
      }
      default: {
        break;
      }
    }
    this.showingSingle = true;
  }

  goBack(event) {
    this.showingSingle = false;
  }
}

YOu mean in here:

<tbody class="dossier-tablebody">
          <tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (click)="gotoItem(i, entry.type)">
            <td>{{ entry.date | date:"dd-MM-y" }}</td>
            <td>{{ entry.name }}</td>
          </tr>
        </tbody>

So this is the html of DossierCorospondenceComponent:

<app [noTopBar]="true">
  <h2 class="dossier-page-header">Correspondentie</h2>

  <p class="data-entry" *ngIf="!allCorrespondence">{{ message }}</p>

  <app-is-loading *ngIf="!correspondenceLoaded" message="Correspondentie wordt geladen"></app-is-loading>


  <app-dossier-correspondence-list ></app-dossier-correspondence-list>

  <app-dossier-correspondence-item
    [item]="single"
    (goBack)="goBack($event)"
    *ngIf="showingSingle">
  </app-dossier-correspondence-item>
</app>

So I have it like this:

export class DossierCorrespondenceListComponent implements OnInit {

  correspondenceEntries: DossierEntry[];

  @Input() showingSingle = false;  

  constructor() { }

  ngOnInit() {
  }

But what I have to put in here:

export class DossierCorrespondenceComponent implements OnInit {

  @Input()
  allCorrespondence: Array<DossierEntry>;
  @Input()
  correspondenceEntries: Array<DossierEntry>;
  @Input()
  attachmentEntries: Array<DossierEntry>;
 /*  allCorrespondence$: Observable<DossierEntry>;
  correspondenceEntries$: Observable<DossierEntry>;
  attachmentEntries$: Observable<DossierEntry>; */
  message = '';
  emptyMessageCorrespondentie = 'Geen correspondentie.';
  errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';

  correspondenceLoaded = false;

  @Input() showingSingle = false;

  single: DossierEntry;

  constructor(
    private healthAPIService: HealthAPIService,
    private prevRouterService: PreviousRouteService,
    private dossierService: DossierService
  ) {}

Because now it is a double property

Answer 1

You can see it said clear that showingSingle not existed in DossierCorrespondenceListComponent , you need to declare it inside DossierCorrespondenceListComponent to use it.

If you can, show us your code for DossierCorrespondenceListComponent and DossierCorrespondenceComponent to see what you want to achieve is better.

You may see document of Angular Input for more infos how to do it Angular Input

UPDATE 1

To be short: DCLC => DossierCorrespondenceListComponent and DCC for DossierCorrespondenceComponent

I see you want to display a list of DCC component, the property showingSingle need to bypass a value from DCLC.

In your ngFor loop, add showingSingle into the loop like this

<div *ngFor="let c of list">
  <DCC [showingSingle]="c"></DCC>
</div>

A side note: You should use English instead of French for the name of component, and you are working with Germans