Angular

Use Form Fields in Angular

Text field

<man-form-field 
    [type]="FormFieldType.Text" 
    [fieldText]="data?.formData?.labelText"
    [descText]="data?.formData?.descText"
></man-form-field>

Password

<man-form-field 
    [type]="FormFieldType.Password" 
    [fieldText]="data?.formData?.labelPassword"
    [descText]="data?.formData?.descPassword"
></man-form-field>

Email

<man-form-field 
    [type]="FormFieldType.Email" 
    [fieldText]="data?.formData?.email?.label"
    [id]="data?.formData?.email?.id"
    [name]="data?.formData?.email?.name"
></man-form-field>

Form Fields in Angular

Call an Article Title in another component and overwrite mock data

This is the Article Title that we want to call in another component

<h1 class="article-title">{{ articleTitle }}</h1>

@Input() articleTitle?: string;

Default.args = {
  articleTitle: 'Hello World'
}

Here we call the button component

<man-article-title [articleTitle]="articleTitle"></man-article-title>

@Input() articleTitle?: string;

Default.args = {
  articleTitle: 'Olvasási előzmények',
}

Call a specific Button Type in another Component

This is the button that we want to call in another component

<ng-container *ngIf="type === buttonType.Black">
    <button class="man-btn-black">{{buttonText}}</button>
</ng-container>

@Input() buttonText?: string;
@Input() type?: ButtonType;

export const Black = Template.bind({});
Black.args = {
  type: ButtonType.Black,
  buttonText: 'Regisztráció'
};

Here we call the button component

<man-buttons [type]="buttonType.Black" [buttonText]="buttonText"></man-buttons>

@Input() buttonText?: string;

export const Default = Template.bind({});
Default.args = {
    buttonText: 'Bejelentkezés'
}

This is the button that we want to call in another component

Here we call the button component

Add class only the clicked item of an array (Accordion)

Templaten belül ezeket kéne módosítani:

(click)="onGroupClick(i)" -> itt átadjuk hogy melyik group lett kattintva

[class.open]="isGroupOpen(i)" -> megnézzük hogy a nyitott group-ok között ott van-e az adott group

komponensen belül pedig:

private openGroups: number[] = [];

public isGroupOpen(index: number): boolean { return this.openGroups.includes(index); }

public onGroupClick(index: number): void { 
    if (this.isGroupOpen(index)) { 
        this.openGroups = this.openGroups.filter(group => group !== index) 
    } else { 
        this.openGroups.push(index); 
    } 
}

Add active class on clicked item

HTML

<ng-container *ngFor="let tabData of data.list; let i = index">
    <a class="category-tabs-tab" 
        [ngClass]="{ active: activeTab == i }" 
        (click)="activeTab = i" 
        [routerLink]="tabData.routerLink">
    {{ tabData.name }}
    </a>
</ng-container>

TS

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

@Component({
  selector: 'kesma-nso-category-tabs',
  templateUrl: './nso-category-tabs.component.html',
  styleUrls: ['./nso-category-tabs.component.scss']
})
export class CategoryTabsComponent implements OnInit {

  activeTab = false;

  constructor() { }

  ngOnInit(): void { }

}

Mock

export const MockCategoryTabs = {
    activeTab: 0,
    name: 'Bajnokok Ligája',
    logoImage: 'https://picsum.photos/64/64',
    list: [
        { name: 'Főoldal', routerLink: ['/'] },
        { name: 'Mérkőzések / Események', routerLink: ['/'] },
        { name: 'Menetrend', routerLink: ['/'] },
        { name: 'Tabella', routerLink: ['/'] },
        { name: 'Átigazolások', routerLink: ['/'] },
    ],
  }

Angular Definitions & Mocks

Definitions

export type MatchStatsSimpleDefinitions = Readonly<{
    titleLeft: string,
    titleLeftShort: string,
    titleCenter: string,
    titleRight: string,
    titleRightShort: string,
    imageLeft: string,
    imageRight: string,
    list: MatchStatList
}>;

export type MatchStatList = Readonly<{
    title: string, 
    left: string, 
    right: string,
    highlightLeft: boolean,
}>;

Mocks

import { MatchStatsSimpleDefinitions } from '../../definitions'
export const MockMatchStatsSimple = {
    titleLeft: 'Juventus',
    titleLeftShort: 'JUV',
    titleCenter: 'Mérkőzés statisztika',
    titleRight: 'Fullham',
    titleRightShort: 'FUL',
    imageLeft: 'https://picsum.photos/100/100',
    imageRight: 'https://picsum.photos/100/100',
    list: [
      { title: 'Labdabirtoklás', left: '69%', right: '31%', highlightLeft: true },
      { title: 'Lövések', left: '11', right: '14', highlightLeft: false },
      { title: 'Kapura lövések', left: '13', right: '7', highlightLeft: true },
      { title: 'Passzok', left: '192', right: '187', highlightLeft: true },
      { title: 'Sikeres passzok', left: '64%', right: '80%', highlightLeft: false },
      { title: 'Szögletek', left: '19', right: '2', highlightLeft: true },
      { title: 'Védések', left: '5', right: '10', highlightLeft: false },
      { title: 'Szabálytalanságok', left: '21', right: '13', highlightLeft: true },
    ],
  }

Set Timeout in TypeScript

constructor() {
    setTimeout( ()=> {
      this.allowNewServer = true
    }, 2000);
   }

Display menu items with ngFor directive

Increment number with ngFor

<button class="btn btn-primary my-3" (click)="onToggleDetails()">Display Details</button>
<div *ngFor="let logItem of log">{{logItem}}</div>