SlideShare a Scribd company logo
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

What's hot

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

What's hot (20)

Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
What’s new in angular 2
What’s new in angular 2What’s new in angular 2
What’s new in angular 2
 
Angular js 2
Angular js 2Angular js 2
Angular js 2
 
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
 
Async patterns in javascript
Async patterns in javascriptAsync patterns in javascript
Async patterns in javascript
 
Data Flow Patterns in Angular 2 - Sebastian Müller
Data Flow Patterns in Angular 2 -  Sebastian MüllerData Flow Patterns in Angular 2 -  Sebastian Müller
Data Flow Patterns in Angular 2 - Sebastian Müller
 
Angular 5
Angular 5Angular 5
Angular 5
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
AngularJS2 / TypeScript / CLI
AngularJS2 / TypeScript / CLIAngularJS2 / TypeScript / CLI
AngularJS2 / TypeScript / CLI
 
The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5
 
Angular Dependency Injection
Angular Dependency InjectionAngular Dependency Injection
Angular Dependency Injection
 
Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2 Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2
 
Commit University - Exploring Angular 2
Commit University - Exploring Angular 2Commit University - Exploring Angular 2
Commit University - Exploring Angular 2
 
Angular2 workshop
Angular2 workshopAngular2 workshop
Angular2 workshop
 
Angular2 intro
Angular2 introAngular2 intro
Angular2 intro
 
Introduction to Angular2
Introduction to Angular2Introduction to Angular2
Introduction to Angular2
 
AngularJS 2.0 Jumpstart
AngularJS 2.0 JumpstartAngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
 
Angular2 - In Action
Angular2  - In ActionAngular2  - In Action
Angular2 - In Action
 
Angular2 Development for Java developers
Angular2 Development for Java developersAngular2 Development for Java developers
Angular2 Development for Java developers
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
 

Similar to Angular2

17612235.ppt
17612235.ppt17612235.ppt
17612235.ppt
yovixi5669
 
Angular2
Angular2Angular2
Angular2
kunalkumar376
 
Angular Directive.pptx
Angular Directive.pptxAngular Directive.pptx
Angular Directive.pptx
AshokKumar616995
 
Building blocks of Angular
Building blocks of AngularBuilding blocks of Angular
Building blocks of Angular
Knoldus Inc.
 
Directives.pptx
Directives.pptxDirectives.pptx
Directives.pptx
chauhanchauhan6354
 
Angular Basics.pptx
Angular Basics.pptxAngular Basics.pptx
Angular Basics.pptx
AshokKumar616995
 
angularJs Workshop
angularJs WorkshopangularJs Workshop
angularJs Workshop
Ran Wahle
 
Angular
AngularAngular
Angular Components.pptx
Angular Components.pptxAngular Components.pptx
Angular Components.pptx
AshokKumar616995
 
Services Factory Provider Value Constant - AngularJS
Services Factory Provider Value Constant - AngularJSServices Factory Provider Value Constant - AngularJS
Services Factory Provider Value Constant - AngularJS
Sumanth krishna
 
Handlebars & Require JS
Handlebars  & Require JSHandlebars  & Require JS
Handlebars & Require JS
Ivano Malavolta
 
Handlebars and Require.js
Handlebars and Require.jsHandlebars and Require.js
Handlebars and Require.js
Ivano Malavolta
 
Unit 2 - Data Binding.pptx
Unit 2 - Data Binding.pptxUnit 2 - Data Binding.pptx
Unit 2 - Data Binding.pptx
Malla Reddy University
 
Angular 9
Angular 9 Angular 9
Angular 9
Raja Vishnu
 
Building Blocks of Angular 2 and ASP.NET Core
Building Blocks of Angular 2 and ASP.NET CoreBuilding Blocks of Angular 2 and ASP.NET Core
Building Blocks of Angular 2 and ASP.NET Core
Levi Fuller
 
Angular 2
Angular 2Angular 2
Angular 2
Pramod Raghav
 
Angular Course.pptx
Angular Course.pptxAngular Course.pptx
Angular Course.pptx
Imdad Ullah
 
Angular crash course
Angular crash courseAngular crash course
Angular crash course
Birhan Nega
 
Angular Framework ppt for beginners and advanced
Angular Framework ppt for beginners and advancedAngular Framework ppt for beginners and advanced
Angular Framework ppt for beginners and advanced
Preetha Ganapathi
 
Angular js-crash-course
Angular js-crash-courseAngular js-crash-course
Angular js-crash-course
Keith Bloomfield
 

Similar to Angular2 (20)

17612235.ppt
17612235.ppt17612235.ppt
17612235.ppt
 
Angular2
Angular2Angular2
Angular2
 
Angular Directive.pptx
Angular Directive.pptxAngular Directive.pptx
Angular Directive.pptx
 
Building blocks of Angular
Building blocks of AngularBuilding blocks of Angular
Building blocks of Angular
 
Directives.pptx
Directives.pptxDirectives.pptx
Directives.pptx
 
Angular Basics.pptx
Angular Basics.pptxAngular Basics.pptx
Angular Basics.pptx
 
angularJs Workshop
angularJs WorkshopangularJs Workshop
angularJs Workshop
 
Angular
AngularAngular
Angular
 
Angular Components.pptx
Angular Components.pptxAngular Components.pptx
Angular Components.pptx
 
Services Factory Provider Value Constant - AngularJS
Services Factory Provider Value Constant - AngularJSServices Factory Provider Value Constant - AngularJS
Services Factory Provider Value Constant - AngularJS
 
Handlebars & Require JS
Handlebars  & Require JSHandlebars  & Require JS
Handlebars & Require JS
 
Handlebars and Require.js
Handlebars and Require.jsHandlebars and Require.js
Handlebars and Require.js
 
Unit 2 - Data Binding.pptx
Unit 2 - Data Binding.pptxUnit 2 - Data Binding.pptx
Unit 2 - Data Binding.pptx
 
Angular 9
Angular 9 Angular 9
Angular 9
 
Building Blocks of Angular 2 and ASP.NET Core
Building Blocks of Angular 2 and ASP.NET CoreBuilding Blocks of Angular 2 and ASP.NET Core
Building Blocks of Angular 2 and ASP.NET Core
 
Angular 2
Angular 2Angular 2
Angular 2
 
Angular Course.pptx
Angular Course.pptxAngular Course.pptx
Angular Course.pptx
 
Angular crash course
Angular crash courseAngular crash course
Angular crash course
 
Angular Framework ppt for beginners and advanced
Angular Framework ppt for beginners and advancedAngular Framework ppt for beginners and advanced
Angular Framework ppt for beginners and advanced
 
Angular js-crash-course
Angular js-crash-courseAngular js-crash-course
Angular js-crash-course
 

Recently uploaded

Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 

Recently uploaded (20)

Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 

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.