Files
angular-docs-cn/aio/src/app/embedded/code/code-example.component.ts
T
Peter Bacon Darwin a0b9c23100 feat(aio): support hiding the copy button on code-examole components
In the API docs there are occasions where we do not wish the code snippet
to have a copy button. This commit supports that by providing a new `hideCopy`
attribute.
2017-05-02 15:14:03 -07:00

50 lines
1.5 KiB
TypeScript

/* tslint:disable component-selector */
import { Component, ElementRef, OnInit } from '@angular/core';
/**
* An embeddable code block that displays nicely formatted code.
* Example usage:
*
* ```
* <code-example language="ts" linenums="2" class="special" title="Do Stuff">
* // a code block
* console.log('do stuff');
* </code-example>
* ```
*/
@Component({
selector: 'code-example',
template: `
<header *ngIf="title">{{title}}</header>
<aio-code [ngClass]="{'headed-code':title, 'simple-code':!title}" [code]="code"
[language]="language" [linenums]="linenums" [path]="path" [region]="region" [hideCopy]="hideCopy"></aio-code>
`
})
export class CodeExampleComponent implements OnInit {
code: string;
language: string;
linenums: boolean | number;
path: string;
region: string;
title: string;
hideCopy: boolean;
constructor(private elementRef: ElementRef) {
const element = this.elementRef.nativeElement;
this.language = element.getAttribute('language') || '';
this.linenums = element.getAttribute('linenums');
this.path = element.getAttribute('path') || '';
this.region = element.getAttribute('region') || '';
this.title = element.getAttribute('title') || '';
this.hideCopy = element.getAttribute('hideCopy') === 'true';
}
ngOnInit() {
// The `codeExampleContent` property is set by the DocViewer when it builds this component.
// It is the original innerHTML of the host element.
this.code = this.elementRef.nativeElement.codeExampleContent;
}
}