The document discusses Angular modules, directives, and components. Angular modules help organize an application into blocks of functionality using the @NgModule annotation. There are three types of directives - components, attribute directives, and structural directives. Components are a subset of directives that use the @Component annotation and define templates to specify elements and logic on a page. The metadata definitions for @NgModule, @Directive, and @Component are also described.

1. Angular
TECH SESSION Lapusneanu Gabi Costel

2. Key Features
01 Modules
02
03
Directives
Components
04Data Binding / Events
05Services
Dependency Injection
06

3. Modules
01
02
04
Angular Modules help organize an application into cohesive blocks of functionality.

4. Modules
01
02
04
Angular Modules help organize an application into cohesive blocks of functionality.
Annotation

5. Modules
01
02
04
Angular Modules help organize an application into cohesive blocks of functionality.
Annotation
@NgModule
Tells Angular how to process a class.

6. Modules
01
02
04
Angular Modules help organize an application into cohesive blocks of functionality.
Annotation
@NgModule
Tells Angular how to process a class.

7. Modules
01
02
04
Angular Modules help organize an application into cohesive blocks of functionality.
Metadata Definitions
Annotation
@NgModule
Tells Angular how to process a class.

8. bootstrap?: Array<Type<any> | any[]>
Modules
01
02
04
Angular Modules help organize an application into cohesive blocks of functionality.
Metadata Definitions
Annotation
@NgModule
Tells Angular how to process a class.
Components that should be bootstrapped when this module is
bootstrapped.

9. bootstrap?: Array<Type<any> | any[]>
Modules
01
02
04
Angular Modules help organize an application into cohesive blocks of functionality.
Metadata Definitions
Annotation
@NgModule
Tells Angular how to process a class.
imports?: Array<Type<any> | ModuleWithProviders | any[]>
Components that should be bootstrapped when this module is
bootstrapped.
List of modules whose exported directives/pipes should be available
to templates in this module.

10. bootstrap?: Array<Type<any> | any[]>
Modules
01
02
04
Angular Modules help organize an application into cohesive blocks of functionality.
Metadata Definitions
Annotation
@NgModule
Tells Angular how to process a class.
imports?: Array<Type<any> | ModuleWithProviders | any[]>
providers?: Provider[]
Components that should be bootstrapped when this module is
bootstrapped.
List of modules whose exported directives/pipes should be available
to templates in this module.
Set of injectable objects that are available in the injector of module.

11. bootstrap?: Array<Type<any> | any[]>
Modules
01
02
04
Angular Modules help organize an application into cohesive blocks of functionality.
Metadata Definitions
Annotation
@NgModule
Tells Angular how to process a class.
imports?: Array<Type<any> | ModuleWithProviders | any[]>
providers?: Provider[]
exports?: Array<Type<any> | any[]>
Components that should be bootstrapped when this module is
bootstrapped.
List of modules whose exported directives/pipes should be available
to templates in this module.
Set of injectable objects that are available in the injector of module.
List of directives/pipes/modules that can be use within the template of any
component that is part of an Angular module.

12. bootstrap?: Array<Type<any> | any[]>
Modules
01
02
04
Angular Modules help organize an application into cohesive blocks of functionality.
Metadata Definitions
Annotation
@NgModule
Tells Angular how to process a class.
imports?: Array<Type<any> | ModuleWithProviders | any[]>
providers?: Provider[]
exports?: Array<Type<any> | any[]>
declarations?: Array<Type<any> | any[]>
Components that should be bootstrapped when this module is
bootstrapped.
List of modules whose exported directives/pipes should be available
to templates in this module.
Set of injectable objects that are available in the injector of module.
List of directives/pipes/modules that can be use within the template of any
component that is part of an Angular module.
List of directives/pipes that belong to module.

13. bootstrap?: Array<Type<any> | any[]>
Modules
01
02
04
Angular Modules help organize an application into cohesive blocks of functionality.
Metadata Definitions
Annotation
@NgModule
Tells Angular how to process a class.
imports?: Array<Type<any> | ModuleWithProviders | any[]>
providers?: Provider[]
exports?: Array<Type<any> | any[]>
declarations?: Array<Type<any> | any[]>
entryComponents?: Array<Type<any> | any[]>
Components that should be bootstrapped when this module is
bootstrapped.
List of modules whose exported directives/pipes should be available
to templates in this module.
Set of injectable objects that are available in the injector of module.
List of directives/pipes/modules that can be use within the template of any
component that is part of an Angular module.
List of directives/pipes that belong to module.
List of components that should be compiled when this module is defined.

14. bootstrap?: Array<Type<any> | any[]>
Modules
01
02
04
Angular Modules help organize an application into cohesive blocks of functionality.
Metadata Definitions
Annotation
@NgModule
Tells Angular how to process a class.
imports?: Array<Type<any> | ModuleWithProviders | any[]>
providers?: Provider[]
exports?: Array<Type<any> | any[]>
declarations?: Array<Type<any> | any[]>
entryComponents?: Array<Type<any> | any[]>
Components that should be bootstrapped when this module is
bootstrapped.
List of modules whose exported directives/pipes should be available
to templates in this module.
Set of injectable objects that are available in the injector of module.
List of directives/pipes/modules that can be use within the template of any
component that is part of an Angular module.
List of directives/pipes that belong to module.
List of components that should be compiled when this module is defined.

15. Directives
04
Angular Directives allow you to attach behavior to elements in the DOM.

16. Directives
04
Angular Directives allow you to attach behavior to elements in the DOM.
Annotation

17. Directives
04
@Directive
Angular Directives allow you to attach behavior to elements in the DOM.
Annotation

18. Directives
04
@Directive
Angular Directives allow you to attach behavior to elements in the DOM.
Annotation

19. Directives
04
@Directive
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation

20. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation

21. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Class:
`.class`
C
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation

22. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Class:
`.class`
C
Attribute:
`[attribute]`
A
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation

23. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Class:
`.class`
C
Attribute:
`[attribute]`
A
Name :
`element-name`
N
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation

24. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Class:
`.class`
C
Attribute:
`[attribute]`
A
Name :
`element-name`
N
Attribute & Value :
`[attribute=value]`
VA
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation

25. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Class:
`.class`
C
Attribute:
`[attribute]`
A
Name :
`element-name`
N
Attribute & Value :
`[attribute=value]`
VA
Selectors :
`selector1, selector2`
S
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation

26. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Class:
`.class`
C
Attribute:
`[attribute]`
A
Name :
`element-name`
N
Attribute & Value :
`[attribute=value]`
VA
Selectors :
`selector1, selector2`
S
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation
queries?: { [key: string]: any; } Configure queries that can be injected into the component.

27. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Class:
`.class`
C
Attribute:
`[attribute]`
A
Name :
`element-name`
N
Attribute & Value :
`[attribute=value]`
VA
Selectors :
`selector1, selector2`
S
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation
queries?: { [key: string]: any; } Configure queries that can be injected into the component.
host?: { [key: string]: string; } Map of class property to host element bindings for events, properties and attributes.

28. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Class:
`.class`
C
Attribute:
`[attribute]`
A
Name :
`element-name`
N
Attribute & Value :
`[attribute=value]`
VA
Selectors :
`selector1, selector2`
S
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation
queries?: { [key: string]: any; } Configure queries that can be injected into the component.
host?: { [key: string]: string; } Map of class property to host element bindings for events, properties and attributes.
inputs?: string[] List of class property names to data-bind as component inputs.

29. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Class:
`.class`
C
Attribute:
`[attribute]`
A
Name :
`element-name`
N
Attribute & Value :
`[attribute=value]`
VA
Selectors :
`selector1, selector2`
S
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation
queries?: { [key: string]: any; } Configure queries that can be injected into the component.
host?: { [key: string]: string; } Map of class property to host element bindings for events, properties and attributes.
outputs?: string[] List of class property names that expose output events that others can subscribe to.
inputs?: string[] List of class property names to data-bind as component inputs.

30. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Class:
`.class`
C
Attribute:
`[attribute]`
A
Name :
`element-name`
N
Attribute & Value :
`[attribute=value]`
VA
Selectors :
`selector1, selector2`
S
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation
queries?: { [key: string]: any; } Configure queries that can be injected into the component.
host?: { [key: string]: string; } Map of class property to host element bindings for events, properties and attributes.
outputs?: string[] List of class property names that expose output events that others can subscribe to.
inputs?: string[] List of class property names to data-bind as component inputs.
providers?: Provider[] List of providers available to this component and its children.

31. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Class:
`.class`
C
Attribute:
`[attribute]`
A
Name :
`element-name`
N
Attribute & Value :
`[attribute=value]`
VA
Selectors :
`selector1, selector2`
S
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation
queries?: { [key: string]: any; } Configure queries that can be injected into the component.
host?: { [key: string]: string; } Map of class property to host element bindings for events, properties and attributes.
outputs?: string[] List of class property names that expose output events that others can subscribe to.
inputs?: string[] List of class property names to data-bind as component inputs.
providers?: Provider[] List of providers available to this component and its children.
exportAs?: string Name under which the component instance is exported in a template.

32. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Class:
`.class`
C
Attribute:
`[attribute]`
A
Name :
`element-name`
N
Attribute & Value :
`[attribute=value]`
VA
Selectors :
`selector1, selector2`
S
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation
queries?: { [key: string]: any; } Configure queries that can be injected into the component.
host?: { [key: string]: string; } Map of class property to host element bindings for events, properties and attributes.
outputs?: string[] List of class property names that expose output events that others can subscribe to.
inputs?: string[] List of class property names to data-bind as component inputs.
providers?: Provider[] List of providers available to this component and its children.
exportAs?: string Name under which the component instance is exported in a template.

33. CSS selector that identifies this component in a template.selector?: string
Directives
04
@Directive
Class:
`.class`
C
Attribute:
`[attribute]`
A
Name :
`element-name`
N
Attribute & Value :
`[attribute=value]`
VA
Selectors :
`selector1, selector2`
S
Angular Directives allow you to attach behavior to elements in the DOM.
Metadata Definitions
Annotation
queries?: { [key: string]: any; } Configure queries that can be injected into the component.
host?: { [key: string]: string; } Map of class property to host element bindings for events, properties and attributes.
outputs?: string[] List of class property names that expose output events that others can subscribe to.
inputs?: string[] List of class property names to data-bind as component inputs.
providers?: Provider[] List of providers available to this component and its children.
exportAs?: string Name under which the component instance is exported in a template.
There are three kinds of Angular directives: Components, Attribute directives and Structural directives.

34. Components
04
Angular Components are the main way we build and specify elements and logic on the page.

35. Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Angular components are a subset of directives.

36. Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Annotation
Angular components are a subset of directives.

37. Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.

38. Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.

39. Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Metadata Definitions
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.

40. List of providers available to this component and its view children.viewProviders?: Provider[]
Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Metadata Definitions
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.

41. List of providers available to this component and its view children.viewProviders?: Provider[]
Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Metadata Definitions
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.
interpolation?: [string, string] Custom interpolation markers used in this component's template {{}}.

42. List of providers available to this component and its view children.viewProviders?: Provider[]
Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Metadata Definitions
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.
interpolation?: [string, string] Custom interpolation markers used in this component's template {{}}.
templateUrl?: string Url to an external file containing a template for the view.

43. List of providers available to this component and its view children.viewProviders?: Provider[]
Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Metadata Definitions
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.
interpolation?: [string, string] Custom interpolation markers used in this component's template {{}}.
templateUrl?: string Url to an external file containing a template for the view.
template?: string Inline-defined template for the view.

44. List of providers available to this component and its view children.viewProviders?: Provider[]
Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Metadata Definitions
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.
interpolation?: [string, string] Custom interpolation markers used in this component's template {{}}.
templateUrl?: string Url to an external file containing a template for the view.
entryComponents?: Array<Type<any> | any[]> List of components that are dynamically inserted into the view.
template?: string Inline-defined template for the view.

