angular-flex-picture v1.0.0

angular-flex-picture

angular-flex-picture is a small library that is meant to be used within an @angular/flex-layout project.
It provides a directive flexMedia that applies a media query to an HTML source element within a picture element.
All the breakpoint aliases defined in @angular/flex-layout are recognized.

Basic example

• Make sure @angular/flex-layout is installed otherwise npm install --save @angular/flex-layout
• Install angular-flex-picture npm install --save angular-flex-picture
• Make sure to import FlexMediaModule in the relevant module

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FlexMediaModule} from 'angular-flex-picture';

import {AppComponent} from './app.component';

@NgModule({
  imports: [BrowserModule, FlexMediaModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}

• Add the flexMedia directive. The possible values passed to the flexMedia directive are the breakpoint aliases defined in the responsive API of @angular/flex-layout.

<picture>
  <source [flexMedia]="'xs'" srcset="https://dummyimage.com/300x200/d607d6/fff.png&text=xs">
  <source [flexMedia]="'md'" srcset="https://dummyimage.com/500x300/0820d4/fff.png&text=md">
  <img src="https://dummyimage.com/600x400/ffffff/000000.png&text=default" style="width:auto;">
</picture>

More information:

• More about the picture HTML element
• Creating custom breakpoints

Support and contributing

Please feel free to open an issue.
Pull requests with the fix and a test are welcome.
To set up your local development environment, clone/fork and then run npm install and npm run install-peer.
npm run install-peer will install @angular/flex-layout that is a peer dependency for angular-flex-picture
The rest of scripts are further explained in the excellent angular library quickstart

Acknowledgements

The library was built with angular-quickstart-lib