[Bug] Iframe not rendered correctly when displaying different files from a gist in seperate ngx-gist components

[ekkolon]

Describe the bug
When trying to render a gist containing multiple files in seperate ngx-gist components,
the iframes are just partially rendered.

For example:

// example-page.component.ts

@Component({
 templateUrl: './example-page.component.html'
})
export class ExamplePage {
 gistId = "05151ac90b51a5d3a0c3e85cb942a456"
}

// example-page.component.html

<div class="ngx-gist-embed-single-file">
 <ngx-gist [gistId]="gistId" file="ngx_gist_embed_example_2.py"></ngx-gist>
</div>

<div class="ngx-gist-embed-all-files">
 <ngx-gist [gistId]="gistId"></ngx-gist>
</div>

Expected behavior
Expected both iframes to render the whole content while automatically adjusting the iframe's height.

Screenshots

Traceback

This layout error may be caused by using the same iframe id for both ngx-gist components
when the component computes property bindings:

ngx-gist/projects/ngx-gist/src/lib/ngx-gist.component.ts

Lines 55 to 61 in a0b7133

	/**
	* The id of the gist to display.
	*/
	@Input() set gistId(id: string) {
	this._gistId = id;
	this._iframeId = `gist-${id}`;
	}

Since each fragment of a gist varies in size/height, iframe-resizer cannot calculate each individual component's height properly. This is because each iframe's height is calculated per id, resulting in stopping calculating other iframes with the same id.

Possible solution

To get around this issue, we need to append the filename (if provided) to the generated iframeId.

For example:

...

  /**
   * The file to display. If not specified, the first file in the gist will be displayed.
   */
  @Input() file?: string;

  /**
   * The id of the gist to display.
   */
  @Input() set gistId(id: string) {
    this._gistId = id;
    const fileId = this.file ? `-file=${this.file}` : ''`
    this._iframeId = `gist-${id}${fileId}`;
  }

...