Angular in a Nutshell #Part2: Components

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

@Component({
  selector: ...,
  template: ...,
  styles: ...,
})

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'

• Template: Defines the template of the component as an HTML string.

template: '<h1>My Angular Component</h1>'

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'

• Styles: Defines the styles for a component as an array of strings.

styles:['h1 { color: red; }']

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']

Comments

[Jacob Charheci]

Thank you for sharing..