Implement working with sercvice page

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

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { ServiceComponent } from '@pages/service';
 import { AppContentComponent } from 'projects/ngx-tippy-demo/src/app/pages/app-content';
 import { GettingStartedComponent } from 'projects/ngx-tippy-demo/src/app/pages/getting-started';
 import { PropsComponent } from 'projects/ngx-tippy-demo/src/app/pages/props';
@@ -27,6 +28,10 @@ export const routes: Routes = [
     path: 'applying-content',
     component: AppContentComponent,
   },
+  {
+    path: 'working-with-service',
+    component: ServiceComponent,
+  },
 ];
 
 @NgModule({

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

@@ -14,6 +14,7 @@ import { ContentComponent } from '@pages/content';
 import { GettingStartedComponent } from '@pages/getting-started';
 import { NotSupportedComponent } from '@pages/not-supported';
 import { PropsComponent } from '@pages/props';
+import { ServiceComponent } from '@pages/service';
 import { UsageComponent } from '@pages/usage';
 import { SchemeService } from '@services';
 import { TuiLetModule } from '@taiga-ui/cdk';
@@ -30,7 +31,7 @@ import {
   TuiSvgModule,
   TuiThemeNightModule,
 } from '@taiga-ui/core';
-import { TuiAccordionModule, TuiBadgeModule, TuiInputModule } from '@taiga-ui/kit';
+import { TuiAccordionModule, TuiBadgeModule, TuiInputModule, TuiIslandModule } from '@taiga-ui/kit';
 import { NgDompurifySanitizer } from '@tinkoff/ng-dompurify';
 import { HIGHLIGHT_OPTIONS, HighlightModule } from 'ngx-highlightjs';
 import { NgxTippyModule } from 'ngx-tippy-wrapper';
@@ -57,6 +58,7 @@ function initialize(SchemeService: SchemeService) {
     NotSupportedComponent,
     PropsComponent,
     AppContentComponent,
+    ServiceComponent,
   ],
   imports: [
     AppRoutingModule,
@@ -72,6 +74,7 @@ function initialize(SchemeService: SchemeService) {
     TuiButtonModule,
     TuiDialogModule,
     TuiExpandModule,
+    TuiIslandModule,
     TuiInputModule,
     TuiLetModule,
     TuiLinkModule,

projects/ngx-tippy-demo/src/app/components/demo/demo.component.html

@@ -1,5 +1,5 @@
 <div
-  class="demo"
+  class="demo {{customClass}}"
   #content
 >
   <ng-content></ng-content>

projects/ngx-tippy-demo/src/app/components/demo/demo.component.scss

@@ -16,4 +16,9 @@
     border-radius: 0.75rem;
     @include transition-color-bgc;
   }
+
+  .demo.service {
+    display: flex;
+    justify-content: space-between;
+  }
 }

projects/ngx-tippy-demo/src/app/components/demo/demo.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { Schemes } from '@interfaces';
 import { DestroyService, SchemeService } from '@services';
 import { NgxTippyInstance, NgxTippyService } from 'ngx-tippy-wrapper';
@@ -12,6 +12,7 @@ import { takeUntil } from 'rxjs';
   providers: [DestroyService],
 })
 export class DemoComponent implements OnInit, AfterViewInit {
+  @Input() customClass!: string;
   @ViewChild('content', { read: ElementRef }) projectedContent!: ElementRef;
 
   constructor(

projects/ngx-tippy-demo/src/app/components/header/header.component.scss

@@ -72,6 +72,9 @@ $animation-time: 3s;
 }
 
 .header__support-icon--coffee {
+  background: var(--tui-base-03);
+  padding: 0.75rem;
+  border-radius: 50%;
   display: none;
   color: var(--tui-text-02);
   opacity: 0.8;

projects/ngx-tippy-demo/src/app/components/nav/nav.component.html

@@ -97,5 +97,61 @@
         </ul>
       </tui-expand>
     </li>
+
+    <li class="nav__item">
+      <a
+        class="nav__link"
+        tuiLink
+        routerLink="/working-with-service"
+        routerLinkActive="nav__link--active"
+      >
+        Working with service
+      </a>
+
+      <tui-expand [expanded]="isSubListExpanded">
+        <ul class="nav__sub-list">
+          <li class="nav__sub-item">
+            <a
+              class="nav__link"
+              tuiLink
+              routerLink="/working-with-service"
+              fragment="additional_methods"
+              routerLinkActive="nav__link--active"
+              [routerLinkActiveOptions]="linkActiveOptions"
+              (click)="onFragmentNav('additional_methods')"
+            >
+              Additional methods
+            </a>
+          </li>
+          <li class="nav__sub-item">
+            <a
+              class="nav__link"
+              tuiLink
+              routerLink="/working-with-service"
+              fragment="static_methods"
+              routerLinkActive="nav__link--active"
+              [routerLinkActiveOptions]="linkActiveOptions"
+              (click)="onFragmentNav('static_methods')"
+            >
+              Static methods
+            </a>
+          </li>
+          <li class="nav__sub-item">
+            <a
+              class="nav__link"
+              tuiLink
+              routerLink="/working-with-service"
+              fragment="subscription_instances_changes"
+              routerLinkActive="nav__link--active"
+              [routerLinkActiveOptions]="linkActiveOptions"
+              (click)="onFragmentNav('subscription_instances_changes')"
+            >
+              Subscription to instances changes
+            </a>
+          </li>
+        </ul>
+      </tui-expand>
+
+    </li>
   </ul>
 </div>

projects/ngx-tippy-demo/src/app/pages/service/_tests/service.component.spec.ts

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

projects/ngx-tippy-demo/src/app/pages/service/index.ts

@@ -0,0 +1 @@
+export { ServiceComponent } from './service.component';