# flag-pipe

> Flag Pipe : is an Angular library that provides a pipe to [src] attribute on to dynamically import flag image path.

Latest version **1.5.0** (published 2023-10-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install flag-pipe
pnpm add flag-pipe
yarn add flag-pipe
bun add flag-pipe
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2023-10-31 |
| First published | 2023-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 53.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mahmoudibrahim03 |
| Maintainers | mahmoud_ibrahim |
| Keywords | angular 16, angular 17, pipe, flags, country, country code, country flags, angular flags, angular country flags, javascript, typescript |

## Links

- npm: https://www.npmjs.com/package/flag-pipe
- Homepage: https://github.com/Mahmoudibrahim03/ng-angular-flags
- npm.io page: https://npm.io/package/flag-pipe

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.5.0 (latest) — 2023-10-31
- 1.3.0 — 2023-10-28
- 1.4.0 — 2023-10-28
- 1.2.0 — 2023-10-26
- 1.1.0 — 2023-10-26
- 1.0.0 — 2023-10-26

## README

# 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` 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:
-   #### Use CountryCode as `[ ISO 3166-1 alpha-2 ]` format
    <sub> -> `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)
    </sub>
-   #### Use `flagExtension` as [ "png" | "svg" | "webp" ]
    <sub> -> `flagExtension` type already implemented in `flag-pipe` library you can use it as `flagExtension` type.</sub>
-   #### Use `flagTypies` [ 'WAVY' | 'FIXED_HEIGHT' | 'FIXED_WIDTH' ]
    <sub> -> `flagTypies` type already implemented in `flag-pipe` library you can use it as `flagTypies` type.</sub>
-   #### Use `flagSize` [ "w160" | "h240" | "256x192" ]

    <sub> -> `FlagSize` type already implemented in `flag-pipe` library you can use it as `FlagSize` type.</sub>

    | flag Type        | FIXED_HEIGHT                                                  | FIXED_WIDTH                                                  | WAVY                                                               |
    | ---------------- | ------------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------ |
    | flag Size Format | ` h20`                                                        | `w20`                                                        | `36x27`                                                            |
    | Img              | ![Fixed height](https://flagpedia.net/data/flags/h20/ua.webp) | ![Fixed Width](https://flagpedia.net/data/flags/w20/ua.webp) | ![Wavy image](https://flagpedia.net/data/flags/icon/36x27/ua.webp) |

---

<br/>
Full Example :

```html [app.component.html] linenums = "1"
<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.

-   [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.

---
_Source: https://npm.io/package/flag-pipe · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._