ng-Flag Pipe
[ Component In-progress ]
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";
@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 ]
format->
CountryCode
type already implemented inflag-pipe
library you can use it asCountryCode
type. REF : ISO 3166-1 alpha-2 + Country Codes in Json -
Use
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
Full Example :
<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.