Angular Components

Creating and using Angular components

Component Decorator

@Component({ # component decorator
    selector: 'app-hello',
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.css']
})
export class HelloComponent { }

Inline Template

@Component({
    selector: 'app-hello',
    template: `

Hello

`
, # inline template styles: [`h1 { color: red; }`] # inline styles })

Component Class

export class HelloComponent {
    title = 'Hello World'; # property
    count = 0;
    
    increment() { # method
        this.count++;
    }
}

Generate Component

ng generate component hello # CLI command
ng g c hello # shorthand

Using Component

<app-hello></app-hello> # use component in template