Overview

An Angular App is a tree of Components.

Each component controls a patch of screen called a view.

The fundamental idea behind components: we will teach the browser new tags that have custom functionality.

If you have a background in AngularJS, Components are the new version of directives.

Overview

The top level Component is the application itself. And that’s what the browser will render when "booting" (a.k.a bootstrapping) the app.

Components are composable, i.e. larger Components are build from smaller ones.

When each Component renders, it recursively renders its children Components.

The Component Tree

Create Components by CLI

			ng generate component todos

			# or the shorthand version:
			ng g c todos

			# output
			installing component
					create src/app/todos/todos.component.css
					create src/app/todos/todos.component.html
					create src/app/todos/todos.component.spec.ts
					create src/app/todos/todos.component.ts
					update src/app/app.module.ts
		

The Component files

			tree -F app/
			app/
			├── app.component.css
			├── app.component.html
			├── app.component.ts
			├── app.module.ts
			└── todos/
				├── todos.component.css
				├── todos.component.html
				├── todos.component.spec.ts
				└── todos.component.ts
		

What's in a Component

Component Decorator

A View

A Controller

Component Class

			import { Component } from '@angular/core';
			// the Decorator
			@Component({
				selector: 'app-root',
				// the View
				template: `
					

						Welcome to {{title}}!!
					
				`,
				styles: []
			})
			export class AppComponent {
				// the Controler
				title = 'app';
			}
		

@Component Decorator

With @Component Decorator you mark a class as an Angular component

You can provide additional metadata that determines how the component should be processed, instantiated and used at runtime

Using a Component

A component must belong to an NgModule in order for it to be usable by another component or application.

To specify that a component is a member of an NgModule, you should import it and list it in the declarations field of that NgModule.

			// ...
			import { TodosComponent } from './todos/todos.component';

			@NgModule({
				declarations: [
					AppComponent,
					TodosComponent // declare our Component as member of NgModule
				],
		

Component Metadata Properties

animations - list of animations of this component

changeDetection - change detection strategy used by this component

encapsulation - style encapsulation strategy used by this component

entryComponents - list of components that are dynamically inserted into the view of this component

Component Metadata Properties

exportAs - name under which the component instance is exported in a template

host - map of class property to host element bindings for events, properties and attributes

inputs - list of class property names to data-bind as component inputs

interpolation - custom interpolation markers used in this component's template

moduleId - ES/CommonJS module id of the file in which this component is defined

Component Metadata Properties

outputs - list of class property names that expose output events that others can subscribe to

providers - list of providers available to this component and its children

queries - configure queries that can be injected into the component

selector - css selector that identifies this component in a template

Component Metadata Properties

styleUrls - list of urls to stylesheets to be applied to this component's view

styles - inline-defined styles to be applied to this component's view

template - inline-defined template for the view

templateUrl - url to an external file containing a template for the view

viewProviders - list of providers available to this component and its view children

Component selector

With the selector key, you indicate how your component will be recognized when rendering HTML templates

The selector is a way to define what elements in the HTML will match this component.

I.e. this is how you "teach" the browser how to handle new HTML elements!

Loading the "todos" Component

			@Component({
				selector: 'app-todos', // this is our new HTML element
				templateUrl: './todos.component.html',
				styleUrls: ['./todos.component.css']
			})
		

put an <app-todos></app-todos> element in the parent component (app.component.html in our case)

			
Welcome to {{title}}!
			
		

Creating sub-components

Let's generate a todos-header component, which should be a child of our todos component

			# make sure you are somewhere in you App folder
			pwd
			# {path}/TODOapp/src/app
			ng g component todos/header

			# installing component
			#	create src/app/todos/header/header.component.ts
		

Creating sub-components

Make sure you use your new Component

			@Component({
				selector: 'todos-header',
				templateUrl:"header.component.html",
				styleUrls: ["header.component.css"]
			})
		

			

				
The {{title}} section
				
			
		

You can freely change the pre-generated selector name - just make sure you use the same tag in the parent template

Styling Components

Angular applications are styled with standard CSS

Additionally, Angular can bundle component styles with components

The selectors you put into a component's styles apply only within the template of that component!

Loading component styles

By setting styles or styleUrls metadata.

Inline in the template HTML.

With CSS imports.

Loading component styles by styles

styles value is an array of strings, each consisting of CSS you want to use with this Component

			@Component({
				selector: 'app-todos',
				templateUrl: "./todos.component.html",
				// styleUrls: ["todos.component.css"]
				styles: [`
					section{
						width: 80%;
						height: 80vh;
						background: #999;
						border: 1px solid red;
						box-sizing: border-box;
					}`]
			})
		

Loading component styles by styleUrls

styleUrls value is an array of URLs to the css files you want to include in this Component

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

			section{
				width: 80%;
				height: 80vh;
				background: #999;
				border: 1px solid red;
				box-sizing: border-box;
			}
		

Adding Data to the Component

			export class TodoItemComponent implements OnInit {
				itemName: string; // <-- added itemName property
										 // will be bound to {{itemName}} in template

				constructor() {
					this.itemName = 'This is my first TODO Item'
				}

				ngOnInit() {
				}
			}
		

will be discussed deeply in next sections

Each component view is defined in its companion template

In Angular, the component plays the part of the controller/viewmodel, and the template represents the view.

An angular template looks like HTML, but follows the Angular Template Syntax