SlideShare a Scribd company logo

Angular2

Gabi Costel Lapusneanu, profile picture
Gabi Costel Lapusneanu

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.

Technology
1 of 119
Downloaded 23 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
Angular TECH SESSION Lapusneanu Gabi Costel
Key Features 01 Modules 02 03 Directives Components 04Data Binding / Events 05Services Dependency Injection 06
Modules 01 02 04 Angular Modules help organize an application into cohesive blocks of functionality.
Modules 01 02 04 Angular Modules help organize an application into cohesive blocks of functionality. Annotation
Modules 01 02 04 Angular Modules help organize an application into cohesive blocks of functionality. Annotation @NgModule Tells Angular how to process a class.
Modules 01 02 04 Angular Modules help organize an application into cohesive blocks of functionality. Annotation @NgModule Tells Angular how to process a class.
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.
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.
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.
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.
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.
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.
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.
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.
Directives 04 Angular Directives allow you to attach behavior to elements in the DOM.
Directives 04 Angular Directives allow you to attach behavior to elements in the DOM. Annotation
Directives 04 @Directive Angular Directives allow you to attach behavior to elements in the DOM. Annotation
Directives 04 @Directive Angular Directives allow you to attach behavior to elements in the DOM. Annotation
Directives 04 @Directive Angular Directives allow you to attach behavior to elements in the DOM. Metadata Definitions Annotation
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
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
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
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
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
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
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.
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.
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.
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.
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.
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.
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.
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.
Components 04 Angular Components are the main way we build and specify elements and logic on the page.
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.
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.
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.
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.
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.
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.
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 {{}}.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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
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
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
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
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
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
Basic Application An Angular application is a tree of components. Every Angular application has at least one module: the root module.
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*
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*
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
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
Basic Application (Code)
Basic Application (Code)
Basic Application (Code)
Basic Application (Code)
Basic Application (Code)
Basic Application (Code) Angular Tech Session 1 + 2 = 3
Architecture
Architecture Libraries shim Rx Reflect Zone System
Architecture Libraries shim Rx Reflect Zone System Angular Frameworks Router Http Compiler Platform core & common
Architecture Libraries shim Rx Reflect Zone System Angular Frameworks Router Http Compiler Platform core & common Application
Bootstrap A manual bootstrap of the application must be done.
Bootstrap A manual bootstrap of the application must be done.
Bootstrap A manual bootstrap of the application must be done.
Bootstrap A manual bootstrap of the application must be done.
Expressions Angular expressions employs a subset of JavaScript syntax supplemented with a few special operators for specific scenarios.
Expressions Angular expressions employs a subset of JavaScript syntax supplemented with a few special operators for specific scenarios. {{expression}}
Expressions Angular expressions employs a subset of JavaScript syntax supplemented with a few special operators for specific scenarios. {{expression}} ((expression))
Expressions Angular expressions employs a subset of JavaScript syntax supplemented with a few special operators for specific scenarios. {{expression}} ((expression))
Expressions Angular expressions employs a subset of JavaScript syntax supplemented with a few special operators for specific scenarios. {{expression}} ((expression))
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
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).
Data Binding / Events
Data Binding / Events Data Source View Target
Data Binding / Events Component DOM Data Source View Target
Data Binding / Events Component DOM Interpolation {{ }} Data Source View Target
Data Binding / Events Component DOM Interpolation {{ }} Property [property] bind-target Data Source View Target
Data Binding / Events Component DOM Interpolation {{ }} Property [property] bind-target Attribute [attr.attr-name] Data Source View Target
Data Binding / Events Component DOM Interpolation {{ }} Property [property] bind-target Attribute [attr.attr-name] Class [class.class-name] Data Source View Target
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
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
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
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
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"
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"
Communication
Services Services are substitutable objects that are wired together using dependency injection (DI).
Services Services are substitutable objects that are wired together using dependency injection (DI). Share code across an application.
Services Services are substitutable objects that are wired together using dependency injection (DI). Share code across an application. 01Create a class.
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.
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.
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.
Services (Code)
Services (Code)
Services (Code)
Services (Code)
Dependency Injection (DI) The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.
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.
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.
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.
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.
Time for (DEMO)
Time for (DEMO) https://github.com/lapusneanugabi/Angular-TechSession.git
THANK YOU!

More Related Content

PDF
Angular 2: core concepts
Codemotion
 
