@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

@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

{
  "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

"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

import {GeneratedSvgIcon} from './src/svg/generated-svg-icon.ts'

@Component()
class TestComponent {
  icons = {
    GeneratedSvgIcon
  }
}

8. In the template, you can now use that icon

<sg-svg-icon [icon]="icons.GeneratedSvgIcon"></sg-svg-icon>