Angular 2

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

COURSES 17

WATCH Brian Troncone's COURSE

Structure Angular Apps with Angular Material Components

Structure Angular Apps with Angular Material Components

In this course we will explore integral Angular Material components. We will start with components related to navigation, layou...

13 lessons

WATCH Juri Strumpflohner's COURSE

Create Dynamic Components in Angular

Create Dynamic Components in Angular

Dynamic data gives us the opportunity to build dynamic components. Dynamic components are reusable and make building large-scal...

7 lessons

WATCH Juri Strumpflohner's COURSE

Create Dynamic Forms in Angular

Create Dynamic Forms in Angular

When we build forms, we know there’s a good chance that the data we want to collect may change. Dynamic Forms in Angular give u...

7 lessons

WATCH Juri Strumpflohner's COURSE

Learn HTTP in Angular

Learn HTTP in Angular

Client-server communication is at the heart of any modern web application. In this course we will take a look at how to communi...

11 lessons

WATCH Juri Strumpflohner's COURSE

Understand How to Style Angular Components

Understand How to Style Angular Components

Developers usually have a love-hate relationship with CSS and styling user interfaces. But it is a fundamental part of creating...

10 lessons

WATCH Mike Hartington's COURSE

Building apps with Ionic 2

Building apps with Ionic 2

Building native mobile applications has traditionally been a completely foreign work flow than web development. Recently framew...

12 lessons

WATCH John Lindquist's COURSE

Understand Angular Directives in Depth

Understand Angular Directives in Depth

Angular Directives allow you to add custom behavior to elements and components. Rather than creating a hierarchy of components ...

11 lessons

WATCH Nathan Walker's COURSE

Use Objective C, Swift and Java api’s in NativeScript for Angular iOS and Android apps

Use Objective C, Swift and Java api’s in NativeScript for Angular iOS and Android apps

NativeScript has the ability to write Objective C, Swift and Java apis directly from JavaScript and TypeScript. In this cours...

12 lessons

WATCH John Lindquist's COURSE

Get Started with Angular

Get Started with Angular

Angular is basically a collection of Components brought together within modules. The many tools, such as the Angular CLI, allow...

13 lessons

WATCH John Lindquist's COURSE

Learn the Basics of Angular Forms

Learn the Basics of Angular Forms

Angular makes creating forms a breeze with its new ngForm, ngModel, and ngModelGroup features. This course walks you through ho...

10 lessons

WATCH John Lindquist's COURSE

Animate Angular Web Applications

Animate Angular Web Applications

Angular comes with a robust animation system built-in, but it requires an understanding of a combination of triggers, states, s...

8 lessons

WATCH Nathan Walker's COURSE

Create Native Mobile Apps with NativeScript for Angular

Create Native Mobile Apps with NativeScript for Angular

In this course, we will learn how to work with NativeScript for Angular. We will start with the basic fundamentals of getting s...

18 lessons

WATCH Christoph Burgdorf's COURSE

Build an Angular Instant Search Component

Build an Angular Instant Search Component

In this course you will learn more about using observables in Angular. We are going to explore the new HTTP service, and how we...

6 lessons

WATCH John Lindquist's COURSE

Building Angular Components

Building Angular Components

Angular has introduced many new concepts around how to construct components. There's new template syntax, a new event system, a...

16 lessons

WATCH Pascal Precht's COURSE

Angular Dependency Injection (DI) Explained

Angular Dependency Injection (DI) Explained

This course will teach you the ins and outs of dependency injection in Angular. You will learn what dependency injection means,...

8 lessons

WATCH John Lindquist's COURSE

Manage UI State with the Angular Router

Manage UI State with the Angular Router

Angular's router comes with many features for routing based on path's and loading specific components. This course gives you an...

11 lessons

WATCH John Lindquist's COURSE

Build Redux Style Applications with Angular, RxJS, and ngrx/store

Build Redux Style Applications with Angular, RxJS, and ngrx/store

Angular has many built-in features for working closely with RxJS to help you build fully reactive applications. This course wil...

16 lessons

Share a lib in an Nx Workspace with a web and NativeScript app

In this lesson we will look at how to setup an Nx workspace to allow libs to be shared with a NativeScript app. Considerations for tsconfig, livereload and testing will be looked at.

