DEV Community

loading...

Angular in a Nutshell #Part2: Components

ismaildinar profile image ismail-dinar ・1 min read

In Angular, a component is a class marked by @Component decorator that defines a view and the logic behind it.

@Component({
  selector: ...,
  template: ...,
  styles: ...,
})
Enter fullscreen mode Exit fullscreen mode

The object provided to @Component decorator represents the component metadata.

  • Selector: Unique identifier that defines how the current component is represented in the HTML DOM.
selector: 'my-app'
Enter fullscreen mode Exit fullscreen mode
  • Template: Defines the template of the component as an HTML string.
template: '<h1>My Angular Component</h1>'
Enter fullscreen mode Exit fullscreen mode

When you have a complex template it's recommended to separate it in an HTML file and use the templateUrl instead

templateUrl: './app.component.html'
Enter fullscreen mode Exit fullscreen mode
  • Styles: Defines the styles for a component as an array of strings.
styles:['h1 { color: red; }']
Enter fullscreen mode Exit fullscreen mode

The same thing as for template applies here, if you have a complex style, it's better to declare it in a separate file and then provide it to the component through the styleUrls property.

styleUrls: ['./app.component.css']
Enter fullscreen mode Exit fullscreen mode

Discussion (1)

pic
Editor guide
Collapse
jacob_charheci profile image
Jacob Charheci

Thank you for sharing..