Angular in a Nutshell #Part2: Components

ismail-dinar — Tue, 23 Mar 2021 19:48:44 +0000

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

Angular in a Nutshell #Part1: MODULES

ismail-dinar — Sun, 21 Mar 2021 08:52:33 +0000

In Angular, a module is a class marked by @NgModule decorator that contains components, directives, pipes, and services.
An Angular application has at least one module.

import { NgModule } from '@angular/core';

@NgModule({
  declarations: ...,
  imports: ...,
  exports: ...,
  providers: ...,
  bootstrap: ...
})

class MyModule {}

Declarations: List of components, directives, and pipes that belong to this module.

declarations: [HelloComponent, TranslatePipe]

Imports: List of modules to import into this module. Everything from the imported modules (components, directives, pipes) is available to the declarations of this module.

imports: [BrowserModule, SomeOtherModule]

Exports: List of components, directives, and pipes visible to modules that import this module.

exports: [HelloComponent, TranslatePipe]

Providers: List of dependency injection providers visible both to the contents of this module and to importers of this module.

providers: [ApiService, { provide: UserService }]

Bootstrap: List of components to bootstrap when this module is bootstrapped.

bootstrap: [HelloComponent]

DEV Community: ismail-dinar

Angular in a Nutshell #Part2: Components

Angular in a Nutshell #Part1: MODULES