Adding Gists to Angular Templates

Image by Rudy and Peter Skitterians from Pixabay

Scenario

We want to display a gist in our Angular Component template.

Approach

Dependency

ngx-gist

Follow the steps listed in the README.md to install it as a module.

Implementation

We will be displaying this CSV gist.

https://gist.github.com/fireflysemantics/054716730103cd205c39167054542f68#file-local-optimization-csv

The markup looks like this:

<ngx-gist [gistId]=”’fireflysemantics/054716730103cd205c39167054542f68'”></ngx-gist>

This matches the pattern:

<ngx-gist [gistId]="'{username}/{gistId}'"></ngx-gist>

This username is is:

fireflysemantics

The gistId is:

054716730103cd205c39167054542f68

Demo