Components

Query Container

The QueryContainer is a wrapper around other components which request data from a query, such as from the HttpClient or an QueryRef from Apollo. As long as no error is thrown and no data is present in the QueryResult, the component displays a loading indicator.

Before and after the query is resolved.

Selector

<cause-query-container>

Inputs

@Input() query: Observable<QueryResult<any>>

Example

app.component.ts

...
import { QueryResult } from @evalink/cause

@Component{...}
export class AppComponent implements onInit {

   @Input()
   path!: string;
   
   data!: Observable<QueryResult<Page>> = new BehaviourSubject({
      loading: true,
      error: null,
      data: null
   });
   
   constructor(private httpClient: HttpClient){}
   
   ngOnInit(): void {
      this.data = this.httpClient.get(this.path).pipe(
         tab((response)=>{
            this.data.next({
             loading: false,
             error: null,
             data: response,
            });
         })
      )
   }
   ...
}

app.component.html

<cause-query-container [query]="data">
    <example-components></example-components>
</cause-query-container>

app.module.ts

@Module({
    ...,
    imports [
        ...,
        CauseModule,
        ...,
    ],
    ...
})
export class AppModule {}