angular-runkit
Advanced tools
Angular RunKit Component.
Install the package.
$ npm i -S angular-runkit
Add the RunKit embed library to your index page:
src/index.html
<head>
...
<script src="https://embed.runkit.com"></script>
...
</head>
Whitelist angular-runkit in your System.js config:
src/systemjs.config.js
map: {
...
'angular-runkit': 'npm:angular-runkit/dist/index.js',
...
}
Declare the component in your module:
src/app/app.module.ts
import { RunKitEmbedComponent } from 'angular-runkit'
...
@NgModule({
...
declarations: [
...
RunKitEmbedComponent,
...
],
...
})
<runkit-embed source='console.log("Hello, world!")'></runkit-embed>
Don't forget to check out the RunKit embed docs.
Specify the source code that the notebook will use.
<runkit-embed source='console.log("Hello, world!")'></runkit-embed>
If true, the user will not be able to edit or run the embed.
<runkit-embed
source='console.log("Hello, world!")'
readOnly=true>
</runkit-embed>
If 'endpoint', the notebook will be run as an endpoint and a link to the served page will be shown.
<runkit-embed
source='exports.endpoint = (req, res) => res.end("Hello, world!")'
mode='endpoint'>
</runkit-embed>
Request a version or semver range for the node engine.
<runkit-embed
source='console.log("Hello, world!")'
nodeVersion='7'>
</runkit-embed>
Provide a list of environment variables accessible in the notebook through process.env.
<runkit-embed
source='console.log(`Hello, ${ process.env.FIRST_NAME } ${ process.env.LAST_NAME }!`)'
[env]='["FIRST_NAME=Haskell", "LAST_NAME=Curry"]'
nodeVersion='7'>
</runkit-embed>
Provide a title for the notebook when opened on RunKit.
<runkit-embed
source='console.log("Hello, world!")'
title='Hello'>
</runkit-embed>
Provide a minimum height for the embed ('130px' by default).
<runkit-embed
source='console.log("Hello, world!")'
minHeight='200px'>
</runkit-embed>
Specify the Unix time in milliseconds at which packages should resolved. Packages published after the date will be ignored.
<runkit-embed
source='require("babel-core")'
packageTimestamp=1468195200000>
</runkit-embed>
Specify source code that is run before the main source. This code will not be shown in the embed.
<runkit-embed
source='console.log(_.map(_.add(1), [1, 2, 3]))'
preamble='const _ = require("lodash/fp")'>
</runkit-embed>
Provide a callback that is run when the embed is loaded.
<runkit-embed
source='console.log("Hello, world!")'
(onLoad)='loaded()'>
</runkit-embed>
Provide a callback that is run whenever the embed's URL changes.
<runkit-embed
source='console.log("Hello, world!")'
(onURLChanged)='urlChanged()'>
</runkit-embed>
Provide a callback that is run whenever the embed is evaluated.
<runkit-embed
source='console.log("Hello, world!")'
(onEvaluate)='evaluated()'>
</runkit-embed>
Evaluate the notebook.
<runkit-embed
#embed
source='console.log("Hello, world!")'>
</runkit-embed>
<button (click)='embed.evaluate()'>Run</button>
FAQs
Angular RunKit Component.
The npm package angular-runkit receives a total of 1 weekly downloads. As such, angular-runkit popularity was classified as not popular.
We found that angular-runkit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
Security News
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.