Cacher is the code snippet organizer for pro developers

Components Documentation

Create Component manually

In this example we will create server component.

Create directory in /src/app named with component name: server.

Create TypeScript file

Create Typescript file for component in server directory: server.component.ts

Create class:

export class ServerComponent {
  
}

Add @Component() decorator to the class from @angular/core.

Add configuration to @Component() decorator:

• selector (use custom tag, attribute or class)
• template url (with relative path) or template (for inline markup)
• links to CSS styles or inline style

@Component({
  selector: 'app-server',
  styleUrls: ['./server.component.css']
  templateUrl: './server.component.html'
})

@Component({
  selector: 'app-server',
  styles: ['h1 { font-weight: normal; }']
  template: '<h1>Header</h1>'
})

Create Template file

Add server.component.html to /src/app/server directory.

Configure module to use component

Add component class to declarations property of @NgModule decorator.

Use component selector in parent component's template

<app-server></app-server>

Create Component with CLI

ng g c client