Angular 4/5 override class in body tag (Shadow Piercing combinators approach)

In angular component CSS styles are encapsulated into the component's view and don't affect the rest of the application; usually this is the behaviour that you want however sometimes it's useful to be able to affect tags outside the component, for example the body tag

This can be achieved in a few different ways, like for example tweaking view encapsulation parameters

In this post I will show you a CSS approach to this using The Shadow Piercing combinators, starting in Angular 4.3.0 you can use the custom shadow piercing combinator ::ng-deep to achieve this

For example if we had a component named "CustomComponent" we could have a set of files similar to :

• custom.component.ts
• custom.component.css
• custom.component.html

In order for us to shadow and override the main body tag would be to put the following in the custom.component.css :

::ng-deep body {
  min-height: 75rem;
  padding-top: 4.5rem;
}

Use Github as a CDN to store and serve static content (JavaScript, CSS, Images) with rawgit

In this article I will be explaining how to use Github's "raw" feature coupled with rawgit to store and serve static content

Please note I assume you have some basic git knowledge

1.- Creating a Github account

Ok so first things first, in order to do this you need a Github account; so if you don't have one head up to the GitHub website and create one ; go ahead I'll wait :)

2.- Creating a Github repository

Login to your Git account and create a new repository :

Provide a name for your repo (for example static_files) :

3.- Build repository structure

We will now create a folder structure for our repository in order for us to organise the files, for example :

• css
• js
• img

So now go ahead and clone your git repository from either the command line or with your favorite tool

git clone https://github.com/xxxx/static_files.git

Once the repository is cloned; go ahead and create the 3 folders mentioned above

cd static_files
mkdir css
mkdir js
mkdir img

Ok so Git does not allow you to commit empty folders, so now in order to commit our folder structure we have to add at least 1 file to each one of the folders; at this point either :

• copy your existing files to their respective folder based on their type (images, javascript, etc.)
• create your content files in the respective folders (i.e. custom javascript, css etc.)
• create placeholder files in each of the folders (for example: touch js/.gitkeep ; touch css/.gitkeep; touch img/.gitkeep)

git add *
git commit -a -m "initial commit"
git push

4.- Obtain files URLs and serve them

Go back to your GitHub account and open the repository then navigate to a file you want to serve, then click on the "raw" button:

After clicking on the raw button you should be redirected to a "raw" page

Copy the url in the browser (it should start with raw.githubusercontent.com) and head up to http://rawgit.com paste the url in the main input

Below you get 2 CDN urls that you can use either for production or development

5.- Include the files in your website

Repeat step 4 with all the files you want to serve and include them in your website

Finally please also note that as stated in their website that rawgit : is a free service, so there are no uptime or support guarantees.