https://github.com/mahmoudibrahim03/ng-flag-pipe
Cutom pipe returns flags pipe dynamically with options [Shape , Size , extention]
https://github.com/mahmoudibrahim03/ng-flag-pipe
angular open-source pipe ts typescript
Last synced: about 1 month ago
JSON representation
Cutom pipe returns flags pipe dynamically with options [Shape , Size , extention]
- Host: GitHub
- URL: https://github.com/mahmoudibrahim03/ng-flag-pipe
- Owner: Mahmoudibrahim03
- Created: 2023-10-24T23:45:24.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-31T22:11:47.000Z (over 2 years ago)
- Last Synced: 2024-10-14T12:02:42.420Z (over 1 year ago)
- Topics: angular, open-source, pipe, ts, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/flag-pipe
- Size: 345 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ng-Flag Pipe
[ Component In-progress ]
## Flag Pipe : is an Angular library
#### that provides a pipe to `[src]` attribute on `![]()
` to dynamically import flag image path.
## Getting Started
### Dependencies
- Angular 11.2.0 -> latest version
### Installing
- `npm install flag-pipe` OR
`yarn add flag-pipe` OR
`pnpm add flag-pipe`
- #### Import `FlagPipeModule` in your `AppModule` or `SharedModule`:
```typescript [AppModule.ts] linenums = "1"
import { FlagPipeModule } from "flag-pipe";
```
- #### Import `FlagPipeModule` in `ngModule`:
```typescript [AppModule.ts] linenums = "1"
@NgModule({
imports: [
flagPipeModule.forRoot({
config: {
flagExtensions: "png",
flagType: "FIXED_HEIGHT",
flagSize: "h20",
},
}),
]
})
```
### Usage :
- #### Use `flag` pipe in your template (Required):
- #### Use CountryCode as `[ ISO 3166-1 alpha-2 ]` format
-> `CountryCode` type already implemented in `flag-pipe` library you can use it as `CountryCode` type.
REF : [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) +
[Country Codes in Json](https://flagcdn.com/en/codes.json)
- #### Use `flagExtension` as [ "png" | "svg" | "webp" ]
-> `flagExtension` type already implemented in `flag-pipe` library you can use it as `flagExtension` type.
- #### Use `flagTypies` [ 'WAVY' | 'FIXED_HEIGHT' | 'FIXED_WIDTH' ]
-> `flagTypies` type already implemented in `flag-pipe` library you can use it as `flagTypies` type.
- #### Use `flagSize` [ "w160" | "h240" | "256x192" ]
-> `FlagSize` type already implemented in `flag-pipe` library you can use it as `FlagSize` type.
| flag Type | FIXED_HEIGHT | FIXED_WIDTH | WAVY |
| ---------------- | ------------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------ |
| flag Size Format | ` h20` | `w20` | `36x27` |
| Img |  |  |  |
---
Full Example :
```html [app.component.html] linenums = "1"
![]()
```
## Future Plans
- [ In-Progress ] Create a component to use it as `` tag.
- [ ] Add more features to the component.
- [ ] CI/CD with Github Actions.
## Acknowledgments
Inspirations.
- [FlagPedia](https://flagpedia.net/download/api)
## Contributions
This project is an easy and simple project to contribute to. Feel free to open issues and pull requests.