Frontender Libs - обзор библиотек JS / CSS

.window.top { 
  position: absolute;
  transform: rotate(120deg);
  overflow: hidden;
}

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

@Component({
  selector: 'app-performance',
  template: `<div>{{ counter }}</div>`
})
export class PerformanceComponent {
  counter = 0;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.cdr.detach(); // Отключаем отслеживание изменений
    setInterval(() => {
      this.counter++; // Обновляем данные
      this.cdr.detectChanges(); // Вручную запускаем проверку изменений
    }, 1000);
  }
}

import { inject, runInInjectionContext, Injectable, EnvironmentInjector } from '@angular/core';

@Injectable({ providedIn: 'root' })
class MyService {
  logMessage() {
    console.log('Hello from MyService!');
  }
}

function executeWithDI(injector: EnvironmentInjector) {
  runInInjectionContext(injector, () => {
    const myService = inject(MyService);
    myService.logMessage();
  });
}

typescriptimport { Injectable, ErrorHandler } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { retryWhen, delay, scan } from 'rxjs/operators';

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  constructor(private http: HttpClient) {}

  retryRequest(url: string) {
    this.http.get(url).pipe(
      retryWhen(errors =>
        errors.pipe(
          scan((attempts) => {
            if (attempts >= 5) throw errors;
            return attempts + 1;
          }, 0),
          delay(attempts => Math.pow(2, attempts) * 1000) // Экспоненциальная задержка
        )
      )
    ).subscribe(data => console.log('Success:', data));
  }
}

typescript  
import { ApplicationRef, Component } from '@angular/core';  

@Component({  
  selector: 'app-manual-tick',  
  template: `<p>{{ message }}</p>`,  
})  
export class ManualTickComponent {  
  message = 'Ожидание...';  

  constructor(private appRef: ApplicationRef) {  
    setTimeout(() => {  
      this.message = 'Изменение произошло';  
      this.appRef.tick(); // Обновляем вручную  
    }, 3000);  
  }  
}  

@Injectable({ providedIn: 'root' })
export class ConfigService {
  constructor(public config: string) {}
}

@Component({
  selector: 'app-parent',
  providers: [{ provide: ConfigService, useValue: new ConfigService('Parent Config') }],
  template: `<app-child></app-child>`,
})
export class ParentComponent {}

@Component({
  selector: 'app-child',
  providers: [{ provide: ConfigService, useValue: new ConfigService('Child Config') }],
  template: `{{ configService.config }}`,
})
export class ChildComponent {
  constructor(@SkipSelf() public configService: ConfigService) {}
}

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

class LoggerService {
  log(message: string) {
    console.log('Logger:', message);
  }
}

// Создаем локальный инжектор с конфигурацией
const injector = Injector.create({
  providers: [
    { provide: LoggerService, useClass: LoggerService }
  ]
});

// Получаем экземпляр LoggerService из инжектора
const logger = injector.get(LoggerService);
logger.log('Динамическое создание зависимости выполнено!');

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.form = this.fb.group({
    password: ['', Validators.required],
    confirmPassword: ['']
  });
  this.form.get('confirmPassword')?.setValidators([
    this.matchPasswordsValidator(this.form.get('password'))
  ]);
}
matchPasswordsValidator(passwordControl: AbstractControl | null) {
  return (confirmPasswordControl: AbstractControl) => {
    const password = passwordControl?.value;
    const confirmPassword = confirmPasswordControl.value;

    return password === confirmPassword ? null : { passwordMismatch: true };
  };
}

import { Component, ContentChild, AfterContentInit } from '@angular/core';
import { ElementRef } from '@angular/core';

@Component({
  selector: 'app-card',
  template: `<div class="card"><ng-content></ng-content></div>`
})
export class CardComponent implements AfterContentInit {
  @ContentChild('header') header!: ElementRef;

  ngAfterContentInit() {
    if (!this.header) {
      console.warn('Контент заголовка не передан!');
    } else {
      console.log('Заголовок загружен:', this.header.nativeElement.textContent);
    }
  }
}

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

@Component({
  selector: 'app-example',
  template: `<p>{{ data }}</p>`
})
export class ExampleComponent {
  data: string;

  constructor(private cdr: ChangeDetectorRef) {}

  updateData(newData: string) {
    this.data = newData;
    this.cdr.detectChanges();
  }
}

@ViewChild('myElement', { static: true }) myElement!: ElementRef;

ngOnInit() {
    console.log(this.myElement.nativeElement); // доступно уже здесь
}

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

@Component({
  selector: 'app-custom-event-listener',
  template: `<p>Нажмите Shift + K, чтобы сработало событие.</p>`
})
export class CustomEventListenerComponent {

  @HostListener('window:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent) {
    if (event.shiftKey && event.key === 'k') {
      console.log('Комбинация Shift + K нажата!');
      // Здесь можно вызывать любые действия
    }
  }
}

import { Component, Optional } from '@angular/core';
import { LoggingService } from './logging.service';

@Component({
  selector: 'app-optional-demo',
  template: `<p>Декоратор @Optional() пример</p>`
})
export class OptionalDemoComponent {
  constructor(@Optional() private loggingService: LoggingService) {
    if (this.loggingService) {
      this.loggingService.log('Logging service is available');
    } else {
      console.log('Logging service is not available');
    }
  }
}

@Component({
  selector: 'app-optimized-list',
  template: `
    <ul>
      <li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
    </ul>
  `,
})
export class OptimizedListComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  trackByFn(index: number, item: any): number {
    return item.id; // Уникальный идентификатор
  }
}

import React from 'react';
import ReactDOM from 'react-dom';

function Notification({ message }) {
  return ReactDOM.createPortal(
    <div className="notification">
      {message}
    </div>,
    document.getElementById('notification-root')
  );
}