custom attribute Directive

Attribute Directives (링크)

 

DOM element의 모습 및 행동을 변경합니다.

오른쪽은 예제 입니다. Attribute Directive example / download example.

 

Attribute directives는 element의 속성으로 사용됩니다.  Template Syntax guide의 built-in NgStyle directive입니다. 예제로써, 동시에 여러 element를 변경할 수 있습니다.

 

1. foo.directive.ts에 selector는 ['appFoo'] 와같이 []로 감쌉니다.

2. HTML에 <p appFoo class"example"> 예제 </p> 와같이 사용합니다.

Directives 기능

HostListener - style

constructor (private elRef: ElementRef, private renderer: Renderer2) { }



@HostListener('mouseenter') mouseover(eventData: Event) {

this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue', false, false);

}



@HostListener('mouseleave') mouseleave(eventData: Event) {

this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'transparent', false, false);

}

---

HostListener, HostBinding - style

@HostBinding('style.backgroundColor') backgroundColor: string = 'transparent';

constructor (private elRef: ElementRef, private renderer: Renderer2) { }



@HostListener('mouseenter') mouseover(eventData: Event) {

  this.backgroundColor = 'blue';

}



@HostListener('mouseleave') mouseleave(eventData: Event) {

  this.backgroundColor = 'transparent';

}

---

TS file

@Directive({
  selector: '[appHighlight]'
)}

@Input() defaultColor: string = 'transparent';
@Input() highlightColor: string = 'blue';
@HostBinding('style.backgroundColor') backgroundColor: string = 'transparent';

constructor (private elRef: ElementRef, private renderer: Renderer2) { }

ngOnInit() {
  this.backgroundColor = this.defaultColor;
}

@HostListener('mouseenter') mouseover(eventData: Event) {
  this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue', false, false);
  this.backgroundColor = this.highlightColor;
}

@HostListener('mouseleave') mouseleave(eventData: Event) {
  this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'transparent', false, false);
  this.backgroundColor = this.defaultColor;
}

HTML file

<p appHighlight [defaultColor]="yellow" [highlightColor]="red"> Style me with a better directive!</p>

 

유용한 드롭다운 Directive - class

class에 open을 삽입함으로써 작동하게 하는 bootstrap 코드입니다.

---

Closing the Dropdown From Anywhere

If you want that a dropdown can also be closed by a click anywhere outside (which also means that a click on one dropdown closes any other one, btw.), replace the code of dropdown.directive.ts by this one (placing the listener not on the dropdown, but on the document):

TS file

import {Directive, ElementRef, HostBinding, HostListener} from '@angular/core';
 
@Directive({
	selector: '[appDropdown]'
})

export class DropdownDirective {
@HostBinding('class.open') isOpen = false;
@HostListener('document:click', ['$event']) toggleOpen(event: Event) {
	this.isOpen = this.elRef.nativeElement.contains(event.target) ? !this.isOpen : false;
}
constructor(private elRef: ElementRef) {}

출처(102번 강좌) : https://www.udemy.com/share/1000imAkEeeVhSQ34=/

---