Angular Component
Every Angular application has at least one component, the root component that connects a component hierarchy with the page DOM. Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment.
The @Component decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata.
Decorators are functions that modify JavaScript classes. Angular defines a number of such decorators that attach specific kinds of metadata to classes, so that it knows what those classes mean and how they should work.
Here’s an example of basic metadata for HeroListComponent:
src/app/hero-list.component.ts (metadata)
@Component({
selector: ‘app-hero-list’,
templateUrl: ‘./hero-list.component.html’,
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}
This example shows some of the most useful @Component configuration options:
selector: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app’s HTML contains <app-hero-list></app-hero-list>, then Angular inserts an instance of the HeroListComponent view between those tags.
templateUrl: The module-relative address of this component’s HTML template. Alternatively, you can provide the HTML template inline, as the value of the template property. This template defines the component’s host view.
providers: An array of dependency injection providers for services that the component requires. In the example, this tells Angular that the component’s constructor requires a HeroService instance in order to get the list of heroes to display.
IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.
Back to Angular 4 Tutorial Main Page 