Nathan Walker
6:01

Set up a NativeScript app in an Nx Workspace

Nx is an open source toolkit for enterprise Angular applications. The workspace offers many advantages to maximizing code reuse across many different applications in a monorepo setup. Learn how to...

Nathan Walker
1:30

Create a custom validator for reactive forms in Angular

User input validation is a core part of creating proper HTML forms. Form validators not only help you to get better quality data but they also guide the user through your form. Angular comes with a...

Juri Strumpflohner
4:00

Create a custom validator for template driven forms in Angular

User input validation is a core part of creating proper HTML forms. Form validators not only help you to get better quality data but they also guide the user through your form. Angular comes with a...

Juri Strumpflohner
6:43

Build and deploy your Angular app to Firebase Hosting

Firebase not only provides you a real-time, powerful database, but recently also added a hosting capability to its offers. In this lesson we will learn how to use the Firebase CLI to setup and conf...

Juri Strumpflohner
2:58

Setup automated deployment with Angular, Travis and Firebase

Automate all the things!! Automation is crucial for increasing the quality and productivity. In this lesson we will learn how to automate the deployment of our Angular app to Firebase Hosting, by u...

Juri Strumpflohner
7:48

Bind async requests in your Angular template with the async pipe and the "as" keyword

Angular allows us to conveniently use the async pipe to automatically register to RxJS observables and render the result into the template once the request succeeds. This has some drawbacks, especi...

Juri Strumpflohner
4:51

Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

The network may be unreliable and loading data may take time. Thus it is important to give the user some feedback about what's going on as fast as possible. In this lesson we learn how to leverage ...

Juri Strumpflohner
2:07

Create iOS custom UIViewController components with NativeScript for Angular

Learn how to construct sophisticated custom components using UIViewController. Understand how to construct UIButton's programmatically and attach tap events via NativeScript using the static ObjCEx...

Nathan Walker
10:00

Share Template Content In Another Template With Content Projection

Angular 1 provided a mechanism to place content from your template inside of another template called transclusion. This concept has been brought into Angular 2 and was renamed to content projection...

Mike Brocchi
1:13

Generate components with the Angular CLI

Generating components with the Angular CLI allows for scaffolding applications quickly. Learn what will be generated for you and how to generate quickly with shortcuts in the desired directory.

Mike Brocchi
1:21

Install the Angular CLI to Create and Serve an Angular Application

Getting started with angular development can be difficult, with a lot of moving parts. Allow the Angular CLI to handle those complexities so you can focus on creating great applications. In this l...

Mike Brocchi
1:17

Browse all Angular 2 lessons.

showing All 215 lessons...

Create an Extended Header Using Angular Material Toolbars

P

Install and Configure a Project with Angular Material

Use the Angular Material Sidenav Component

P

Utilize Material Design Icons for App Icons and Buttons

P

Dynamically Instantiate an Angular Component

P

Destroy a Dynamically Instantiated Angular Component

P

Pass Data to a Dynamic ng-template using ngTemplateOutletContext in Angular

P

Define an Anchor Point Where to Render Dynamic Components in Angular

P

Declare a Template within a Template using `ng-template` in Angular

Pass a Reference of an ng-template to a Component and Render it in Angular

P

Angular Tab Component Overview

Create a Dynamic Angular Form with ngx-formly

P

Add Validation to Dynamic Forms in Angular

P

Create Dynamic Radio Button Lists with Angular’s Reactive Forms

P

Create Dynamic Select Boxes with Angular’s Reactive Forms

P

Dynamically Render Different Form Input Types with Angular’s Reactive Forms

P

Create a FormControl Dynamically with Reactive Forms in Angular

Dynamically Create Multiple FormControls from a Data Set in Angular

Type Check an Http Response using the Angular HttpClient and TypeScript

P

Read Custom HTTP Headers Sent by the Server in Angular

P

Fetch non-JSON data by specifying HttpClient responseType in Angular

P

Provide Feedback to Progress Events with Angular’s HttpRequest Object

P

Mock HTTP Requests made with Angular’s HttpClient in Unit Tests

P

Retry Failed Requests with RxJS and the HttpClient in Angular

P

Handle HTTP Errors in Angular with HttpErrorResponse

P

