Angular Componet
Define angular componets
Angular Component
Components are the main building blocks 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:
- From a terminal window, navigate to the directory containing your application.
- 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
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 property to the @Component decorator.
content_copy@Component({
selector: 'app-component-overview',
})
What's Your Reaction?
