Angular

Execute method on enter

(keydown.enter)="filterItems()"

<field
    class="mb-24"
    [fieldType]="FieldType.DEFAULT"
    [label]="'SHARED.COMPANY_NAME' | transloco"
    [formControl]="control"
    (keydown.enter)="filterItems()">
</field>

SCSS alias

@import "../../../scss/styles.scss";

@import "@styles/styles";

1. Ellenőrizd a Webpack Konfigurációt

Mivel az Angular CLI elrejti a webpack konfigurációt, gyakran nehéz közvetlenül hozzáférni vagy módosítani. Azonban, egy csomag, mint a @angular-builders/custom-webpack, lehetővé teszi, hogy kiterjeszd vagy módosítsd az Angular CLI által generált webpack konfigurációt.

Telepítheted ezt a csomagot a következő npm parancs segítségével:

npm install @angular-builders/custom-webpack --save-dev

angular.json

"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "mergeStrategies": { "module.rules": "prepend" }
            },
...

"serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
...

extra-webpack.config.js

const path = require("path");

module.exports = {
  resolve: {
    alias: {
      "@styles": path.resolve(__dirname, "src/scss/"),
    },
  },
};

Active class on clicked item Angular

export class TabComponent implements OnInit {
  @Input() isActive: boolean = false;

  mockData?: readonly IMenu[];

  activeIndex: number | null = null;

  constructor(private readonly mockDataService: MenuService) {}

  setActiveIndex(index: number): void {
    this.activeIndex = index;
  }

  ngOnInit(): void {
    this.mockData = this.mockDataService.getMockTab();
  }
}

<ul class="tab" [ngClass]="{ dark: isDark }">
  <li
    class="tab-item"
    *ngFor="let item of mockData; let i = index"
    [isActive]="activeIndex === i"
    (click)="setActiveIndex(i)"
  >
    <button class="tab-item-link" [ngClass]="{ active: activeIndex === i }" href="">{{ item.title }}</button>
  </li>
</ul>

Angular Progress Bar

<div class="progress-container">
  <div class="progress-bar" [style.width]="barWidth + '%'"></div>
</div>

.progress-container {
  background-color: blue;
  width: 100%;
  max-width: 146px;
}

.progress-bar {
  background: orange;
  height: 4px;
  text-align: center;
  line-height: 30px;
  color: white;
  transition: width 0.5s;
}

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
  selector: 'app-progress-bar',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './progress-bar.component.html',
  styleUrl: './progress-bar.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProgressBarComponent {
  @Input() barWidth: number = 40;
}

import type { Meta, StoryObj } from '@storybook/angular';

import { ProgressBarComponent } from './progress-bar.component';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta: Meta<ProgressBarComponent> = {
  title: 'App/Components/Progress Bar',
  component: ProgressBarComponent,
  tags: ['autodocs'],
  // Use `fn` to spy on the buttonClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
};

export default meta;
type Story = StoryObj<ProgressBarComponent>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Default: Story = {
  args: {},
};

Map – Removing duplicates from the array

export class SidebarComponent {
  jobs: any[] = [];
  categories: any[] = [];

  constructor(private jobsService: JobsService) {}

  ngOnInit() {
    this.jobsService.getJobs().subscribe(
      (response) => {
        this.jobs = response.data;
        // Kategóriák tömbjének lekérése és duplikációk eltávolítása
        const categories = response.data
          // Kinyerjük a kategóriákat az adatokból
          .map((job) => job.attributes.category.data.attributes.Name)
          // Egy Set segítségével eltávolítjuk a duplikációkat
          .filter(
            (category, index, array) => array.indexOf(category) === index
          );

        this.categories = categories.map((category) => ({ Name: category }));
      },
      (error) => {
        console.error('Error fetching jobs', error);
      }
    );
  }
}

Range with Decimal Pipe

Publish Date Pipe

Pipe

import { Pipe, PipeTransform } from '@angular/core';
import { differenceInHours, differenceInMinutes, format, parseISO } from 'date-fns';
import hu from 'date-fns/locale/hu';

@Pipe({
  name: 'publish',
  standalone: true,
})
export class PublishPipe implements PipeTransform {
  transform(value: Date | string, dateFormat = 'yyyy. MM. dd.', minutesToDisplay = 60, hoursToDisplay = 24): string {
    if (!value) {
      return '';
    }

    let tempValue = new Date(value);

    if (typeof value === 'string') {
      tempValue = parseISO(value);
    }

    const now = new Date();
    const minutes = differenceInMinutes(now, tempValue);
    const hours = differenceInHours(now, tempValue);
    const isZeroMinute = minutes === 0;

    if (minutes >= 0 && minutes < minutesToDisplay) {
      return `${isZeroMinute ? 1 : minutes} perce`;
    }
    if (hours > 0 && hours < hoursToDisplay) {
      return `${hours} órája`;
    }
    return format(tempValue, dateFormat, { locale: hu });
  }
}

Component

date: Date = new Date();

Template

{{ date | publish }}

Filter Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter',
  pure: false
})
export class FilterPipe implements PipeTransform {

  transform(value: any, filterString: string, propName: string): any {
    if (value.length === 0 || filterString === '') {
      return value;
    }
    const resultArray = [];
    for (const item of value) {
      if (item[propName] === filterString) {
        resultArray.push(item);
      }
    }
    return resultArray;
  }

}

<input type="text" [(ngModel)]="filteredStatus">

<ul class="list-group">
  <li
    class="list-group-item"
    *ngFor="let server of servers | filter:filteredStatus:'status'"
    [ngClass]="getStatusClasses(server)">
    <span
      class="badge">
      {{ server.status }}
    </span>
    <strong>{{ server.name }}</strong> |
  </li>
</ul>

Shorten Pipe – Character limit

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'shorten'
})
export class ShortenPipe implements PipeTransform {
  transform(value: any, limit: number) {
    if (value.length > limit) {
      return value.substr(0, limit) + ' ...';
    }
    return value;
  }
}