Set Metadata in HTTP Headers with Angular HttpHeaders

P

Send Data via HTTP using Angular HttpParams

Fetch Data from an API using the HttpClient in Angular

Share a lib in an Nx Workspace with a web and NativeScript app

P

Set up a NativeScript app in an Nx Workspace

P

Create a custom validator for reactive forms in Angular

P

Create a custom validator for template driven forms in Angular

P

Use the Renderer2 to add styles to an element in Angular

P

Use Angular’s @HostBinding and :host(...) to add styling to the component itself

P

Use :host-context and the ::ng-deep selector to apply context-based styling

P

Style HTML elements in Angular using ngStyle

P

Use Angular style sanitization to mark dynamic styles as trusted values

P

Style HTML elements in Angular using ngClass

P

Conditionally add a single CSS class to a DOM element in Angular

P

Use Angular style encapsulation to avoid styles from leaking into other components

Add styles to a component in Angular

Intercept HTTP Requests with Angular’s HttpInterceptor

P

Build and deploy your Angular app to Firebase Hosting

P

Setup automated deployment with Angular, Travis and Firebase

P

Bind async requests in your Angular template with the async pipe and the "as" keyword

P

Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

P

Style HTML elements in Angular using the style property

P

Create an Overlay Component with the Ionic 2 Overlay API

P

Preview an Angular 2 Mobile App with Ionic Lab

P

Create Angular 2 Mobile Card based layouts with Ionic 2

P
angular tutorial about Create an Extended Header Using Angular Material Toolbars

Create an Extended Header Using Angular Material Toolbars

4:49 angular PRO

This lesson explores the material design toolbar component, configuration and styling options, and how to utilize this component to create an extended app header.

angular tutorial about  Install and Configure a Project with Angular Material

Install and Configure a Project with Angular Material

1:17 angular

This lesson demonstrates the basic project setup required to get started with Angular Material. Required and suggested packages are discussed as well as custom material module and theme setup.

angular tutorial about Use the Angular Material Sidenav Component

Use the Angular Material Sidenav Component

4:17 angular PRO

This lesson explores the Angular Material sidenav component. This includes input and display options, creating a sidenav with a nav list, and utilizing the @angular/cdk to update sidenav settings based on the users screen size.

angular tutorial about Utilize Material Design Icons for App Icons and Buttons

Utilize Material Design Icons for App Icons and Buttons

4:00 angular PRO

This lesson explores how to configure your project to use material design icons, display icons and icon buttons, and register custom icons for use with the material icon component.

angular tutorial about Dynamically Instantiate an Angular Component

Dynamically Instantiate an Angular Component

4:58 angular PRO

In this lesson we learn how to leverage the ComponentFactoryResolver as well as our anchor we defined previously, to dynamically instantiate an Angular component, in our specific case the TabComponent.

We will also learn how to register our dynamic components in the NgModule’s entryComponent property.

angular tutorial about Destroy a Dynamically Instantiated Angular Component

Destroy a Dynamically Instantiated Angular Component

5:45 angular PRO

With our dynamic tabs we also want to give our users the possibility to close them again. As such we also need to account for destroying our dynamically created components. In this lesson we will learn how the ViewContainerRef can help us with that.

angular tutorial about Pass Data to a Dynamic ng-template using ngTemplateOutletContext in Angular

Pass Data to a Dynamic ng-template using ngTemplateOutletContext in Angular

3:12 angular PRO

We’ve seen how to pass along a reference to a template to an Angular component and how to render it. Templates without actual dynamic data are boring however. Therefore in this lesson we learn how to leverage ngTemplateOutletContext to pass in data to an ng-template.

angular tutorial about Define an Anchor Point Where to Render Dynamic Components in Angular

Define an Anchor Point Where to Render Dynamic Components in Angular

3:14 angular PRO

When we dynamically instantiate a component, we obviously have to know where to place such component within another component’s template.

For that purpose we will learn how to use a custom directive which exposes a ViewContainerRef and serves us as an anchor point we can then reference later.

We also explore a second variant, using a simple template variable and a @ViewChild which just exposes the ViewContainerRef.

angular tutorial about Declare a Template within a Template using `ng-template` in Angular

Declare a Template within a Template using `ng-template` in Angular

1:46 angular

In this lesson we learn about ng-template, an Angular component that allows us to declare some piece of Angular template. We will explore how to use @ViewChild to grab the template from within our Angular component and how we can then pass it along accordingly.

angular tutorial about Pass a Reference of an ng-template to a Component and Render it in Angular

Pass a Reference of an ng-template to a Component and Render it in Angular

2:35 angular PRO

For now, our TabComponent which renders a single tab within our TabsComponent container uses an ng-content component to render the content defined by the developer via Angular’s content projection mechanism. In this lesson we extend the tab to be able to take some variable template defined via ng-template and render it inside our tab using <ng-container> and ngTemplateOutlet.

angular tutorial about Angular Tab Component Overview

Angular Tab Component Overview

2:27 angular

In this lesson we will learn about our course setup. We will briefly dive through our tabbed Angular component, which allows us to define a fixed set of static tabs. This component will serve us throughout the course as we will extend it to allow for dynamic tabs to be inserted.

angular tutorial about Create a Dynamic Angular Form with ngx-formly

Create a Dynamic Angular Form with ngx-formly

6:41 angular PRO

In our dynamic forms lessons we obviously didn’t account for all the various edge cases you might come across. Therefore if you need a more complex setup you might want to take a look at ngx-formly. Formly has been a very popular library even in AngularJS 1.x for rendering dynamic forms.

Ngx-formly is the Angular (2+) counterpart for doing this job. In this lesson we’ll quickly give it a look at how to transform our custom dynamic form rendering to use ngx-formly.
For more use cases definitely check out the official ngx-formly repository on GitHub.

angular tutorial about Add Validation to Dynamic Forms in Angular

Add Validation to Dynamic Forms in Angular

6:21 angular PRO

Even though we are dealing with a dynamic form, we cannot forget about input validation. Validation is an essential part in every HTML form in order to get some good quality data from our user.

In this lesson we’ll take a look how to further extend our example of creating a dynamic form with Angular by adding some form validation.

angular tutorial about Create Dynamic Radio Button Lists with Angular’s Reactive Forms

Create Dynamic Radio Button Lists with Angular’s Reactive Forms

2:57 angular PRO

Similar to select boxes, radio button lists render as a list of values and according text representations. In this lesson we learn how dynamically render and bind such radio button lists by further extending our dynamic form from the previous lessons. Again, we’ll leverage the power of Angular’s reactive forms approach for this.

angular tutorial about Create Dynamic Select Boxes with Angular’s Reactive Forms

Create Dynamic Select Boxes with Angular’s Reactive Forms

3:04 angular PRO

Select boxes (aka dropdown lists) are a bit different than normal text input boxes. We’re not just rendering a single value, but rather we have a list of values and according text representations which are presented to the user.

In this lesson we extend our API object to also cope for such scenarios before we implement the dynamic rendering and databinding of our select box.

angular tutorial about Dynamically Render Different Form Input Types with Angular’s Reactive Forms

Dynamically Render Different Form Input Types with Angular’s Reactive Forms

3:56 angular PRO

In this we will generalize our component so that it can take a generic data object which serves as the “API” for dynamically creating our form. We will also see how we can leverage that new structure to render different HTML form input types, such as “text” and “number."

angular tutorial about Create a FormControl Dynamically with Reactive Forms in Angular

Create a FormControl Dynamically with Reactive Forms in Angular

1:57 angular

Angular’s reactive forms make it easy to dynamically instantiate new FormControls and bind them to our data.

In this lesson we will take a look how to take a very simple data object, how to create a reactive Angular form and render it to our HTML template for finally binding our data onto it.

angular tutorial about Dynamically Create Multiple FormControls from a Data Set in Angular

Dynamically Create Multiple FormControls from a Data Set in Angular

2:18 angular

In this lesson we will take a look how to create a more complex but also more real-world example. We’re creating a simple person object and by iterating over its properties we dynamically create multiple FormControl instances using Angular’s reactive forms approach.

angular tutorial about Type Check an Http Response using the Angular HttpClient and TypeScript

Type Check an Http Response using the Angular HttpClient and TypeScript

1:27 angular PRO

When we invoke our backend API, we retrieve some well defined data object, such as a Person. By using TypeScript we can define the Type of such a data object and also provide this type to the Angular HttpClient. As a consequence, our Http request gets “typed” and we get an instance of a Person type.

