1.5.0 • Published 6 months ago
flag-pipe v1.5.0
ng-Flag Pipe
Flag Pipe : is an Angular library
that provides a pipe to [src]
attribute on <img>
to dynamically import flag image path.
Getting Started
Dependencies
- Angular 11.2.0 -> latest version
Installing
npm install flag-pipe
ORyarn add flag-pipe
ORpnpm add flag-pipe
Import
FlagPipeModule
in yourAppModule
orSharedModule
:
import { FlagPipeModule } from "flag-pipe";
Import
FlagPipeModule
inngModule
:
@NgModule({
imports: [
flagPipeModule.forRoot({
config: {
flagExtensions: "png",
flagType: "FIXED_HEIGHT",
flagSize: "h20",
},
}),
]
})
Usage :
Use
flag
pipe in your template:Use CountryCode as
->[ ISO 3166-1 alpha-2 ]
formatCountryCode
type already implemented inflag-pipe
library you can use it asCountryCode
type. REF : ISO 3166-1 alpha-2 + Country Codes in JsonUse
->flagExtension
as "png" | "svg" | "webp"flagExtension
type already implemented inflag-pipe
library you can use it asflagExtension
type.Use
->flagTypies
'WAVY' | 'FIXED_HEIGHT' | 'FIXED_WIDTH'flagTypies
type already implemented inflag-pipe
library you can use it asflagTypies
type.Use
flagSize
"w160" | "h240" | "256x192"->
FlagSize
type already implemented inflag-pipe
library you can use it asFlagSize
type.flag Type FIXED_HEIGHT FIXED_WIDTH WAVY flag Size Format h20
w20
36x27
Img
<img [src]="'qa' | flag : 'svg' : WAVY : 'w160'" />
Future Plans
- In-Progress Create a component to use it as
<flag>
tag. - Add more features to the component.
- CI/CD with Github Actions.
Acknowledgments
Inspirations.
Contributions
This project is an easy and simple project to contribute to. Feel free to open issues and pull requests.