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

 

Create Ts File

 

Please see the naming convention students.component.ts

.js and .js.map files extentions

 

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

 

@Component Decorator Import in Class

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 …  

Component Decorator Attributes

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 ….

Be the first to comment

Leave a Reply

Your email address will not be published.


*