Angular में ngOnDestroy हुक

ngOnDestroy हुक कंपोनेंट के हटाए जाने पर ट्रिगर होता है। इस हुक में, आप संसाधनों को मुक्त कर सकते हैं, तत्वों की घटनाओं की सदस्यता समाप्त कर सकते हैं, टाइमर हटा सकते हैं, आदि।

Angular में कंपोनेंट का निर्माण और उन्हें हटाना तब होता है, जब वह if शर्त के साथ प्रतिक्रियाशील रूप से दिखाया और छिपाया जाता है। यानी Angular केवल कंपोनेंट्स को छिपाता नहीं है, बल्कि उन्हें हटा देता है और वापस लौटा देता है।

कंपोनेंट्स का निर्माण और उन्हें हटाना तब भी होता है, जब उन्हें लूप में प्रतिक्रियाशील रूप से पुनरावृत्त किया जाता है। इस स्थिति में, Angular कंपोनेंट्स को बनाता और हटाता भी है।

आइए व्यवहार में आज़माते हैं। OnDestroy इंटरफेस को इम्पोर्ट करें:

app/user/user.component.tsimport { OnDestroy } from '@angular/core';

इसे क्लास से कनेक्ट करें:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  
}

और अब हमारा हुक लिखें:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  constructor() {
    console.log('constructor is started');
  }
  
  ngOnDestroy() {
    console.log('onDestroy is applied');
  }
}