demo/2.0: Add getting-started component

projects/ngx-tippy-demo/src/app/app-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { GettingStartedComponent } from '@components/getting-started';
+
+export const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'getting-started',
+    pathMatch: 'full',
+  },
+  {
+    path: 'getting-started',
+    component: GettingStartedComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { useHash: true, preloadingStrategy: PreloadAllModules })],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

projects/ngx-tippy-demo/src/app/app.module.ts

@@ -2,7 +2,8 @@ import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { TDemoContentComponent } from '@components/t-demo-content/t-demo-content.component';
+import { GettingStartedComponent } from '@components/getting-started';
+import { TDemoContentComponent } from '@components/t-demo-content';
 import { TDemoFooterComponent } from '@components/t-demo-footer';
 import { TDemoHeaderComponent } from '@components/t-demo-header';
 import { TDemoNavComponent } from '@components/t-demo-nav';
@@ -21,8 +22,10 @@ import {
 } from '@taiga-ui/core';
 import { TuiInputModule } from '@taiga-ui/kit';
 import { NgDompurifySanitizer } from '@tinkoff/ng-dompurify';
+import { HighlightModule } from 'ngx-highlightjs';
 import { NgxTippyModule } from 'ngx-tippy-wrapper';
 import { SchemeService } from '../services/scheme-service';
+import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 function initialize(SchemeService: SchemeService) {
@@ -38,8 +41,10 @@ function initialize(SchemeService: SchemeService) {
     TDemoContentComponent,
     TDemoSchemeSwitcherComponent,
     TDemoSocialComponent,
+    GettingStartedComponent,
   ],
   imports: [
+    AppRoutingModule,
     BrowserModule,
     NgxTippyModule,
     TuiRootModule,
@@ -53,6 +58,7 @@ function initialize(SchemeService: SchemeService) {
     TuiModeModule,
     TuiLetModule,
     TuiThemeNightModule,
+    HighlightModule,
   ],
   providers: [
     { provide: TUI_SANITIZER, useClass: NgDompurifySanitizer },

projects/ngx-tippy-demo/src/components/getting-started/_tests/getting-started.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GettingStartedComponent } from '../getting-started.component';
+
+describe('GettingStartedComponent', () => {
+  let component: GettingStartedComponent;
+  let fixture: ComponentFixture<GettingStartedComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [GettingStartedComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GettingStartedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ngx-tippy-demo/src/components/getting-started/getting-started.component.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { HighlightLoader } from 'ngx-highlightjs';
+
+const themeGithub: string = 'node_modules/highlight.js/styles/github.css';
+const themeAndroidStudio: string = 'node_modules/highlight.js/styles/androidstudio.css';
+
+@Component({
+  selector: 'getting-started',
+  templateUrl: './getting-started.component.html',
+  styleUrls: ['./getting-started.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GettingStartedComponent implements OnInit {
+  code = `function myFunction() {
+    document.getElementById("demo1").innerHTML = "Test 1!";
+    document.getElementById("demo2").innerHTML = "Test 2!";
+  }`;
+
+  currentTheme: string = themeGithub;
+
+  constructor(private hljsLoader: HighlightLoader) {}
+
+  ngOnInit(): void {}
+
+  changeTheme() {
+    this.currentTheme = this.currentTheme === themeGithub ? themeAndroidStudio : themeGithub;
+    this.hljsLoader.setTheme(this.currentTheme);
+  }
+}

projects/ngx-tippy-demo/src/components/getting-started/index.ts

@@ -0,0 +1 @@
+export { GettingStartedComponent } from './getting-started.component';

projects/ngx-tippy-demo/src/components/t-demo-content/t-demo-content.component.html

@@ -1 +1 @@
-<p>t-demo-content works!</p>
+<router-outlet></router-outlet>

tsconfig.json

@@ -11,6 +11,9 @@
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "paths": {
       "ngx-tippy-wrapper": [
         "dist/ngx-tippy-wrapper/ngx-tippy-wrapper",