Angular 2 Component Understanding for Beginners

What is angular 2 Component ?

Before we have  a look for the component  we need to know about DOM ( Document Object Model ).

What is DOM…?     All HTML/XHTML/XML element which appear in front of the user ‘s browser are Structure or Managed in the DOM.

As you know about   HTML Tags and DOM elements  like   input / Text area / button etc.  have properties and Event which controlled by DOM.

Component

Lets say we need a Component which shows us All List of Students in the DOM.. in angular2 we create a component which will responsible to show us List of Students …

First of all we create a typescript  class in VScode  students.component.ts

 

 

Please see the naming convention students.component.ts

 

Then automatically create  to more files with naming convention .js and .js.map ….

 

Now look at Step 1  I import  { Component }  Decorator ( Module ) …..

Then in Step 2  @Component ({ })  this is Decorator Method and tells students  class that this class going to be a  Component

@ prefix tell it’s a Decorator Function

And   in the step 3 we  export the student s  class as StudentsComponent {   }

 

Please have a look on naming Convention  S and C in uppercase ….

 

Now let have brief look in @Component({  }) method which is Decorator for  the  students class Component …  

There is Two Basic attributes

Selector : ‘students’,  

Its specify the students is a CSS selector angular 2  will  Check this selector and will create Instance for Students Class

Template: ‘ <h1> Students List  </h2>

When the instance  instantiated angular the insert the template HTML Inserted in to the DOM ….

How Event Bind with Component in Angular2

How Event Bind with Component in Angular2