Angular components
What is a component in Angular
§ A component in Angular is made
up of these 3 things.
1. Template
2. Class
3. Metadata
§ A component is made up
of three parts the first is a template which represents the view this is
created using HTML in will be the user interface for your application.
§ we have a class which
is nothing but code that supports the view this is created using typescript
class like any other programming language contains data properties and methods
that can be used to control the logic of the view example we can have a method
to show or hide an element based on the value of a property.
§ Finally a component
also had the metadata attached to it and this is the information that angular
need to decide if the particular class is in fact in angular component just a
regular class data is defined using a decorator which is a feature in
typescript decorator is just a function that provide information about the
class attached to it and for component.
§ We use the Component decorator provided by
Angular to add metadata to
the
class.
§ If you put together a
template class and some metadata, we get an angular component.
§ A class becomes an Angular component, when it
is decorated with the Component decorator.
§ let me go back to Visual Studio code and open
the file app.component.ts
§ We have a class with the name of the class is AppComponent this class currently contains one property which is the title
and does not contain any methods keeping it simple to do this class.
§ We have the meta data attached in the form of
a decorator and to be more specific the component decorated.
§ Component decorated is basically a function
that attaches to the class right below and in our case, it is attached to the AppComponent class and it is this decorated the tells angular hey this is not
a plane class this is a component.
§ Component decorator contains both the metadata
and the template which represent the view so as the part of the metadata we
have a selector, template URL and style URL and selector is basically a custom
HTML tag that can be used to represent this component. We can use this selector as a directive where we want to use
this component.
§ When you specify a selector in your Html
angular renders the component template
in its place for example you can see the selected for AppComponent is app root and in
index.html file it is used as a
custom HTML tag so app-root in the opening and closing tag so angular renders
the AppComponent template when it comes across this app root
selector but what exactly is the template for this component is defined using
the template URL Template URL points to an HTML file that represents the view
for this component and if it take a look app.component.html template we have
welcome to followed by the title in double curly braces in the title is nothing
but the property in our class which is Gravity4Tech.
§ So when you run application this HTML which is
in app.component.html with replace in the index HTML file specified this
component selector so that is how the HTML template gets rendered in the
browser and finally we can have styles that apply only to this component and
that is specified using the style URLs property.
§ To CSS files right now this file is empty but
you can style your component using this file that is basically the structure of
a component.
§ How you included new Component in your
application but let's try to improve our understanding of components
§ Let's create a new component by making use of
angular CLI command.
ng g c test
G for
generate c for component followed by name the component is called as
TestComponet
§ after complete execution of this command a
couple of things happen when we can see them in the integrated terminal itself
you can see that four new files were created and also there was an update to
the app module let's a look and see what happens in the folder itself.
§ In the
app folder a new folder test is created specifically for this component with
this folder the typescript file the HTML and CSS are created a spect file is
also created don’t really use now
Component Example : -
// Component decorator
is provided by the Angular core library, so we
// have to import it
before using it.
import { Component } from '@angular/core';
// The class is
decorated with Component decorator which adds metadata
// to the class. We use
the @ symbol to apply a decorator to the class
@Component({
// component has several properties. Here we are
using just 2. For
// the full list of properties refer to the
following URL
//
https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html
// To use this component on any HTML page we
specify the selector
// This selector becomes the directive
<my-app> on the HTML page
// At run time, the directive <my-app> is
replaced by the template
// HTML specified below
selector: 'app-root',
// The template contains the HTML to render.
templateUrl:
'./app.component.html',
// you can style your component using this
file
styleUrls: ['./app.component.css']
})
// export keyword allows
this class to be exported, so other components
// in the application
can import and use it if required
export class AppComponent {
// name is a property and the data type is
string and
// has a default value "angular"
name: string = 'Angular';
}
app.component.html
Notice in the HTML
// we have a data-binding expression specified
by double curly
// braces. We have a defualt value
"Angular" assigned to "name"
// property in the AppComponent class. This will
be used at runtime
// inplace of the data-binding expression
hello{{name}}
Notice in the index.html page,
we have used the AppComponent using the directive <my-app>. At runtime <my-app> directive is replaced
with the HTML we specified using the selector property in the component
decorator.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ComponentDemo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon"
type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
