Angular 2
@HostBinding डेकोरेटर का उपयोग करके मेजबान नोड पर गुणों के मूल्य को प्रभावित करने के निर्देश दें।

@HostBinding

@HostBinding डेकोरेटर हमें प्रोग्राम के होस्ट तत्व पर प्रॉपर्टी वैल्यू सेट करने की अनुमति देता है। यह टेम्पलेट में परिभाषित एक संपत्ति बंधन के समान काम करता है, सिवाय इसके कि यह विशेष रूप से मेजबान तत्व को लक्षित करता है। हर परिवर्तन का पता लगाने के चक्र के लिए बाइंडिंग की जाँच की जाती है, इसलिए यदि वांछित है तो यह गतिशील रूप से बदल सकता है। उदाहरण के लिए, हम कहते हैं कि हम बटन के लिए एक निर्देश बनाना चाहते हैं जो गतिशील रूप से एक वर्ग जोड़ता है जब हम उस पर दबाते हैं। जो कुछ इस तरह दिख सकता है:

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

@Directive({
  selector: '[appButtonPress]'
})
export class ButtonPressDirective {
  @HostBinding('attr.role') role = 'button';
  @HostBinding('class.pressed') isPressed: boolean;

  @HostListener('mousedown') hasPressed() {
    this.isPressed = true;
  }
  @HostListener('mouseup') hasReleased() {
    this.isPressed = false;
  }
}

ध्यान दें कि @HostBinding के दोनों उपयोग मामलों के लिए हम एक स्ट्रिंग मान में गुजर रहे हैं जिसके लिए हम प्रभावित करना चाहते हैं। यदि हम डेकोरेटर को स्ट्रिंग की आपूर्ति नहीं करते हैं, तो इसके बजाय कक्षा सदस्य के नाम का उपयोग किया जाएगा। पहले @HostBinding में, हम सांख्यिकीय रूप से बटन के लिए भूमिका विशेषता सेट कर रहे हैं। दूसरे उदाहरण के लिए, दबाए गए वर्ग को लागू किया जाएगा जब दबा हुआ सही है