ODP
Building scalable modular app with Angular2 concept
kzw
 
PDF
Angular 2 - The Next Framework
Commit University
 
PDF
Angular2 with TypeScript
Rohit Bishnoi
 
PPTX
Angular 2
alinabiliashevych
 
PDF
The productive developer guide to Angular 2
Maurice De Beijer [MVP]
 
PDF
Tech Webinar: Angular 2, Introduction to a new framework
Codemotion
 
PDF
Angular2 with type script
Ravi Mone
 
Angular 2: core concepts
Codemotion
 
Building scalable modular app with Angular2 concept
kzw
 
Angular 2 - The Next Framework
Commit University
 
Angular2 with TypeScript
Rohit Bishnoi
 
Angular 2
alinabiliashevych
 
The productive developer guide to Angular 2
Maurice De Beijer [MVP]
 
Tech Webinar: Angular 2, Introduction to a new framework
Codemotion
 
Angular2 with type script
Ravi Mone
 

What's hot (20)

ODP
Introduction to Angular 2
Knoldus Inc.
 
PPTX
What’s new in angular 2
Ran Wahle
 
PPTX
Angular js 2
Ran Wahle
 
PDF
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Codemotion
 
PPTX
Async patterns in javascript
Ran Wahle
 
PDF
Data Flow Patterns in Angular 2 - Sebastian Müller
Sebastian Holstein
 
PPTX
Angular 5
Bartłomiej Narożnik
 
PDF
Introduction to Angular 2
Naveen Pete
 
PPTX
AngularJS2 / TypeScript / CLI
Domenico Rutigliano
 
PDF
The evolution of Angular 2 @ AngularJS Munich Meetup #5
Johannes Weber
 
PDF
Angular Dependency Injection
Nir Kaufman
 
PPTX
Migrating an application from Angular 1 to Angular 2
Ross Dederer
 
PDF
Commit University - Exploring Angular 2
Commit University
 
PDF
Angular2 workshop
Nir Kaufman
 
PDF
Angular2 intro
Shawn McKay
 
PPTX
Introduction to Angular2
Ivan Matiishyn
 
PDF
AngularJS 2.0 Jumpstart
Filipe Falcão
 
PDF
Angular2 - In Action
Sebastian Pożoga
 
PDF
Angular2 Development for Java developers
Yakov Fain
 
PPTX
Angular2 for Beginners
Oswald Campesato
 
Introduction to Angular 2
Knoldus Inc.
 
What’s new in angular 2
Ran Wahle
 
Angular js 2
Ran Wahle
 
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Codemotion
 
Async patterns in javascript
Ran Wahle
 
Data Flow Patterns in Angular 2 - Sebastian Müller
Sebastian Holstein
 
Angular 5
Bartłomiej Narożnik
 
Introduction to Angular 2
Naveen Pete
 
AngularJS2 / TypeScript / CLI
Domenico Rutigliano
 
The evolution of Angular 2 @ AngularJS Munich Meetup #5
Johannes Weber
 
Angular Dependency Injection
Nir Kaufman
 
Migrating an application from Angular 1 to Angular 2
Ross Dederer
 
Commit University - Exploring Angular 2
Commit University
 
Angular2 workshop
Nir Kaufman
 
Angular2 intro
Shawn McKay
 
Introduction to Angular2
Ivan Matiishyn
 
AngularJS 2.0 Jumpstart
Filipe Falcão
 
Angular2 - In Action
Sebastian Pożoga
 
Angular2 Development for Java developers
Yakov Fain
 
Angular2 for Beginners
Oswald Campesato
 
Ad

Similar to Angular2 (20)

PDF
Angular2
SitaPrajapati
 
ODP
Angular2
kunalkumar376
 
PDF
better-apps-angular-2-day1.pdf and home
ChethanGowda886434
 
PPTX
Angular crash course
Birhan Nega
 
PDF
Angular
Vinod Kumar Kayartaya
 
PPT
17612235.ppt
yovixi5669
 
PPTX
Angularjs2 presentation
dharisk
 
PPTX
Angularj2.0
Mallikarjuna G D
 
PPTX
Angular2 + rxjs
Christoffer Noring
 
PPTX
Angular Course.pptx
Imdad Ullah
 
PPTX
Angular Basics.pptx
AshokKumar616995
 
PPTX
Angular Components.pptx
AshokKumar616995
 
PDF
Building Blocks of Angular 2 and ASP.NET Core
Levi Fuller
 
