To add the library to your project run the following command from the root of the project:

npm install @omnidyon/ngx-snippets

You can use the snippets in two ways.

Ether by passing it a snippet config array (see: Snippet Config):

<omni-snippets [snippets]="exampleSnippets"></omni-snippets>

Or by providing the snippet in a template:

  <omni-snippets >
    <ng-template>
      {{`import { SomeClass } from 'some-file';\nexport class SomeOtherClass {\n\tproperty = 0\n\n\tdoSomething() {\n\t\treturn "did it";\n\t}\n}`}}
    </ng-template>
  </omni-snippets>

[!NOTE]
When providing a snippet in a template make sure that proper new liner(\n), tab(\t) indentation are provided as ngx snippets does not format the code, instead it provides code token recognition and styling. so code formatting is on the developer to handle.

SnippetConfig is an interface defining snippets configuration

interface SnippetConfig {
  template: string;
  format: "JavaScript" | "TypeScript" | "HTML" | "CSS";
}

Config Example:

{
    template: `
/**
 *  Comment example
 */

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    imports: [],
    template: \`
        <h1>Hello world!</h1>
    \`,
    styleUrls: ['./app.component.css'],
})

// Comment example
export class AppComponent {
    title = 'homes';
}
`,
    format: 'TypeScript',
}

When installed the snippets will come in a default style.

But you we can custom style them simply by defining desired values.

Here is a list of values we can change to custom style and there meanings

Ngx Snippets comes with prebuilt effects for you use:

Example

  <omni-snippets
    [snippets]="exampleSnippets"
    backlight="backlight-RGB"
  ></omni-snippets>

List of effect: