Angular
Intro
Components
Angular
- SPA
- Component-based approach
- Runs on desktop and mobile
- Modular
- Testable
Building blocks
Modules
Components
Directives
Services
Router
Components
<app-post></app-post>
Directives
<app-post *ngFor="let post of posts"></app-post>
<button myCoolButton>Click Me!</button>
<p *ngIf="amIAdmin">Woohoo, I'm an admin!</p>
Services
Component
Service
Backend
Router
Router
Feed page
Profile page
Modules
Module
Components
Directives
Services
Router
Let's get started
ng-cli
npm install -g @angular/cli
ng new my-new-app
cd new my-new-app
ng serve
Generate with ng-cli
Demo
What is the component?
Components are a logical piece of code for Angular application.
What is the component?
It consists of the following:
- Template − This is used to render the view for the application. This contains the HTML that needs to be rendered in the application. This part also includes the binding and directives.
- Class − Contains properties and methods. This has the code which is used to support the view.
- Metadata − This has the extra data defined for the Angular class. It is defined with a decorator.
What is the component?
<Template>
Class {}
@Metadata
Components implementation
Getting started
$ ng g component components/todo-list
@NgModule({
declarations: [
AppComponent,
--> TodoListComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
@Component({
selector: 'app-todo-list',
templateUrl: './todo-list.component.html',
styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent {
}
Demo
Components interaction
Menu
Header
Footer
TODO list
TODO item
Application layout
Components tree
App
Menu
TODO list
Header
Footer
TODO item
Bindings
- Property binding
- Event binding
- Two-way binding
<Template>
Class {}
[property] @Input
(event)
@Output
[ property binding ]
( event binding )
[( two-way binding )]
Demo
Smart and Presentational Components
Smart Component
Service 1
Smart Component
Service 2
- Connected to services
- Knows how to load data and how to react to data changes
- Manages state
- Focuses on how things work
Presentational (aka Dump) Component
Smart Component
- Fully defined by their bindings (can be reused)
- Stateless (no logic inside)
- Focuses on how things look
Presentational Component
@Input() …
@Output() …
Presentational Component
@Input() …
@Output() …
Lifecycle Hooks
Lifecycle Hooks
- ngOnChanges()
- ngOnInit()
- ngDoCheck()
- ngAfterContentInit()
- ngAfterContentChecked()
- ngAfterViewInit()
- ngAfterViewChecked()
- ngOnDestroy()
Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values.
Called before ngOnInit() and whenever one or more data-bound input properties change.
Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.
Called once, after the first ngOnChanges().
Detect and act upon changes that Angular can't or won't detect on its own.
Called during every change detection run, immediately after ngOnChanges() and ngOnInit().
Respond after Angular projects external content into the component's view / the view that a directive is in.
Called once after the first ngDoCheck().
Respond after Angular checks the content projected into the directive/component.
Called after the ngAfterContentInit() and every subsequent ngDoCheck().
Respond after Angular initializes the component's views and child views / the view that a directive is in.
Called once after the first ngAfterContentChecked().
Respond after Angular checks the component's views and child views / the view that a directive is in.
Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().
Cleanup just before Angular destroys the directive/component. Unsubscribe Observables and detach event handlers to avoid memory leaks.
Called just before Angular destroys the directive/component.
Components Metadata
• 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
• * 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
• * 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 -
• styleUrls - list of
component's view
• styles - inline-defined styles to be applied to this component's view
• template - inline-defined template for the view
• templateUrl -
•
* - inherited from Directive
Useful links
- https://cli.angular.io
- https://angular.io/cli
- https://angular.io/tutorial
- https://angular.io/tutorial/toh-pt1
- https://angular.io/tutorial/toh-pt2
- https://angular.io/tutorial/toh-pt3
- https://angular.io/guide/architecture-components
- https://angular.io/guide/displaying-data
- https://angular.io/guide/template-syntax
- https://angular.io/guide/lifecycle-hooks
- https://angular.io/guide/component-interaction
- https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-components
Q & A
Angular. Intro. Components
By Pavel Razuvalau
Angular. Intro. Components
- 1,050