PPTX
Angular 2 in-1
GlobalLogic Ukraine
 
PPTX
Introduction to Angular2
Knoldus Inc.
 
PPTX
Angular 2
Pramod Raghav
 
PPTX
AngularJS 1.x - your first application (problems and solutions)
Igor Talevski
 
PPTX
Angular 9
Raja Vishnu
 
PPTX
Building a website with angular
Joseph Jorden
 
PPTX
mean stack
michaelaaron25322
 
Angular2
SitaPrajapati
 
Angular2
kunalkumar376
 
better-apps-angular-2-day1.pdf and home
ChethanGowda886434
 
Angular crash course
Birhan Nega
 
Angular
Vinod Kumar Kayartaya
 
17612235.ppt
yovixi5669
 
Angularjs2 presentation
dharisk
 
Angularj2.0
Mallikarjuna G D
 
Angular2 + rxjs
Christoffer Noring
 
Angular Course.pptx
Imdad Ullah
 
Angular Basics.pptx
AshokKumar616995
 
Angular Components.pptx
AshokKumar616995
 
Building Blocks of Angular 2 and ASP.NET Core
Levi Fuller
 
Angular 2 in-1
GlobalLogic Ukraine
 
Introduction to Angular2
Knoldus Inc.
 
Angular 2
Pramod Raghav
 
AngularJS 1.x - your first application (problems and solutions)
Igor Talevski
 
Angular 9
Raja Vishnu
 
Building a website with angular
Joseph Jorden
 
mean stack
michaelaaron25322
 
Ad

Recently uploaded (20)

PDF
Getting Started with Data Integration: FME Form 101
Safe Software
 
PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
PDF
NewMind AI Weekly Chronicles - August'25-Week II
NewMind AI
 
PPTX
OMC Textile Division Presentation 2021.pptx
JahangirAlam816069
 
PDF
A comparative study of natural language inference in Swahili using monolingua...
IAESIJAI
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
PPTX
TLE Review Electricity (Electricity).pptx
JayPolicarpio2
 
PPTX
Programs and apps: productivity, graphics, security and other tools
4mqw9zch22
 
PDF
A comparative analysis of optical character recognition models for extracting...
IAESIJAI
 
PDF
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
ssuser28425f
 
PPTX
A Presentation on Artificial Intelligence
memembruh336
 
PPTX
TechTalks-8-2019-Service-Management-ITIL-Refresh-ITIL-4-Framework-Supports-Ou...
bonakiduza1024
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
PDF
A novel scalable deep ensemble learning framework for big data classification...
IAESIJAI
 
PDF
WOOl fibre morphology and structure.pdf for textiles
Rajendrakumar868651
 
PDF
project resource management chapter-09.pdf
ssuser00e6e21
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PDF
Hybrid model detection and classification of lung cancer
IAESIJAI
 
PDF
1 - Historical Antecedents, Social Consideration.pdf
tuazon2030627
 
Getting Started with Data Integration: FME Form 101
Safe Software
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
NewMind AI Weekly Chronicles - August'25-Week II
NewMind AI
 
OMC Textile Division Presentation 2021.pptx
JahangirAlam816069
 
A comparative study of natural language inference in Swahili using monolingua...
IAESIJAI
 
Encapsulation theory and applications.pdf
gurumoop
 
TLE Review Electricity (Electricity).pptx
JayPolicarpio2
 
Programs and apps: productivity, graphics, security and other tools
4mqw9zch22
 
A comparative analysis of optical character recognition models for extracting...
IAESIJAI
 
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
ssuser28425f
 
A Presentation on Artificial Intelligence
memembruh336
 
TechTalks-8-2019-Service-Management-ITIL-Refresh-ITIL-4-Framework-Supports-Ou...
bonakiduza1024
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
A novel scalable deep ensemble learning framework for big data classification...
IAESIJAI
 
WOOl fibre morphology and structure.pdf for textiles
Rajendrakumar868651
 
project resource management chapter-09.pdf
ssuser00e6e21
 
Approach and Philosophy of On baking technology
30anthuong17
 
Hybrid model detection and classification of lung cancer
IAESIJAI
 
1 - Historical Antecedents, Social Consideration.pdf
tuazon2030627
 

Angular2

  • 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
  • 72. Basic Application (Code) Angular Tech Session 1 + 2 = 3
  • 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"
  • 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.
  • 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.