What is Component and Directives in Angular5

In this post, I am going to explain What is Component and Directives in Angular 5 .

What are components?

  1. Component is the basic building block of Angular, Which means that an angular application is a collection of components, and one component is responsible for handling one view or part of the view.
  2. A component Encapsulates the data, the html markup and the logic for view. You can create as many components are required.
  3. Component is nothing but a simple type Script class which contains following things,
  4. Type Scripts Class
  5. Html template/ Template URL
  6. @Component decorator with metadata

Example:- 

Let’s open up the /src/app/app.component.ts component file that the CLI generated for us:

For  more details See here

What is Directives ?

Directives are elements which change the appearance or behavior of the DOM element. There are 3 types of directive mainly.

  1. Components- Directives with own template
  2. Structural – Change DOM by adding removing elements
  3. Attributes  Change Appearance or behavior of DOM

Component Directive

  1. Component is also type of directive with template, Styles and logic’s part which is most famous type of directive.
  2. You can not create angular project without one, A component directive require a view along with its attached behavior. This type of Directive adds DOM element.
  3. The naming convention of component is : name.component.ts

Structural Directive

  1. Structural directives are responsible for the HTML layout, They shape or reshape the HTML view by simply adding or removing the elements from the DOM. These directives are the way to handle how the component or the element renders in template
  2. There are three structural directives available in angular
  • NgIf (*ngIf)
  • NgFor (*ngFor)
  • NgSwitch (*ngSwitch)

 

Attribute Directives

  1. Attribute directive is a way to modify the appearance of the DOM element or component. There are 2 built-in  Attribute directives in Angular.
  2. NgStyle- Angular provide a built-in NgStyle attribute to modify  the element appearance and behavior.
  3. ngClass:- This attribute is used to change the class attribute of the element in DOM or the component to which it has been attached.

2 Comments

Add a Comment

Your email address will not be published. Required fields are marked *