{"id":59659,"date":"2018-05-02T16:53:07","date_gmt":"2018-05-02T11:23:07","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59659"},"modified":"2024-04-12T14:20:43","modified_gmt":"2024-04-12T08:50:43","slug":"angular-component","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-component\/","title":{"rendered":"Angular Component"},"content":{"rendered":"

Angular Component<\/h1>\n

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.<\/p>\n

The @Component decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata.<\/p>\n

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.<\/p>\n

Here’s an example of basic metadata for HeroListComponent:
\nsrc\/app\/hero-list.component.ts (metadata)<\/p>\n

@Component({
\nselector: ‘app-hero-list’,
\ntemplateUrl: ‘.\/hero-list.component.html’,
\nproviders: [ HeroService ]\n})
\nexport class HeroListComponent implements OnInit {
\n\/* . . . *\/
\n}<\/p>\n

This example shows some of the most useful @Component configuration options:<\/p>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.<\/strong><\/p>\n

\"\"<\/a><\/p>\n