Similar to the *ngIf structural directives, only render dom elements if they match a media query using the *ifMediaQuery directive
$ npm install @pevil/media-query
First import the MediaQueryModule,
import { MediaQueryModule } from '@pevil/media-query';
@NgModule({
imports: [MediaQueryModule],
exports: [MediaQueryModule] //if added to a SharedModule
})
export class SharedModule {}
then use it in your html template:
<img *ifMediaQuery="'(min-width: 470px)'" [src]="item?.imageUrl"