Angular Component

What is component?

Component = Template + Class + Metadata

Template

• View layout
• Created with HTML
• Includes binding and directives

Class

• Code supporting the view
• Created with TypeScript
• Properties : data
• Methods : logic

Metadata

• Extract data for Angular
• Defined with a decorator

Simple Component Example

To create component files from command, please check http://daiji110.com/2019/04/19/angular-component-and-bind/

app.component.ts

@Component({				       // Component decorator
   selector: 'root',			       // Directive Name used in HTML
   template: `				       // View layout
   <div><h1>{{title}}</h1>		       // Binding
   		<div>My First Component</div>
   </div>
   `
})
export class AppComponent {
  title: string = '';
}

Decorator

A function that adds metadata to a class,
its members, or its method arguments
Prexied with an @
Angular provides built-in decorators

@Comnponent, @Service