### File

`src/documentation-component/documentation.component.ts`

### Implements

`OnInit` `OnDestroy`

### Metadata

selector | `ibm-documentation`

template

    <iframe
    	id="docsIframe"
    	style="width: 100vw; height: 100vh;"
    	(load)="onLoad()"
    	[src]="src">
    </iframe>

### Index

###### Properties

- Protected _src

###### Methods

- ngOnDestroy
- ngOnInit
- onLoad

###### Inputs

- src

###### Accessors

- src

### Constructor

`constructor(elementRef: ElementRef, sanitizer: DomSanitizer)`
Defined in src/documentation-component/documentation.component.ts:29

Parameters :

Name | Type | Optional
elementRef | `ElementRef` | No
sanitizer | `DomSanitizer` | No

### Inputs

`src` | Type : `string`
Defined in src/documentation-component/documentation.component.ts:22

### Methods

ngOnDestroy
`ngOnDestroy()`
Defined in src/documentation-component/documentation.component.ts:37
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/documentation-component/documentation.component.ts:33
Returns : `void`

onLoad
`onLoad()`
Defined in src/documentation-component/documentation.component.ts:42
Returns : `void`

### Properties

Protected _src
`_src: ```
Defined in src/documentation-component/documentation.component.ts:29

### Accessors

src
get `src()`
Defined in src/documentation-component/documentation.component.ts:25
set `src(src: string)`
Defined in src/documentation-component/documentation.component.ts:22

Parameters :

Name | Type | Optional
src | `string` | No

Returns : `void`

    import {
    	Component,
    	Input,
    	ElementRef,
    	OnInit,
    	OnDestroy
    } from "@angular/core";
    import { DomSanitizer } from "@angular/platform-browser";

    @Component({
    	selector: "ibm-documentation",
    	template: `
    		<iframe
    			id="docsIframe"
    			style="width: 100vw; height: 100vh;"
    			(load)="onLoad()"
    			[src]="src">
    		</iframe>
    	`
    })
    export class Documentation implements OnInit, OnDestroy {
    	@Input() set src(src: string) {
    		this._src = this.sanitizer.bypassSecurityTrustResourceUrl(src);
    	}
    	get src() {
    		return this._src;
    	}

    	protected _src;

    	constructor(protected elementRef: ElementRef, protected sanitizer: DomSanitizer) {}

    	ngOnInit() {
    		document.querySelector("html").style.overflow = "hidden";
    		document.querySelector(".sb-show-main").classList.add("full-page");
    	}
    	ngOnDestroy() {
    		document.querySelector("html").style.overflow = "auto";
    		document.querySelector(".sb-show-main").classList.remove("full-page");
    	}

    	onLoad() {
    		const docsIframe = this.elementRef.nativeElement.querySelector("#docsIframe");
    		const docsDocument = docsIframe.contentDocument || docsIframe.contentWindow.document;
    		const docsBody = docsDocument.querySelector("body");

    		const mainContent = docsBody.querySelector(".content");
    		mainContent.style.width = "100%";
    		mainContent.style.left = 0;

    		const menuContent = docsBody.querySelector(".hidden-xs.menu");
    		menuContent.style.display = "none";
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""