Egghead Instructor Juri Strumpflohner

Juri Strumpflohner

I'm a full stack web dev with particular passion for everything frontend. I love to code & share my learning with others, which is why I also happen to organize a community meetup. When not coding, I'm practicing & teaching martial arts.



Unlock all of Juri's PRO Lessons
click for instant access!

Browse Juri Strumpflohner's lessons.

showing 15 lessons...

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 in Angular

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
angular2 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 angular2 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.

angular2 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 angular2 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.

angular2 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 angular2 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.

angular2 tutorial about Style HTML elements in Angular using ngStyle

Style HTML elements in Angular using ngStyle

3:39 angular2 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.

angular2 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 angular2 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.

angular2 tutorial about Style HTML elements in Angular using ngClass

Style HTML elements in Angular using ngClass

3:17 angular2 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.

angular2 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 angular2 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.

angular2 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 angular2

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.

angular2 tutorial about Add styles to a component in Angular

Add styles to a component in Angular

2:21 angular2

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.

Intercept HTTP requests in Angular

7:35 angular2

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.

Build and deploy your Angular app to Firebase Hosting

2:58 angular2 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.

Setup automated deployment with Angular, Travis and Firebase

7:48 angular2 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.

angular2 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 angular2 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.

angular2 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 angular2 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.

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

Style HTML elements in Angular using the style property

1:15 angular2 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.

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