Everything
in angular is a component!
- Components are the basic building blocks in Angular.
- A component in Angular allows us to create a reusable UI widget.
- A component can be used inside another component - Nested Components
A
component in Angular is a class with
a view template and a decorator. In simple terms we can say a
component in angular is composed of
o Template
§ Defines
the user interface.
§ Contains
html, directive and data bindings)
o Class
§ Contains
the code for the view template.
§ Like
any object oriented programming language like C# or Java, a class in Angular can
contain properties and methods.
§ Properties
contain data for the view template.
§ Methods
contain logic for the view template
o Decorator
§ Adds
meta data to the class, for making it an Angular Component
§ Applying
decorator to a class is similar to applying attributes to a class in C#.
Example:
An Angular application always need to have a root component called AppComponent
In below
example:
- A class AppComponent is defined with export keyword to make that usable in other part of the application.
- This class has only one property called name and a value ”Angular 2” is stored in it.
- To add the component decorator (provided by Angular) we need to use import keyword (which is similar to using keyword in C#) in below example we are importing “Component” from “angular/core”.
- Now Apply “Component” Decorator to the class (right now we are just using two properties from the Component Decorator)
o selector
– contains the directive name, where we want this component to be displayed. In
our example its inside index.html
o template - defines HTML required for the view. And HTML
required should be inside Backtick character
- {{ }} – databinding expression
- At runtime the default content from <my-app> directive will be replaced with above defined component’s template.
PS:
You can use single quotes or double quotes in place of Backtick character when
view template HTML is in single line, if the view template HTML is in more than
one line you must use backtick character else you will get an error.
We
can have either an inline view template as above or an external view template
as below (for the same above example):
The external template view, is referred with keyword 'templateUrl' in decorator. The path value is relative to the index.html (the file which uses the component)
Disadvantages of having inline view templates:
- We loose VisualStudio editor intellisense, code-completion and formatting features.
- TypeScript code is not easier to read and understand when it is mixed with the inline template HTML.
Advantages
of having external view template:
- We have loose VisualStudio editor intellisense, code-completion and formatting features available.
- Not only the code in TypeScript file (in our example app.component.ts) is clean but also easier to read and understand.
