Directives

Π”ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹ β€” Π² Angular это Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ шаблона. МоТно ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свои Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹.

Π”ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹ стиля

Π­Ρ‚ΠΎ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π½Π°ΠΌ ΠΌΠ΅Π½ΡΡ‚ΡŒ стили элСмСнтов ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

ngStyle

Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Π° позволяСт динамичСски ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ элСмСнта

<div class="card">
    <h2 [ngStyle]="{
        color: title.length < 5 ? 'black' : 'green'
    }">{{ title }}</h2>
</div>

ngClass

ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ классом элСмСнта динамичСски

<div class="text" [ngClass]="{
    blue: textColor === 'blue',
    red: textColor === 'red'
}"></div>

<!-- ΠΈΠ»ΠΈ -->

<div class="text" 
    [class.blue]="textColor === 'blue'"
    [class.red]="textColor === 'red'"
></div>

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π½Ρ‹Π΅ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹

Π­Ρ‚ΠΎ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ содСрТаниС html. Π‘ΠΈΠΌΠ²ΠΎΠ» * ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Π° мСняСт html.

ngIf

Π”ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ»ΠΈ Π½Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π² html.

<div *ngIf="toggle">
    <app-card></app-card>
    <app-card></app-card>
    <app-card></app-card>
    <app-card></app-card>
</div>

Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Π° Else для ngIf:

<div *ngIf="toggle; else noCards">
    <app-card></app-card>
    <app-card></app-card>
    <app-card></app-card>
    <app-card></app-card>
</div>

<ng-template #noCards>
    <p>Cards are hidden</p>
</ng-template>

ngFor

Π­Ρ‚Π° Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Π° позволяСт Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠ΅ΠΉ элСмСнтов. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π΅Π΅ использования:

<div class="container">
    <!-- Example 1 -->
    <app-card
        *ngFor="let iterCard of cards"
        [card]="iterCard"
    ></app-card>
    
    <!-- Example 2 -->
    <h2>Products:</h2>
    <div *ngFor="let product of products">
        <h3>
            {{ product.name }}
        </h3>
    </div>
</div>

Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ [card] ΠΌΡ‹ связываСм ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ iterCard с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ CardComponent (см Π΄Π°Π»Π΅Π΅)

Π’ ΠΊΠΎΠ΄Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Ρ„ΠΎΡ€ΠΌΡ‹ (являСтся Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΊΠ°Ρ€Ρ‚Ρ‹):

export interface Card {
    title: string 
}


@Component({
    selector: 'app-form',
    ...
})
export class FormComponent {
    
    cards: Card[] = [
        {title: 'Card 1'},
        {title: 'Card 2'}
    ]    
    
}

Π’ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ ΠΊΠ°Ρ€Ρ‚Ρ‹ добавляСм доступ Π΄ΠΎ ΠΏΠΎΠ»Π΅ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° card ΠΈΠ· Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° FormComponent:

import { Component, Input } from '@angular/core';
import { Card } From '../app.component';

@Component({
    selector: 'app-card',
    ...
})
export class CardComponent {
    
    @Input() card: Card
    @Input() index1: number
}

ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈ индСксов ΠΈΠ· Ρ†ΠΈΠΊΠ»Π° ngFor (index β€” это систСмноС Π½Π°Π·Π²Π°Π½ΠΈΠ΅):

<div class="container">
    <app-card
        *ngFor="let iterCard of cards; let idx = index"
        [card]="iterCard"
        [index]="idx + 1"
    ></app-card>
</div>

Last updated