কম্পোনেন্টে আছে : 

#কম্পোনেন্ট এর ৩ টা পার্ট । টেমপ্লেট (template), ক্লাস (Class), মেটাডাটা (Metadata)

টেমপ্লেট (Template) – রিপ্রেসেন্ট ভিউ – HTML ব্যবহার করে । 

ক্লাস (Class) – কন্ট্রোল লজিক অ্যান্ড ভিউ

মেটাডাটা (MetaData) – এটা হচ্ছে তথ্য (Information ) আঙ্গুলার এর সিদ্ধান্ত নেওয়ার ক্ষেত্রে কাজ করে 

Decorator:এটা Typescript  এর একটা ফিচার । Decorator হচ্ছে ফাংশন প্রভাইডার যেটা ক্লাস  এর সাথে সংযুক্ত হয়ে কাজ করে ।কম্পোনেন্ট ।কম্পোনেন্ট Decorator ব্যবহার করে । 

• @কম্পোনেন্ট Decorator মূলত একটা ফাংশন যেটা ক্লাস  এর সাথে সংযুক্ত 
• Decorator আঙ্গুলার কে বলে যে আমি কোন প্লাইন ক্লাস না । আমি কম্পোনেন্ট । 

@কম্পোনেন্ট Decorator 

• মেটাডাটা (Metadata) ধারন করে 
• টেমপ্লেট  (TemplateUrl) – রিপ্রেসেন্ট ভিউ – HTML ব্যবহার করে
• styleUrl – পয়েন্ট টু সিএসএস(css) ফাইল 
• Have selector for style
• সিলেক্টর(Selector): কম্পোনেন্ট এর জন্য কাস্টম html ট্যাগ সিলেক্ট করে । 

এইটা হচ্ছে কম্পোনেন্ট স্ট্রাকচার। 

CLI ব্যবহার করে নতুন কম্পোনেন্ট করা 

• Ng g c componet_name (ng g c test)
• কমান্ড এর পর এটা app.module.ts ফাইল এ প্রাথমিক অবস্তাই ইনিশিয়াল হবে । 

কম্পোনেন্ট সিলেক্টর(Selector) প্যাটার্ন 

• কাস্টম html ট্যাগ ব্যবহার করতে হবে প্যারেন্ট html ফাইল এ যেমন – <app-test></app-test>
• কাস্টম ক্লাস (Class) ব্যবহার করতে হবে কম্পোনেন্ট  ফাইল এ (test.component.ts) যেমন – selector: “.app-test” । html ফাইল এ ।  প্যারেন্ট html ফাইল অথবা অন্য যে কোন ফাইল এ যেমন – <div class=”app-test”></div>
• কাস্টম html  attribute ব্যবহার করতে হবে কম্পোনেন্ট ফাইল এ (test.component.ts) যেমন – selector: ‘[app-test]’ ।  html ফাইল এ । প্যারেন্ট html ফাইল অথবা অন্য যে কোন ফাইল এ যেমন – <div app-test></div>

Template: ‘<div>Inline Template</div>’

styles: [‘

div{

color: red;

}

’]

Note: using backticks (“) for multiple line