https://github.com/navsgh/katex-expression-ng
Angular 8 example for <katex-expression> web component
https://github.com/navsgh/katex-expression-ng
angular8 katex stenciljs stenciljs-components webcomponents
Last synced: 16 days ago
JSON representation
Angular 8 example for <katex-expression> web component
- Host: GitHub
- URL: https://github.com/navsgh/katex-expression-ng
- Owner: navsgh
- License: mit
- Created: 2019-07-25T10:49:17.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T08:08:55.000Z (over 3 years ago)
- Last Synced: 2025-04-14T16:46:27.944Z (about 1 year ago)
- Topics: angular8, katex, stenciljs, stenciljs-components, webcomponents
- Language: TypeScript
- Size: 2.61 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# katex-expression-ng
katex-expression-ng demonstrates how to use the [``](https://github.com/navsgh/katex-expression) web component in an Angular 2+ project. This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.1.2.
## Instructions
### Try this demo:
```bash
git clone https://github.com/navsgh/katex-expression-ng.git
ng serve
```
Navigate to `http://localhost:4200/`.
### Include `` to an existing Angular 2+ project:
1. **Install ``**
```bash
npm i --save @navsnpm/katex-expression
```
2. **Include `CUSTOM_ELEMENTS_SCHEMA` in `app.module.ts`**
Refer to the comment _"// for `` web component"_ for specific lines
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// for web component
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
// for web component
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [AppComponent]
})
export class AppModule { }
```
3. **Invoke `defineCustomElements` in `main.ts`**
Refer to the comment _"// for `` web component_" for specific lines
```typescript
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
// for web component
import { defineCustomElements as defineKatex } from '@navsnpm/katex-expression/loader';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
// for web component
defineKatex(window);
```
## License
`katex-expression-ng` is licensed under the [MIT License](http://opensource.org/licenses/MIT).