The image-grid was designed thinking about getting many results. However, in cases the number of results do not fit the first row, the images' borders appear distorted.

• Generalized the logic in image-grid when getting less than four images;
• The grid is still responsive as before

Example: When the screen-width > 1520px, the images appear like this:

Depending on the usecase, using one of these methods:

• .unsubscribe()
• take(#n) / takeUntil($event)/first()

explore the option of using the decorator '@AutoUnsub'

https://blog.bitsrc.io/6-ways-to-unsubscribe-from-observables-in-angular-ab912819a78f
Main takeaways of: https://medium.com/swlh/basic-reactive-patterns-in-angular-b404bc127a0a

• Subscribe to your observables using the async pipe
• Use the switchMap operator when you only care about the action completing based on the latest value of the source observable
• Minimize change detection cycles on component initialization by using combineLatest
• Make use of pipeable operators like map to do any data transformation/manipulations inside of your component class

Instead of using the capitalizePipe, it would be leaner to use the built-in TitleCasePipe, in the current use cases.

https://angular.io/api/common/TitleCasePipe

When screen-width is bellow 1350px and the subbreed search input is enabled, the content seems to be cluttered:

• Added visual highlight in the nav bar corresponding to the active route.
• Configure the navigation form to show the active route as default input.

The components are too smart, it is good idea to move some logic to the business services.

• Search bar instead of search dropdowns.
• Include a suitable debounce time

An example of component implementation:

const source = fromEvent(input, 'input');

source.pipe(
  debounceTime(300),
  map(event => (event.target as HTMLInputElement).value),
  switchMap(query => makeSearchRequest(query))
).subscribe(results => console.log(results));