45. List of providers available to this component and its view children.viewProviders?: Provider[]
Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Metadata Definitions
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.
interpolation?: [string, string] Custom interpolation markers used in this component's template {{}}.
templateUrl?: string Url to an external file containing a template for the view.
entryComponents?: Array<Type<any> | any[]> List of components that are dynamically inserted into the view.
template?: string Inline-defined template for the view.
changeDetection?:ChangeDetectionStrategy Change detection strategy used by this component (OnPush, Default).

46. List of providers available to this component and its view children.viewProviders?: Provider[]
Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Metadata Definitions
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.
interpolation?: [string, string] Custom interpolation markers used in this component's template {{}}.
templateUrl?: string Url to an external file containing a template for the view.
entryComponents?: Array<Type<any> | any[]> List of components that are dynamically inserted into the view.
template?: string Inline-defined template for the view.
changeDetection?:ChangeDetectionStrategy Change detection strategy used by this component (OnPush, Default).
animations?: AnimationEntryMetadata[] List of animations of this component.

47. List of providers available to this component and its view children.viewProviders?: Provider[]
Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Metadata Definitions
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.
interpolation?: [string, string] Custom interpolation markers used in this component's template {{}}.
templateUrl?: string Url to an external file containing a template for the view.
entryComponents?: Array<Type<any> | any[]> List of components that are dynamically inserted into the view.
template?: string Inline-defined template for the view.
changeDetection?:ChangeDetectionStrategy Change detection strategy used by this component (OnPush, Default).
styleUrls?: string[] List of urls to stylesheets to be applied to this component's view.
animations?: AnimationEntryMetadata[] List of animations of this component.

48. List of providers available to this component and its view children.viewProviders?: Provider[]
Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Metadata Definitions
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.
interpolation?: [string, string] Custom interpolation markers used in this component's template {{}}.
templateUrl?: string Url to an external file containing a template for the view.
entryComponents?: Array<Type<any> | any[]> List of components that are dynamically inserted into the view.
template?: string Inline-defined template for the view.
changeDetection?:ChangeDetectionStrategy Change detection strategy used by this component (OnPush, Default).
styles?: string[] Inline-defined styles to be applied to this component's view.
styleUrls?: string[] List of urls to stylesheets to be applied to this component's view.
animations?: AnimationEntryMetadata[] List of animations of this component.

49. List of providers available to this component and its view children.viewProviders?: Provider[]
Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Metadata Definitions
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.
interpolation?: [string, string] Custom interpolation markers used in this component's template {{}}.
templateUrl?: string Url to an external file containing a template for the view.
entryComponents?: Array<Type<any> | any[]> List of components that are dynamically inserted into the view.
template?: string Inline-defined template for the view.
changeDetection?:ChangeDetectionStrategy Change detection strategy used by this component (OnPush, Default).
styles?: string[] Inline-defined styles to be applied to this component's view.
encapsulation?: ViewEncapsulation Style encapsulation strategy used by this component (Native, Emulated, None)
styleUrls?: string[] List of urls to stylesheets to be applied to this component's view.
animations?: AnimationEntryMetadata[] List of animations of this component.

50. List of providers available to this component and its view children.viewProviders?: Provider[]
Components
04
Angular Components are the main way we build and specify elements and logic on the page.
Metadata Definitions
Annotation
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.
interpolation?: [string, string] Custom interpolation markers used in this component's template {{}}.
templateUrl?: string Url to an external file containing a template for the view.
entryComponents?: Array<Type<any> | any[]> List of components that are dynamically inserted into the view.
template?: string Inline-defined template for the view.
changeDetection?:ChangeDetectionStrategy Change detection strategy used by this component (OnPush, Default).
styles?: string[] Inline-defined styles to be applied to this component's view.
encapsulation?: ViewEncapsulation Style encapsulation strategy used by this component (Native, Emulated, None)
styleUrls?: string[] List of urls to stylesheets to be applied to this component's view.
animations?: AnimationEntryMetadata[] List of animations of this component.

51. Component Lifecycle
A component has a lifecycle managed by Angular itself.
Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.

52. Component Lifecycle
A component has a lifecycle managed by Angular itself.
Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.

53. Component Lifecycle
A component has a lifecycle managed by Angular itself.
Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.

