open-index/open-npm huggingface dataset:
npm package: @sungazer/angular-utils
Description: Random Angular utilities
Latest version: 0.0.3

# @sungazer/angular-utils

Random Angular utilities


## SgModalService

Utility service for displaying modals defined as Components. Import the SgModalModule, then you can use SgModalService.

Data can be passed in and out of the modals, and close events can be differentiated by backdrop click or actual close button.

In order to use the modal service, you need to add the following imports in your SCSS styles

```scss
@import '~@angular/cdk/overlay-prebuilt.css';
@import '~@sungazer/angular-utils/src/lib/modules/modal/modal.theme';
```

## SgIcon

Utility module to display typescript based svg icons, fully tree-shakable and lazy-loadable.
By embedding icons in this way, they are automatically split by webpack in different chunks and they can be directly styled via CSS.

### Generating icons

1) Install the `ngneat/svg-generator` package
2) Add the following configuration to your package.json
```json
{
  "svgGenerator": {
    "outputPath": "<output path, e.g. ./src/svg>",
    "prefix": "",
    "srcPath": "<path where all your .svg icons are gathered e.g. ./src/assets/icons>",
    "svgoConfig": {
      "plugins": [
        {
          "removeDimensions": true,
          "cleanupAttrs": true
        }
      ]
    }
  }
}
```
3) Add the following script in the scripts section of the package.json
```json
"generate-icons": "svg-generator"
```
4) Now run `(npm run|yarn|...) generate-icons`
5) You'll find all your icons defined as .ts files in your outputPath
6) Împort the `SgSvgIconModule` to get access to the SvgIconComponent
7) In the component where you plan to use the icons, import them as public members of the component class
```ts
import {GeneratedSvgIcon} from './src/svg/generated-svg-icon.ts'

@Component()
class TestComponent {
  icons = {
    GeneratedSvgIcon
  }
}
```
8) In the template, you can now use that icon
```html
<sg-svg-icon [icon]="icons.GeneratedSvgIcon"></sg-svg-icon>
```