angular tutorial about Read Custom HTTP Headers Sent by the Server in Angular

Read Custom HTTP Headers Sent by the Server in Angular

2:09 angular PRO

By default the response body doesn’t contain all the data that might be needed in your app. Your server might return some special header which you have to read explicitly. In such case we can use the { observe: ‘response’} configuration of the Angular HttpClient. Let’s explore how.

angular tutorial about Fetch non-JSON data by specifying HttpClient responseType in Angular

Fetch non-JSON data by specifying HttpClient responseType in Angular

1:49 angular PRO

By default the new Angular Http client (introduced in v4.3.1) uses JSON as the data format for communicating with the backend API. However, there might be situations where you may want to use some other format, like text/plain for fetching a CSV file. Using the responseType property this can be achieved quite easily.

angular tutorial about  Provide Feedback to Progress Events with Angular’s HttpRequest Object

Provide Feedback to Progress Events with Angular’s HttpRequest Object

5:49 angular PRO

In some cases your application might need to upload large amounts of data, such as files. Obviously for a good UX we should provide the user some feedback on the progress of the upload. Angular’s HttpRequest object has a property reportProgress which allows us to do exactly that. Let’s see how.

angular tutorial about Mock HTTP Requests made with Angular’s HttpClient in Unit Tests

Mock HTTP Requests made with Angular’s HttpClient in Unit Tests

6:41 angular PRO

In a proper unit test we want to isolate external dependencies as much as possible to guarantee a reliable test outcome. Http calls represent such external dependencies. Therefore, when testing our Angular components or services that rely on data retrieved via Http, we need to make sure to mock such calls and instead provide some fake data during the test execution. In this lesson we about the new HttpClientTestingModule and HttpTestingController that has been added in Angular v4.3.1 to make our life easier.

angular tutorial about Retry Failed Requests with RxJS and the HttpClient in Angular

Retry Failed Requests with RxJS and the HttpClient in Angular

3:01 angular PRO

When the communication with the backend fails, before giving the user a negative response, it might be worth trying to automatically recover from the error. In some cases, that can be as simple as retrying to issue the request again. Since the Angular HttpClient heavily relies on RxJS we can apply some of its operators to make this happen, such as retry, retryWhen and delay.

angular tutorial about Handle HTTP Errors in Angular with HttpErrorResponse

Handle HTTP Errors in Angular with HttpErrorResponse

3:54 angular PRO

When communicating with some backend API, data travels over the network using the HTTP protocol. As such, failures may occur, be it on our own device (i.e. the browser) or on the server-side which may not be available or unable to process our request. We need to handle such error responses and give the user a proper feedback.

angular tutorial about Set Metadata in HTTP Headers with Angular HttpHeaders

Set Metadata in HTTP Headers with Angular HttpHeaders

1:48 angular PRO

Besides sending (or requesting) the actual data to the server API, there’s also often the need to send further metadata that helps the server to correctly interpret our request. Such data is most often sent using HTTP headers. In this lesson we learn how to leverage Angular’s HttpClient to set such headers.
Note that when you have to continuously send certain application headers to the backend, for each single HTTP call that is being made, you may be better served by placing them in an HTTP interceptor. Take a look at this lesson for more details on how to implement that.

angular tutorial about Send Data via HTTP using Angular HttpParams

Send Data via HTTP using Angular HttpParams

3:19 angular

Obviously in a real world application we do not only fetch data from the backend, but we also send data to be stored permanently on the server side. The HttpClient gives us different options for achieving this. In this lesson we will look at how to attach parameters to our request URL, by manually concatenating the URL by ourselves, by using the HttpParams object and also how we can send entire objects in a POST request body.

angular tutorial about Fetch Data from an API using the HttpClient in Angular

Fetch Data from an API using the HttpClient in Angular

4:39 angular

One of the fundamentals in a web application is to learn how to communicate with the backend. In this lesson we learn how to install, configure and use Angular’s HttpClient introduced in version 4.3.1 to fetch data from some backend API.

angular tutorial about Share a lib in an Nx Workspace with a web and NativeScript app

Share a lib in an Nx Workspace with a web and NativeScript app

6:01 angular PRO