54. Component Lifecycle
A component has a lifecycle managed by Angular itself.
Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.
Called before ngOnInit
and whenever one or
more data-bound input
properties change.
1 ngOnChanges

55. Component Lifecycle
A component has a lifecycle managed by Angular itself.
Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.
Called before ngOnInit
and whenever one or
more data-bound input
properties change.
1 ngOnChanges
Called once, after the
first ngOnChanges.
2 ngOnInit

56. Component Lifecycle
A component has a lifecycle managed by Angular itself.
Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.
Called before ngOnInit
and whenever one or
more data-bound input
properties change.
1 ngOnChanges
Called once, after the
first ngOnChanges.
2 ngOnInit
Called during every change
detection run, immediately
after ngOnChanges and
ngOnInit.
3 ngDoCheck

57. Component Lifecycle
A component has a lifecycle managed by Angular itself.
Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.
Called before ngOnInit
and whenever one or
more data-bound input
properties change.
1 ngOnChanges
Called once, after the
first ngOnChanges.
2 ngOnInit
Called during every change
detection run, immediately
after ngOnChanges and
ngOnInit.
3 ngDoCheck
Respond after Angular
projects external content
into the component's view.
4 ngAfterContentInit

58. Component Lifecycle
A component has a lifecycle managed by Angular itself.
Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.
Called before ngOnInit
and whenever one or
more data-bound input
properties change.
1 ngOnChanges
Called once, after the
first ngOnChanges.
2 ngOnInit
Called during every change
detection run, immediately
after ngOnChanges and
ngOnInit.
3 ngDoCheck
Respond after Angular
projects external content
into the component's view.
4 ngAfterContentInit
Respond after Angular checks the
content projected into the
component.
5 ngAfterContentChecked

59. Component Lifecycle
A component has a lifecycle managed by Angular itself.
Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.
Called before ngOnInit
and whenever one or
more data-bound input
properties change.
1 ngOnChanges
Called once, after the
first ngOnChanges.
2 ngOnInit
Called during every change
detection run, immediately
after ngOnChanges and
ngOnInit.
3 ngDoCheck
Respond after Angular
projects external content
into the component's view.
4 ngAfterContentInit
Respond after Angular initializes the
component's views and child views.
6 ngAfterViewInit
Respond after Angular checks the
content projected into the
component.
5 ngAfterContentChecked

60. Component Lifecycle
A component has a lifecycle managed by Angular itself.
Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.
Called before ngOnInit
and whenever one or
more data-bound input
properties change.
1 ngOnChanges
Called once, after the
first ngOnChanges.
2 ngOnInit
Called during every change
detection run, immediately
after ngOnChanges and
ngOnInit.
3 ngDoCheck
Respond after Angular
projects external content
into the component's view.
4 ngAfterContentInit
Respond after Angular initializes the
component's views and child views.
6 ngAfterViewInit
Respond after Angular
checks the component's
views and child views.
7 ngAfterViewChecked
Respond after Angular checks the
content projected into the
component.
5 ngAfterContentChecked

61. Component Lifecycle
A component has a lifecycle managed by Angular itself.
Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.
Called before ngOnInit
and whenever one or
more data-bound input
properties change.
1 ngOnChanges
Called once, after the
first ngOnChanges.
2 ngOnInit
Called during every change
detection run, immediately
after ngOnChanges and
ngOnInit.
3 ngDoCheck
Respond after Angular
projects external content
into the component's view.
4 ngAfterContentInit
Respond after Angular initializes the
component's views and child views.
6 ngAfterViewInit
Respond after Angular
checks the component's
views and child views.
7 ngAfterViewChecked
Called just before
Angular destroys the
directive/component.
8 ngOnDestroy
Respond after Angular checks the
content projected into the
component.
5 ngAfterContentChecked

62. Basic Application
An Angular application is a tree of components.
Every Angular application has at least one module: the root module.

63. Basic Application
An Angular application is a tree of components.
Every Angular application has at least one module: the root module.
01Create the root
module*

64. Basic Application
An Angular application is a tree of components.
Every Angular application has at least one module: the root module.
*By convention it's a class called AppModule in a file named app.module.ts.
01Create the root
module*

