Building Angular 2 Components

41 minutes

Angular 2 has introduced many new concepts around how to construct components. There's new template syntax, a new event system, a new transclusion system, life cycle hooks, a renderer, and on and on. If you're familiar with Angular 1 and you're looking for Angular 2 $scope, Angular 2 $compile, Angular 2 transclusion, and everything about Angular 2 components then this course is exactly what you're looking for.

pro-course-rss-logo

PRO RSS Feed

Create an Angular 2 Hello World Component

Structure a Basic Angular 2 Application

P

Create Application-Specific Angular 2 Components

P

Create Shareable Angular 2 Components

P

Share a Service Across Angular 2 Components and Modules

P

Angular 2 Smart Components vs Presentation Components

P

Style Angular 2 Components

P

Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)

P

Select From Multiple Nested Angular 2 Elements

P

Manipulate and Access DOM Elements with Angular 2 Renderer

P

Generate Angular 2 Components Programmatically with entryComponents

P

Set Properties on Dynamically Created Angular 2 Components

P

Order Dynamic Components Inside an Angular 2 ViewContainer

P

Move and Delete Angular 2 Components After Creation

P

Generate and Render Angular 2 Template Elements in a Component

P

Set Values on Generated Angular 2 Templates with Template Context

P
angular2 tutorial about Create an Angular 2 Hello World Component

Create an Angular 2 Hello World Component

2:32 angular2

A Hello World application in Angular 2 requires you to understand concepts around bootstrapping, modules, and components. The bootstrapping system allows you to decide which module and platform you’ll use when your app starts up as well as which components should be shown first. The Angular 2 modules define which features you’ll want to include so you can have fine control over your final project size. The Angular 2 Components then become a simple definition of a template with variables.

angular2 tutorial about Structure a Basic Angular 2 Application

Structure a Basic Angular 2 Application

1:16 angular2 PRO

Angular 2 projects are separated into many different files: main, modules, components, etc. This lesson shows you how to take the Hello World example of an Angular 2 app and split it across multiple files for proper organization.

angular2 tutorial about Create Application-Specific Angular 2 Components

Create Application-Specific Angular 2 Components

2:51 angular2 PRO

Many components you create will be specific to your application because they will rely on your application services. These application-specific components are often called “feature” components and they follow a module pattern which integrates them with your application.

angular2 tutorial about Create Shareable Angular 2 Components

Create Shareable Angular 2 Components

4:17 angular2 PRO

Components that you use across multiple applications need to follow a module pattern that keeps them separate from your application logic. This will allow you to make these Angular 2 components reusable and shareable and is the same pattern followed by many libraries that you may import into your projects.

angular2 tutorial about Share a Service Across Angular 2 Components and Modules

Share a Service Across Angular 2 Components and Modules

2:51 angular2 PRO

Services are used to share data between components. They follow a module pattern that allows you to use the data throughout your application so that your data is consistent and in sync.

angular2 tutorial about Angular 2 Smart Components vs Presentation Components

Angular 2 Smart Components vs Presentation Components

2:25 angular2 PRO

Both Smart Components and Presentation Components receive data from Services in entirely different ways. Smart Components use constructor injection to lookup the entire service from the injector while Angular 2 Presentation components take the data from @Input defined on their component class.

angular2 tutorial about Style Angular 2 Components

Style Angular 2 Components

3:43 angular2 PRO

Each Angular 2 Component can have its own styles which will remained contained inside the component. These isolated styles allow you to add whichever styles you want without worrying about them leaking out and affecting the rest of your application.

angular2 tutorial about Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)

Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)

2:21 angular2 PRO

You can place content inside of the instance of your component element then manage it inside of the component’s template using ng-content. This process is called reprojection, but you may be more familiar with the term “transclusion”.

angular2 tutorial about Select From Multiple Nested Angular 2 Elements

Select From Multiple Nested Angular 2 Elements

3:02 angular2 PRO

You have complete control over the elements you nest inside of your component instance by using selectors to access and rearrange them. Selecting allows you reconstruct the elements in whatever order you like so you can visual customize the content passed in.

angular2 tutorial about Manipulate and Access DOM Elements with Angular 2 Renderer

Manipulate and Access DOM Elements with Angular 2 Renderer

3:46 angular2 PRO

The Angular 2 renderer allows you to safely use elements created in your template regardless of the platform you’re working on. It’s important to remember that your components could easily be used inside a ServiceWorker or other platform, so you should always rely on the renderer to keep your DOM access safe.

angular2 tutorial about Generate Angular 2 Components Programmatically with entryComponents

Generate Angular 2 Components Programmatically with entryComponents

4:12 angular2 PRO

You can generate Angular 2 components using a combination of ViewContainer and ComponentFactory, but you must always remember to add the components you want to generate to your list of entryComponents otherwise the compiler will optimize the component class out of your project.

angular2 tutorial about Set Properties on Dynamically Created Angular 2 Components

Set Properties on Dynamically Created Angular 2 Components

1:47 angular2 PRO

When you generate Angular 2 components, you’re still able to access the component instance to set properties and invoke methods from the component class.

angular2 tutorial about Order Dynamic Components Inside an Angular 2 ViewContainer

Order Dynamic Components Inside an Angular 2 ViewContainer

2:08 angular2 PRO

By default, when you generate components, they will simply be added to the page in order, one after another. Angular 2 provides methods on the ViewContainer that allow you to reorder components once they’ve been created and provide the order that you want.

angular2 tutorial about Move and Delete Angular 2 Components After Creation

Move and Delete Angular 2 Components After Creation

2:25 angular2 PRO

After the original order is set, you can still leverage methods on the Angular 2 ViewContainer to reorder the components. This is especially helpful when you want an event to trigger layout changes from your generated components.

angular2 tutorial about Generate and Render Angular 2 Template Elements in a  Component

Generate and Render Angular 2 Template Elements in a Component

1:25 angular2 PRO

Angular 2 Components have templates, but you can also create templates inside of your templates using Angular 2 ViewContainer’s createEmbeddedView for more visual control of how you want to generate elements inside of your Angular 2 templates.

angular2 tutorial about Set Values on Generated Angular 2 Templates with Template Context

Set Values on Generated Angular 2 Templates with Template Context

0:58 angular2 PRO

Angular 2 templates have a special let syntax that allows you to define and pass a context when they’re being generated.

Presented by:

John Lindquist

John Lindquist is a co-founder of egghead.io

John has spent the majority of his career developing Rich Web Applications. Before starting egghead.io, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?