False positive with typescript:S2376 on Angular components decorated as @Input()

Let’s say we have an Angular component:


@Component({
  selector: 'app-location-search',
  styleUrls: ['./location-search.component.scss'],
  templateUrl: './location-search.component.html'
})
export class LocationSearchComponent {
  @Input()
  set location(location: LocationAddress) {
    if (location && location.code) {
      this.searchTerm = location.city;
    }
  }
//...

This will trigger typescript:S2376 in SonarCloud, with rationale:

When an object is created with a setter for a property but without a getter for that property, the property is inaccessible and is thus useless.

However, given usage of Angular components is more along the lines of:

                        <div class="input-group">
                          <app-location-search [index]="i" [showLabel]="false"
                                                       [location]="deliveryLocations[0]"
                                                       (locationSelected)="setSelectedLocation($event)"
                          </app-location-search>
                        </div>

So you wouldn’t ever “get” the value, you’d react to the event that tells you there is a new value, which makes the rule seem like a false positive.

Hello @RowlandShaw,

Thank you for reaching out.

Indeed, it seems that the rule should make exception to setters decorated with Angular’s @Input() decorator. I created this ticket to address the false positive as soon as possible.

Cheers,
Yassin

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.