कोणीय 2 - नेस्टेड कंटेनर

कोणीय जेएस में, एक दूसरे के अंदर कंटेनरों को घोंसला बनाना संभव है। बाहरी कंटेनर को मूल कंटेनर के रूप में जाना जाता है और आंतरिक कंटेनर को बाल कंटेनर के रूप में जाना जाता है। आइए एक उदाहरण देखें कि इसे कैसे प्राप्त किया जाए। निम्नलिखित कदम हैं।

Step 1 - एक बनाएँ ts बच्चे कंटेनर के लिए फ़ाइल कहा जाता है child.component.ts

Step 2 - उपरोक्त चरण में बनाई गई फ़ाइल में, निम्न कोड रखें।

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'child-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class ChildComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

उपरोक्त कोड पैरामीटर का मान सेट करता है। इस "हैलो" के लिए।

Step 3 - app.component.ts फ़ाइल में, निम्न कोड रखें।

import { 
   Component 
} from '@angular/core'; 

import { 
   ChildComponent 
} from './child.component'; 

@Component ({ 
   selector: 'my-app', 
   template: '<child-app></child-app> ' 
}) 

export class AppComponent { }

उपरोक्त कोड में, ध्यान दें कि अब हम आयात करने के लिए आयात विवरण को कॉल कर रहे हैं child.componentमापांक। इसके अलावा, हम बच्चे घटक से मुख्य घटक के लिए <child-app> चयनकर्ता कह रहे हैं।

Step 4 - इसके बाद, हमें यह सुनिश्चित करने की आवश्यकता है कि बच्चे का घटक भी app.module.ts फ़ाइल में शामिल है।

import { 
   NgModule 
} from '@angular/core'; 

import { 
   BrowserModule 
} from '@angular/platform-browser';  

import { 
   AppComponent 
} from './app.component';  

import { 
   MultiplierPipe 
} from './multiplier.pipe' 

import { 
   ChildComponent 
} from './child.component';  

@NgModule ({ 
   imports: [BrowserModule], 
   declarations: [AppComponent, MultiplierPipe, ChildComponent], 
   bootstrap: [AppComponent] 
}) 

export class AppModule {}

एक बार जब आप सभी कोड परिवर्तन सहेज लेते हैं और ब्राउज़र को ताज़ा करते हैं, तो आपको निम्न आउटपुट मिलेगा।