Angular 2 Components Training


Angular 2 Components Training

You will start with learning about the Angular 2 Components architecture and how components differ from Angular directives in Angular 1. You will then move on to quickly set up an Angular 2 development environment and grasp the basics of TypeScript. With this strong foundation in place, you will start building components.


  • First look to the Angular 2 Components architecture
  • Creating your own Angular 2 Component
  • Integrating your components with third party components


Angular 2 Components Training


What You Will Learn


  • Break your application into reusable dynamic components
  • Take advantage of TypeScript in Angular 2
  • Migrate your Angular 1 directive to an Angular 2 Component
  • Understand the Angular 2 component structure and APIs
  • Hook to component life cycle events
  • Bind dynamic data to your component properties
  • Communicate with other components using events
  • Compose complicated UIs from simple components


Course Contents

1. Angular 2 Component Architecture

The Model-View-Controller pattern
MVC in Angular 1
Moving from views to components
Defining components
Breaking the application into components

2. Setting Up an Angular 2 Development Environment with angular-cli

Node and npm
Installing angular-cli
Generating an Angular 2 project
Choosing an IDE

3. The TypeScript Primer

Introduction to TypeScript
Managing dependencies with modules
The type system
Using decorators

4. Building a Basic Component

Bootstrapping the application
The component selector
The component template
The shadow DOM
Encapsulation modes
Data bindings

5. Building Dynamic Components

Data interpolation

Core directives
Property bindings
Event bindings
Two-way bindings

6. Component Communication

Passing data via properties
Emitting custom events
Querying child components with the parent component


7. Putting It All Together

Preparing our development environment
The accordion component
The component life cycle
Life cycle event interfaces
Other life cycle events

8. Integrating Third-Party Components

Preparing our development environment
Importing dependencies
Bootstrap tooltip component
Bootstrap collapse component

9. Angular 2 Directives

Components and directives in Angular 2
Preparing our development environment
The basic attribute directive
The basic structural directive

Call – +91 97899 68765 / 044 – 42645495

Weekdays / Fast Track / Weekends / Corporate Training modes available

Angular 2 Components Training Also available across India in Bangalore, Pune, Hyderabad, Mumbai, Kolkata, Ahmedabad, Delhi, Gurgon, Noida, Kochin, Tirvandram, Goa, Vizag, Mysore,Coimbatore, Madurai, Trichy, Guwahati


On-Demand Fast track Angular 2 Components Training  globally available also at Singapore, Dubai, Malaysia, London, San Jose, Beijing, Shenzhen, Shanghai, Ho Chi Minh City, Boston, Wuhan, San Francisco, Chongqing.