angular and async pipe typescript complains for null

As Angular docs points here:

There are two potential workarounds to the above issues:

In the template, include the non-null assertion operator ! at the end of a nullable expression, such as <user-detail [user]="user!" />.

In this example, the compiler disregards type incompatibilities in nullability, just as in TypeScript code. In the case of the async pipe, note that the expression needs to be wrapped in parentheses, as in <user-detail [user]="(user$ | async)!" />.

Disable strict null checks in Angular templates completely.

When strictTemplates is enabled, it is still possible to disable certain aspects of type checking. Setting the option strictNullInputTypes to false disables strict null checks within Angular templates. This flag applies for all components that are part of the application.

But, instead of using the non-null assertion operator or even disabling the Angular strict checks, you could either:

1. use nullish coalescing operator (??) - available in Angular 12+:

TS:

@Component({
  template: ``,
})
export class PresentationalComponent {
  @Input() loading: boolean;
  @Input() rowData: Data[];
}

HTML:

<app-presentational
  [loading]="(loading$ | async) ?? false"
  [rowData]="(rowData$ | async) ?? []"
></app-presentational>

2. use ngAcceptInputType_*:

TS:

@Component({
  template: ``,
})
export class PresentationalComponent {
  static ngAcceptInputType_loading?: boolean | null;
  // Note that if you have `@angular/cdk` installed you can use this instead:
  // static ngAcceptInputType_loading: BooleanInput;
  static ngAcceptInputType_rowData?: Data[] | null;

  @Input() loading: boolean;
  @Input() rowData: Data[];
}

HTML:

<app-presentational
  [rowData]="rowData$ | async"
  [loading]="loading$ | async"
></app-presentational>

3. TS 4.3+: different types for getter and setter:

TS:

@Component({
  template: ``,
})
export class PresentationalComponent {
  @Input()
  // Note that if you have `@angular/cdk` installed you can use `BooleanInput` instead.
  set loading(loading: boolean | null | undefined) {
    this._loading = loading ?? false;
  }
  get loading(): boolean {
    return this._loading;
  }
  private _loading: Data[];

  @Input()
  set rowData(rowData: Data[] | null | undefined) {
    this.rowData = rowData ?? [];
  }
  get rowData(): Data[] {
    return this._rowData;
  }
  private _rowData: Data[] = [];
}

Note that nowadays you should prefer to use option 3 rather than the 2, as input setter coercion fields are being deprecated.

I can't tell from just the information you provided, but it looks the component just needs null handling when the Observable hasn't provided a value

<app-presentational 
  [rowData]="data$ | async" 
  [loading]="(loading$ | async) || false"
/>

Modify your code snippet as below. should fix null assignment error.

 <app-presentational 
   [rowData]="(data$ | async)!" 
   [loading]="(loading$ | async)!" 
   ...

Your Store State initialy is undefined that's why you getting null or you didn't declared the Store State object

1. try having initial values:

export class PresentComponent {
  @Input()
  rowData: Data[] = [];

  @Input()
  loading = false;

Also for .select you are selecting part of the state it works with strings: try converting them to string

export class EventsComponent {
  data$: Observable<Data[]> = this.store.select('data');
  loading$: Observable<boolean> = this.store.select('loading');

you can also do with multiples when going inside objects in state.

this.store.select('name1', 'name2', ...)

2. But still it would be probably null because your initial state. You can try without the | async so this will never be null

export class EventsComponent implements OnInit {
  data: Data[] = [];
  loading = false;

  constructor(private store: Store<{ data: Data[], loading: boolean}>) {
  }

  ngOnInit(): void {
    // you can do one by one
    this.store.select('data')
      .subscribe(next => this.data = next);

    this.store.select('loading')
      .subscribe(next => this.loading = next);

    // or do

    // all together
    this.store.subscribe(next => {
      this.data = next.data;
      this.loading = next.loading;
    });
  }
}