कोणीय 2 - टेम्पलेट

अवयवों के अध्याय में, हमने पहले ही निम्नलिखित टेम्पलेट का एक उदाहरण देखा है।

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

यह एक के रूप में जाना जाता है inline template। टेम्प्लेट को परिभाषित करने के अन्य तरीके हैं और यह टेम्प्लेट कमांड के माध्यम से किया जा सकता है। घटक में इसका उपयोग करने का सबसे सरल तरीका निम्न है।

वाक्य - विन्यास

templateURL:
viewname.component.html

पैरामीटर

• viewname - यह ऐप कंपोनेंट मॉड्यूल का नाम है।

दृश्यनाम के बाद, घटक को फ़ाइल नाम में जोड़ा जाना चाहिए।

इनलाइन टेम्पलेट को परिभाषित करने के लिए निम्नलिखित चरण हैं।

Step 1- app.component.html नामक एक फाइल बनाएं। इसमें व्यू के लिए html कोड होगा।

Step 2 - ऊपर बनाई गई फ़ाइल में निम्न कोड जोड़ें।

<div>{{appTitle}} Tutorialspoint </div>

यह एक साधारण div टैग को परिभाषित करता है और app.component class से appTitle संपत्ति का संदर्भ देता है।

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

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'  
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

उपरोक्त कोड से, केवल वही परिवर्तन जो नोट किया जा सकता है, टेम्पलेटएआरएल से है, जो app.component.html फ़ाइल का लिंक देता है जो ऐप फ़ोल्डर में स्थित है।

Step 4 - ब्राउजर में कोड को रन करें, आपको निम्नलिखित आउटपुट मिलेगा।

आउटपुट से, यह देखा जा सकता है कि टेम्पलेट फ़ाइल (app.component.html) फ़ाइल तदनुसार कहा जा रहा है।