In this lesson we will look at how to setup an Nx workspace to allow libs to be shared with a NativeScript app. Considerations for tsconfig, livereload and testing will be looked at.

angular tutorial about Set up a NativeScript app in an Nx Workspace

Set up a NativeScript app in an Nx Workspace

1:30 angular PRO

Nx is an open source toolkit for enterprise Angular applications. The workspace offers many advantages to maximizing code reuse across many different applications in a monorepo setup. Learn how to set up a NativeScript app in the workspace to work seamlessly alongside other apps all while sharing the same core dependencies.

angular tutorial about Create a custom validator for reactive forms in Angular

Create a custom validator for reactive forms in Angular

4:00 angular PRO

User input validation is a core part of creating proper HTML forms. Form validators not only help you to get better quality data but they also guide the user through your form. Angular comes with a series of built-in validators such as required or maxLength etc. But very soon you have to build your own custom validators to handle more complex scenarios.
In this lesson you're going to learn how to create such custom validators for Angular's reactive forms.

angular tutorial about Create a custom validator for template driven forms in Angular

Create a custom validator for template driven forms in Angular

6:43 angular PRO

User input validation is a core part of creating proper HTML forms. Form validators not only help you to get better quality data but they also guide the user through your form. Angular comes with a series of built-in validators such as required or maxLength etc. But very soon you have to build your own custom validators to handle more complex scenarios.

In this lesson you're going to learn how to create such custom validators for Angular's template driven forms.

angular tutorial about Use the Renderer2 to add styles to an element in Angular

Use the Renderer2 to add styles to an element in Angular

2:14 angular PRO

In this lesson we will go low-level and learn how you can get hold of the underlying native DOM element to add styling. Moreover we will learn how to make use of the Render2 to safely add style properties which even work in a server-side environment.

angular tutorial about Use Angular’s @HostBinding and :host(...) to add styling to the component itself

Use Angular’s @HostBinding and :host(...) to add styling to the component itself

2:58 angular PRO

One thing that we can do is to add styles directly to HTML elements that live within our component. However, in this lesson we see that style classes added to your template HTML within your component get applied to an inner <div> and not your component host. We will learn how to use :host(...) and @HostBinding to add styling directly to the component host itself.

angular tutorial about Use :host-context and the ::ng-deep selector to apply context-based styling

Use :host-context and the ::ng-deep selector to apply context-based styling

3:26 angular PRO

Often components need to be styled based on the context they are being placed in. In this lesson we will learn about how to apply styles conditionally to our component, based on our ancestor element styles using :host-context. In the very same way, we also explore how to leverage the /deep/ shadow DOM selector to target styles to child components.

Note that the ::ng-deep is only a temporary solution and is going to be dropped by Angular once there’s an official standard coming out. As such try to avoid using it.

angular tutorial about Style HTML elements in Angular using ngStyle

Style HTML elements in Angular using ngStyle

3:39 angular PRO

We will learn how to make use of the ngStyle directive to directly add multiple style attributes to a DOM element as a style property. We’ll also learn how we can make these styles more dynamic through user input.

angular tutorial about Use Angular style sanitization to mark dynamic styles as trusted values

Use Angular style sanitization to mark dynamic styles as trusted values

3:33 angular PRO

Angular has a very robust security model. Dynamically inserted html, style or url values into the DOM open up possibilities for attackers to compromise your site. Thus Angular treats all values as untrusted by default. In this lesson we learn how to “sanitize” values where we are sure they are trustful.

angular tutorial about Style HTML elements in Angular using ngClass

Style HTML elements in Angular using ngClass

3:17 angular PRO

When we want to add multiple CSS classes on our HTML elements, and possibly even by using some kind of condition, things might get complicated… Fortunately ngClass is here to help! We will learn about the various ways ngClass allows us to conditionally add multiple classes to HTML elements using a variety of different data structures.

angular tutorial about Conditionally add a single CSS class to a DOM element in Angular

Conditionally add a single CSS class to a DOM element in Angular

1:35 angular PRO

Angular allows you to add a single CSS class to HTML elements within your component and bind them to a condition. Based on the result of the condition the class gets applied or not.

angular tutorial about Use Angular style encapsulation to avoid styles from leaking into other components

Use Angular style encapsulation to avoid styles from leaking into other components