65. Basic Application
An Angular application is a tree of components.
Every Angular application has at least one module: the root module.
*By convention it's a class called AppModule in a file named app.module.ts.
01Create the root
module*
02Create the entry
component of
module

66. Basic Application
An Angular application is a tree of components.
Every Angular application has at least one module: the root module.
*By convention it's a class called AppModule in a file named app.module.ts.
01Create the root
module*
02Create the entry
component of
module
03Bootstrap the root
module

67. Basic Application (Code)

68. Basic Application (Code)

69. Basic Application (Code)

70. Basic Application (Code)

71. Basic Application (Code)

72. Basic Application (Code)
Angular Tech Session 1 + 2 = 3

73. Architecture

74. Architecture
Libraries
shim
Rx Reflect Zone System

75. Architecture
Libraries
shim
Rx Reflect Zone System
Angular Frameworks
Router Http Compiler Platform
core & common

76. Architecture
Libraries
shim
Rx Reflect Zone System
Angular Frameworks
Router Http Compiler Platform
core & common
Application

77. Bootstrap
A manual bootstrap of the application must be done.

78. Bootstrap
A manual bootstrap of the application must be done.

79. Bootstrap
A manual bootstrap of the application must be done.

80. Bootstrap
A manual bootstrap of the application must be done.

81. Expressions
Angular expressions employs a subset of JavaScript syntax supplemented with a few special
operators for specific scenarios.

82. Expressions
Angular expressions employs a subset of JavaScript syntax supplemented with a few special
operators for specific scenarios.
{{expression}}

83. Expressions
Angular expressions employs a subset of JavaScript syntax supplemented with a few special
operators for specific scenarios.
{{expression}}
((expression))

84. Expressions
Angular expressions employs a subset of JavaScript syntax supplemented with a few special
operators for specific scenarios.
{{expression}}
((expression))

85. Expressions
Angular expressions employs a subset of JavaScript syntax supplemented with a few special
operators for specific scenarios.
{{expression}}
((expression))

86. Expressions
Angular expressions employs a subset of JavaScript syntax supplemented with a few special
operators for specific scenarios.
{{expression}}
((expression))
Angular Tech Session 1+2 = {{1 +2}} | 1 + 2 = 3

87. Expressions
Angular expressions employs a subset of JavaScript syntax supplemented with a few special
operators for specific scenarios.
{{expression}}
((expression))
Angular Tech Session 1+2 = {{1 +2}} | 1 + 2 = 3
There are some restrictions for literals used in interpolation (INTERPOLATION_BLACKLIST_REGEXPS).

88. Data Binding / Events

89. Data Binding / Events
Data Source
View Target

90. Data Binding / Events
Component
DOM
Data Source
View Target

91. Data Binding / Events
Component
DOM
Interpolation
{{ }}
Data Source
View Target

92. Data Binding / Events
Component
DOM
Interpolation
{{ }}
Property
[property]
bind-target
Data Source
View Target

93. Data Binding / Events
Component
DOM
Interpolation
{{ }}
Property
[property]
bind-target
Attribute
[attr.attr-name]
Data Source
View Target

94. Data Binding / Events
Component
DOM
Interpolation
{{ }}
Property
[property]
bind-target
Attribute
[attr.attr-name]
Class
[class.class-name]
Data Source
View Target

95. Data Binding / Events
Component
DOM
Interpolation
{{ }}
Property
[property]
bind-target
Attribute
[attr.attr-name]
Class
[class.class-name]
Style
[style.style-property]
Data Source
View Target

96. Data Binding / Events
Component
DOM
Interpolation
{{ }}
Property
[property]
bind-target
Attribute
[attr.attr-name]
Class
[class.class-name]
Style
[style.style-property]
Data Source
View Target
View Source
Data Source

97. Data Binding / Events
Component
DOM
Interpolation
{{ }}
Property
[property]
bind-target
Attribute
[attr.attr-name]
Class
[class.class-name]
Target Event
(target) = "statement"
on-target = "statement"
Style
[style.style-property]
Data Source
View Target
View Source
Data Source

