How do I create a simple Angular component?
Asked on Sep 29, 2024
Answer
To create a simple Angular component, you typically use the Angular CLI, which automates the setup process. Below is a basic example of how to define an Angular component manually.
<!-- BEGIN COPY / PASTE -->
import { Component } from '@angular/core';
@Component({
selector: 'app-simple',
template: `
<div>
<h1>Hello, Angular!</h1>
<p>This is a simple component.</p>
</div>
`,
styles: [`
div {
text-align: center;
margin: 20px;
}
`]
})
export class SimpleComponent {}
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with JavaScript best practices.- This code defines a component named "SimpleComponent".
- The "selector" property specifies the HTML tag to use for this component.
- The "template" property contains the HTML structure for the component.
- The "styles" property defines CSS styles specific to this component.
- To use this component, include it in a module and add its selector in an HTML template.
Recommended Links:
← Back to All Questions