3:11 angular

One of the big challenges of creating truly reusable components is to make sure their styles don’t leak out into the consuming application. Strategies such as CSS modules work but are suboptimal. The web component movement tries to bring a definitive solution to this dilemma but browser support is still lacking. In this lesson we will take a look how Angular helps us with this.

angular tutorial about Add styles to a component in Angular

Add styles to a component in Angular

2:21 angular

Angular gives you two possibilities: externally link a stylesheet to your component, which is a great option when you have a lot of CSS code that might make your Component look messy; or embed it inline, which you might want to do when you only have a bit of CSS you want to apply. In this lesson we will take a deeper look at the advantages of both of these methods.

angular tutorial about Intercept HTTP Requests with Angular’s HttpInterceptor

Intercept HTTP Requests with Angular’s HttpInterceptor

7:35 angular PRO

Being able to intercept HTTP requests is crucial in a real world application. Whether it is for error handling and logging or for injecting authentication tokens. While in Angular version 2 it intercepting HTTP requests was totally possible, implementing it wasn't that trivial and intuitive. Starting from Angular version 4.3.1 there is a new, way more simpler approach of implementing HTTP interceptors. In this lesson we're going to explore how.

angular tutorial about Build and deploy your Angular app to Firebase Hosting

Build and deploy your Angular app to Firebase Hosting

2:58 angular PRO

Firebase not only provides you a real-time, powerful database, but recently also added a hosting capability to its offers. In this lesson we will learn how to use the Firebase CLI to setup and configure our Angular project for deploying it to Firebase Hosting.

angular tutorial about Setup automated deployment with Angular, Travis and Firebase

Setup automated deployment with Angular, Travis and Firebase

7:48 angular PRO

Automate all the things!! Automation is crucial for increasing the quality and productivity. In this lesson we will learn how to automate the deployment of our Angular app to Firebase Hosting, by using GitHub and Travis. By the end of the lesson we will be able to automatically deploy our app with a simple git push to our repository's master branch.

angular tutorial about Bind async requests in your Angular template with the async pipe and the "as" keyword

Bind async requests in your Angular template with the async pipe and the "as" keyword

4:51 angular PRO

Angular allows us to conveniently use the async pipe to automatically register to RxJS observables and render the result into the template once the request succeeds. This has some drawbacks, especially if we want to bind the same data in multiple parts of the template. In this lesson we will learn how we can leverage the async pipe and the as keyword introduced in Angular version 4.0.0 to circumvent such drawbacks.

angular tutorial about Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

2:07 angular PRO

The network may be unreliable and loading data may take time. Thus it is important to give the user some feedback about what's going on as fast as possible. In this lesson we learn how to leverage the else block of the *ngIf directive to show a simple loading indicator.

angular tutorial about Style HTML elements in Angular using the style property

Style HTML elements in Angular using the style property

1:15 angular PRO

In this lesson we will take a look at how Angular makes use of the style property. This is a powerful concept that allows us to very easily add CSS styles onto HTML elements. These styles can even be easily made conditional.

angular tutorial about Create an Overlay Component with the Ionic 2 Overlay API

Create an Overlay Component with the Ionic 2 Overlay API

3:56 angular PRO

Ionic provides a common API for displaying many overlay components, like Alerts, ActionSheet, Modals, and Popovers. We'll look at a few of the APIs and see how to interact with them. To learn more about these different APIs, be sure the view the documentation on them:

angular tutorial about Preview an Angular 2 Mobile  App with Ionic Lab

Preview an Angular 2 Mobile App with Ionic Lab

1:33 angular PRO

Ionic’s CSS and JS can detect what platform a user is on, and adjust to make sure you’re getting the correct interface. To preview this locally, you can use the CLI’s --lab flag to see what your app will look like before it’s even deployed to a device.

angular tutorial about Create Angular 2 Mobile Card based layouts with Ionic 2

Create Angular 2 Mobile Card based layouts with Ionic 2

2:12 angular PRO

Cards have become a common way to handle layout and display information in a easy-to-understand format. Ionic offers utility components that make creating cards straightforward. These components, like ion-card, ion-card-content, and ion-card-header are included in the framework to speed up the development process. There's no JavaScript behind these components, they're really just css driven.

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