type-bug.md

Angular 9 Project

Component

import { Component, Input } from '@angular/core';
import { MigrateFrom, MigrateTo, SelectedTenant } from '../../types';

@Component({

  selector: 'my-component',
  templateUrl: 'my-component.html',
  styleUrls: ['my-component.scss']
})

export class MyComponent {
  @Input() from: MigrateFrom;
  @Input() to: MigrateTo;
  @Input() selectedTenant?: SelectedTenant;
}

Types

export interface MigrateFrom {
  name: string;
  tenantId: string;
}

export interface MigrateTo {
  name: string;
  tenantId: string;
}

export interface SelectedTenant {
  tenantId: string;
}

HTML

<section class="mat-typography">
  <div *ngIf="to && from" class="migrate">
    <div class="curved-arrow">
      <mat-icon>arrow_downward</mat-icon>
    </div>
    <div
      [ngClass]="
        from.tenantId === selectedTenant?.tenantId
          ? 'text-semi-bold'
          : 'migrate-from'
      "
      class="mb-5 source"
      [attr.title]="from?.name"
    >
      {{ from.name }}
    </div>
    <div
      [ngClass]="{
        'text-semi-bold': to.tenantId === selectedTenant?.tenantId
      }"
      class="target"
      [attr.title]="to?.name"
    >
      {{ to.name }}
    </div>
  </div>
</section>

Copilot suggestion with incorrect types from and to are typed objects as per the component file but copilot suggests strings. https://i.lensdump.com/i/ZlA6yD.png