Code block

A dark code panel with copy-to-clipboard.

npm install ng-blatui

import { BuiCodeBlock } from 'ng-blatui';

<bui-code-block [code]="'npm install ng-blatui'" />

With filename

hello.ts

const greet = (name: string) => `Hello, ${name}!`;

<bui-code-block filename="hello.ts" [code]="'const x = 1;'" />

Tabs

npm

pnpm

yarn

<!-- compose tabs with a code block per panel -->
<div ngTabs buiTabs>
  <div ngTabList buiTabList selectedTab="npm">
    <div ngTab value="npm" buiTabTrigger>npm</div>
    <div ngTab value="pnpm" buiTabTrigger>pnpm</div>
  </div>
  <div ngTabPanel value="npm" buiTabPanel>
    <ng-template ngTabContent><bui-code-block [code]="'npm install ng-blatui'" /></ng-template>
  </div>
</div>