Sanity Usage in Component

sanity-movies.component.ts

export interface Movie {
    _id: String,
    title: String,
    releaseDate: Date,
    poster: SanityImageSource, // = string | SanityReference | SanityAsset | SanityImageObject etc.
}

@Component({
  selector: 'app-movies',
  template: `
    <main class="container">
      <div *ngFor="let movie of movies$ | async">
        <img [src]="movie.poster | sanityImage:200" />
        <h3>{{ movie.title }}</h3>
        <p>Released on {{ movie.releaseDate | date }}</p>
      </div>
    </main>
  `,
  styleUrls: ['./movies.component.css']
})
export class MoviesComponent implements OnInit {
  movies$: Observable<Movie[]>
    
  constructor(private sanityService: SanityService ) { 
     this.movies$ = this.sanityService.fetch<Movie[]>(
      `*[_type == "movie"]{
        _id,
        title,
        releaseDate,
        poster
      }`
     )  
  }
}