Angular JS
components
Understanding Angular :
To understand the capabilities of the Angular framework, you need to
learn about the following:
• Components
• Templates
• Directives
• Dependency injection
Angular Components :
• Everything in Angular is developed as a component; classes
interact with different files that are embedded in components,
which form a browser display. It can also be referred to as a kind
of a directive with configuration that's suitable for an application
structure that is component-based.
• The architecture of an Angular application is a tree of
components originating from one root component configured in
the bootstrap property on your root NgModule (in the app.
module.ts file).
file structure of an Angular :
Let's look at the file structure of an Angular root component that was created
by default in the process of bootstrapping a new Angular application:
• app.component.css: This is the style sheet for the component
• app.component.html: This is the HTML template file for the component
• app.component.spec.ts: This is the testing file for the component
• app.component.ts: This is the TypeScript class for the component
• app.module.ts: This is the TypeScript module file for the application
Angular components :
Components are the main building block for Angular applications.
Each component consists of:
• An HTML template that declares what renders on the page
• A TypeScript class that defines behavior
• A CSS selector that defines how the component is used in a
template
• Optionally, CSS styles applied to the template
Creating a component :
The best way to create a component is with the Angular CLI. You can
also create a component manually.
• Creating a component using the Angular CLI
• To create a component using the Angular CLI:
Steps to create component :
1.From a terminal window, navigate to the directory containing your
application.
2.Run the ng generate component <component-name> command,
where <component-name> is the name of your new component.
By default, this command creates the following:
• A directory named after the component
• A component file, <component-name>.component.ts
• A template file, <component-name>.component.html
• A CSS file, <component-name>.component.css
• A testing specification file, <component-name>.component.spec.ts
Where <component-name> is the name of your component.
Creating a component manually :
Although the Angular CLI is the best way to create an Angular
component, you can also create a component manually. This section
describes how to create the core component file within an existing
Angular project.
Steps To create a new component manually:
1. Navigate to your Angular project directory.
2. Create a new file, <component-name>.component.ts.
3. At the top of the file, add the following import statement.
import { Component } from '@angular/core';
What is Decorator?
Decorator that marks a class as an Angular component and
provides configuration metadata that determines how the
component should be processed, instantiated, and used at
runtime.
4.After the import statement, add a @Component decorator.
@Component({
})
5.Choose a CSS selector for the component.
@Component({
selector: 'app-component-overview',
})
Specifying a component's CSS selector:
Every component requires a CSS selector. A selector instructs Angular to
instantiate this component wherever it finds the corresponding tag in template
HTML. For example, consider a component hello-world.component.ts that defines
its selector as app-hello-world. This selector instructs Angular to instantiate this
component any time the tag <app-hello-world> appears in a template.
6.Define the HTML template that the component uses to display
information. In most cases, this template is a separate HTML
file.
@Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
})
Defining a component's template
A template is a block of HTML that tells Angular how to render the component in
your application. Define a template for your component in one of two ways: by
referencing an external file, or directly within the component.
To define a template as an external file, add a templateUrl property to the
@Component decorator.
@Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
})
To define a template within the component, add a template property to
the @Component decorator that contains the HTML you want to use.
@Component({
selector: 'app-component-overview',
template: '<h1>Hello World!</h1>',
})
If you want your template to span multiple lines, use backticks (`). For example:
@Component({
selector: 'app-component-overview',
template: `
<h1>Hello World!</h1>
<p>This template definition spans multiple lines.</p>
`
})
Note :An Angular component requires a template defined
using template or templateUrl. You cannot have both properties in a
component.
7.Select the styles for the component's template. In most cases, you
define the styles for your component's template in a separate file.
@Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
styleUrls: ['./component-overview.component.css']
})
Declaring a component's styles
Declare component styles used for its template in one of two ways: By
referencing an external file, or directly within the component.
To declare the styles for a component in a separate file, add a styleUrls property
to the @Component decorator.
@Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
styleUrls: ['./component-overview.component.css']
})
To declare the styles within the component, add a styles property to the @Component decorator
that contains the styles you want to use.
@Component({
selector: 'app-component-overview',
template: '<h1>Hello World!</h1>',
styles: ['h1 { font-weight: normal; }']
})
The styles property takes an array of strings that contain the CSS rule declarations.
8.Add a class statement that includes the code for the component.
export class ComponentOverviewComponent {
}
Specifying a component's CSS selector :
Every component requires a CSS selector. A selector instructs Angular to
instantiate this component wherever it finds the corresponding tag in template
HTML. For example, consider a component hello-world.component.ts that
defines its selector as app-hello-world. This selector instructs Angular to
instantiate this component any time the tag <app-hello-world> appears in a
template.
Specify a component's selector by adding a selector statement to
the @Component decorator.
@Component({
selector: 'app-component-overview',
})
Defining a component's template :
A template is a block of HTML that tells Angular how to render the
component in your application. Define a template for your component in
one of two ways: by referencing an external file, or directly within the
component.
To define a template as an external file, add a templateUrl property to
the @Component decorator.
@Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
})
To define a template within the component, add a template property to
the @Component decorator that contains the HTML you want to use.
@Component({
selector: 'app-component-overview',
template: '<h1>Hello World!</h1>',
})
If you want your template to span multiple lines, use backticks (`).
For example:
@Component({
selector: 'app-component-overview',
template: `
<h1>Hello World!</h1>
<p>This template definition spans multiple lines.</p>
`
})
Declaring a component's styles :
Declare component styles used for its template in one of two ways:
By referencing an external file, or directly within the component.
To declare the styles for a component in a separate file, add
a styleUrls property to the @Component decorator.
@Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
styleUrls: ['./component-overview.component.css']
})
To declare the styles within the component, add a styles property to
the @Component decorator that contains the styles you want to use.
@Component({
selector: 'app-component-overview',
template: '<h1>Hello World!</h1>',
styles: ['h1 { font-weight: normal; }']
})
The styles property takes an array of strings that contain the CSS rule
declarations.
