Получение параметров в директивах

Директива как и компонент может получать некоторые входные параметры извне. Для этого также используется декоратор Input. Итак, возьмем директиву BoldDirective из прошлой темы и, допустим, мы хотим, чтобы у текста при наведении также менялась высота шрифта. Но при этом чтобы нужную высоту шрифта можно было бы задать извне директивы. Для этого изменим ее следующим образом:

import {Directive, HostListener, Input, HostBinding} from "@angular/core";

@Directive({
    selector: "[bold]",
    standalone: true,
})
export class BoldDirective{
     
    @Input() selectedSize = "18px";
    @Input() defaultSize = "16px";
     
    private fontSize : string;
    private fontWeight = "normal";
    constructor(){
        this.fontSize = this.defaultSize;
    }
	
	@HostBinding("style.fontSize") get getFontSize(){
		
		return this.fontSize;
	}
	
	@HostBinding("style.fontWeight") get getFontWeight(){
		
		return this.fontWeight;
	}
	
	@HostBinding("style.cursor") get getCursor(){
		return "pointer";
	}
	
	@HostListener("mouseenter") onMouseEnter() {
		this.fontWeight ="bold";
		this.fontSize = this.selectedSize;
	}

	@HostListener("mouseleave") onMouseLeave() {
		this.fontWeight = "normal";
		this.fontSize = this.defaultSize;
	}
}

В данном случае определяются два входных параметра:

@Input() selectedSize = "18px";
@Input() defaultSize = "16px";

Параметр selectedSize отвечает за высоту шрифта при наведении мыши, а в параметр defaultSize устанавливает высоту шрифта, когда указатель мыши находится вне границ элемента.

Теперь задействуем эти параметры, определив следующий код компонента:

import { Component} from "@angular/core";
import { BoldDirective} from "./bold.directive";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [BoldDirective],
    template: `<div>
				  <p bold selectedSize="28px" [defaultSize]="'14px'">Hello Angular</p>
				  <p>Приложение Angular состоит из компонентов</p>
			   </div>`
})
export class AppComponent {}

При применении директивы мы можем указать все входные параметры и их значения:

<p bold selectedSize="28px" [defaultSize]="'14px'">Hello Angular</p>

При этом есть две вариации применения праметров. Либо названия параметров заключаются в квадратные скобки, а их значения дополнительно заключаются в одинарные кавычки:

[defaultSize]="'14px'"

Либо названия параметров передаются без скобок, а их значения заключаются в двойные кавычки:

selectedSize="28px"

И при наведении на элемент автоматически будет меняться также и высота шрифта:

Теперь пойдем дальше и изменим первый входной параметр:

@Input("bold") selectedSize = "18px";

Здесь в декоратор Input передается селектор директивы - bold. Поэтому чтобы установить этот параметр в шаблоне компонента мы можем напрямую использовать имя директивы:

<p [bold]="'28px'" [defaultSize]="'14px'">Hello Angular</p>