TypeScript error- This condition will always return 'false' since the types 'boolean' and 'string' have no overlap

Question

I am adding ngIf condition in ng-container where if the condition satisfies then display the component

The problem I am facing is I am getting error

 This condition will always return 'false' since the types 'boolean' and 'string' have no overlap.

When I set condition as (When I use not operator after &&)

<ng-container *ngIf="data.dataClass === 'Dokes'
       && !data.dataSubclass === 'Land'"> ------------------>   NOT OPERATOR

But the code works fine when I remove the ! operator in && !data.dataSubclass === 'Land'

I do not know why it is giving me the error. I want to add ! operator as I want to display component when data.dataSubclass is not equal to 'Land'

.html file

  <div>
      <ng-container *ngIf="data.dataClass === 'Dokes' 
       && !data.dataSubclass === 'Land'">-----------------------------> ERRORRR

!----- BELOW IS THE COMPONENT TO DISPLAY IF ABOVE CONDITION IS TRUE---------!
          <money-property name="Pika" [model]="data.pika"
                    [editMode]="!!dataEditService.editMode">
      <dl>
        <dd *ngFor="let d of data.pika; index as i">
          <edit-link dataClass="Dokes" 
                     [(selectedElement)]="data.pika[i]" [editMode]="!!dataEditService.editMode"></edit-link>
        </dd>
        
      </dl>
    </money-property>
  </ng-container>
  </div>

Answer 1

Adding ! throws off the logic you're trying to implement because it'll negate the value just to the right of it. This:

&& !data.dataSubclass === 'Land'

is equivalent to

&& (!data.dataSubclass) === 'Land'

which of course doesn't make sense - a boolean won't ever compare to 'Land'. You need:

&& !(data.dataSubclass === 'Land')

But a clearer approach would be:

&& data.dataSubclass !== 'Land'