98. Data Binding / Events
Component
DOM
Interpolation
{{ }}
Property
[property]
bind-target
Attribute
[attr.attr-name]
Class
[class.class-name]
Target Event
(target) = "statement"
on-target = "statement"
Style
[style.style-property]
Custom Events
EventEmitter
Data Source
View Target
View Source
Data Source

99. Data Binding / Events
Component
DOM
Interpolation
{{ }}
Property
[property]
bind-target
Attribute
[attr.attr-name]
Class
[class.class-name]
Target Event
(target) = "statement"
on-target = "statement"
Style
[style.style-property]
Custom Events
EventEmitter
Data Source
View Target
View Source
Data Source
Two-way
[(target)] = "expression"
bindon-target = "expression"

100. Data Binding / Events
Component
DOM
Interpolation
{{ }}
Property
[property]
bind-target
Attribute
[attr.attr-name]
Class
[class.class-name]
Target Event
(target) = "statement"
on-target = "statement"
Style
[style.style-property]
Custom Events
EventEmitter
Data Source
View Target
View Source
Data Source
Two-way
[(target)] = "expression"
bindon-target = "expression"

101. Communication

102. Services
Services are substitutable objects that are wired together using
dependency injection (DI).

103. Services
Services are substitutable objects that are wired together using
dependency injection (DI).
Share code across an application.

104. Services
Services are substitutable objects that are wired together using
dependency injection (DI).
Share code across an application.
01Create a class.

105. Services
Services are substitutable objects that are wired together using
dependency injection (DI).
Share code across an application.
01Create a class.
02Import Injectable
function and applied
that function as an
@Injectable()
decorator.

106. Services
Services are substitutable objects that are wired together using
dependency injection (DI).
Share code across an application.
01Create a class.
02Import Injectable
function and applied
that function as an
@Injectable()
decorator.
03Import and register
service.

107. Services
Services are substitutable objects that are wired together using
dependency injection (DI).
Share code across an application.
01Create a class.
02Import Injectable
function and applied
that function as an
@Injectable()
decorator.
03Import and register
service.
SUGGESTION: ADD @INJECTABLE() TO EVERY SERVICE CLASS.

108. Services (Code)

109. Services (Code)

110. Services (Code)

111. Services (Code)

112. Dependency Injection (DI)
The Angular injector subsystem is in charge of creating components, resolving their
dependencies, and providing them to other components as requested.

113. Dependency Injection (DI)
The Angular injector subsystem is in charge of creating components, resolving their
dependencies, and providing them to other components as requested.
Angular creates an application-wide injector for us during the bootstrap process.
An Injector is itself an injectable service.

114. Dependency Injection (DI)
The Angular injector subsystem is in charge of creating components, resolving their
dependencies, and providing them to other components as requested.
Angular creates an application-wide injector for us during the bootstrap process.
An Injector is itself an injectable service.
Dependencies are singletons within the scope of an injector.
DI is an hierarchical injection system, which means that nested injectors can create
their own service instances.

115. Dependency Injection (DI)
The Angular injector subsystem is in charge of creating components, resolving their
dependencies, and providing them to other components as requested.
Angular creates an application-wide injector for us during the bootstrap process.
An Injector is itself an injectable service.
Dependencies are singletons within the scope of an injector.
DI is an hierarchical injection system, which means that nested injectors can create
their own service instances.
Every component has an injector.
(even if it shares that injector with another
component) and there may be many different
injector instances operating at different
levels of the component tree.

116. Dependency Injection (DI)
The Angular injector subsystem is in charge of creating components, resolving their
dependencies, and providing them to other components as requested.
Angular creates an application-wide injector for us during the bootstrap process.
An Injector is itself an injectable service.
Dependencies are singletons within the scope of an injector.
DI is an hierarchical injection system, which means that nested injectors can create
their own service instances.
Every component has an injector.
(even if it shares that injector with another
component) and there may be many different
injector instances operating at different
levels of the component tree.

117. Time for (DEMO)

118. Time for (DEMO)
https://github.com/lapusneanugabi/Angular-TechSession.git

119. THANK YOU!