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.
showing 15 lessons...
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.
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
@HostBinding to add styling directly to the component host itself.
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 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.
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.
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 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.
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.
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.
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
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.
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.