From 1f6b59f2f5165644f01e00354deeebdee5ec1ab0 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sun, 12 Jun 2022 18:15:30 +0000 Subject: [PATCH 1/2] Fix canvas resolution on high-DPI screens --- .../mempool-block-overview/block-scene.ts | 18 ++++++++++-------- .../mempool-block-overview.component.html | 2 +- .../mempool-block-overview.component.ts | 14 ++++++++++---- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/components/mempool-block-overview/block-scene.ts b/frontend/src/app/components/mempool-block-overview/block-scene.ts index 0974056d8..38ca35eda 100644 --- a/frontend/src/app/components/mempool-block-overview/block-scene.ts +++ b/frontend/src/app/components/mempool-block-overview/block-scene.ts @@ -27,15 +27,17 @@ export default class BlockScene { Object.values(this.txs).forEach(tx => tx.destroy()) } - resize ({ width = this.width, height = this.height }: { width?: number, height?: number}): void { - this.width = width - this.height = height - this.gridSize = this.width / this.gridWidth - this.unitPadding = Math.floor(Math.max(1, width / 1000)) - this.unitWidth = this.gridSize - (this.unitPadding * 2) + resize({ width = this.width, height = this.height }: { width?: number, height?: number}): void { + this.width = width; + this.height = height; + this.gridSize = this.width / this.gridWidth; + this.unitPadding = width / 500; + this.unitWidth = this.gridSize - (this.unitPadding * 2); - this.dirty = true - if (this.initialised && this.scene) this.updateAll(performance.now()) + this.dirty = true; + if (this.initialised && this.scene) { + this.updateAll(performance.now()); + } } // Animate new block entering scene diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html index 6951120d7..58f09548f 100644 --- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html +++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html @@ -1,5 +1,5 @@
- +
diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts index cf8ccb987..ab9ffb3b5 100644 --- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts +++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts @@ -27,6 +27,8 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang animationFrameRequest: number; displayWidth: number; displayHeight: number; + cssWidth: number; + cssHeight: number; shaderProgram: WebGLProgram; vertexArray: FastVertexArray; running: boolean; @@ -182,12 +184,14 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang @HostListener('window:resize', ['$event']) resizeCanvas(): void { - this.displayWidth = this.canvas.nativeElement.parentElement.clientWidth; - this.displayHeight = this.canvas.nativeElement.parentElement.clientHeight; + this.cssWidth = this.canvas.nativeElement.parentElement.clientWidth; + this.cssHeight = this.canvas.nativeElement.parentElement.clientHeight; + this.displayWidth = window.devicePixelRatio * this.cssWidth; + this.displayHeight = window.devicePixelRatio * this.cssHeight; this.canvas.nativeElement.width = this.displayWidth; this.canvas.nativeElement.height = this.displayHeight; if (this.gl) { - this.gl.viewport(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height); + this.gl.viewport(0, 0, this.displayWidth, this.displayHeight); } if (this.scene) { this.scene.resize({ width: this.displayWidth, height: this.displayHeight }); @@ -285,7 +289,9 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang this.setPreviewTx(-1, -1, false); } - setPreviewTx(x: number, y: number, clicked: boolean = false) { + setPreviewTx(cssX: number, cssY: number, clicked: boolean = false) { + const x = cssX * window.devicePixelRatio; + const y = cssY * window.devicePixelRatio; if (this.scene && (!this.selectedTx || clicked)) { const selected = this.scene.getTxAt({ x, y }); const currentPreview = this.selectedTx || this.hoverTx; From 24ffc9731759718dd782973fb843f8ec76239579 Mon Sep 17 00:00:00 2001 From: softsimon Date: Sun, 12 Jun 2022 22:52:49 +0200 Subject: [PATCH 2/2] Move FAQ HTML to angular templates fixes #1783 --- .../src/app/docs/api-docs/api-docs-data.ts | 21 ----- .../app/docs/api-docs/api-docs.component.html | 91 ++++++++++++++++++- .../app/docs/api-docs/api-docs.component.ts | 9 +- frontend/src/app/docs/docs.module.ts | 2 + .../faq-template/faq-template.component.ts | 9 ++ 5 files changed, 105 insertions(+), 27 deletions(-) create mode 100644 frontend/src/app/docs/faq-template/faq-template.component.ts diff --git a/frontend/src/app/docs/api-docs/api-docs-data.ts b/frontend/src/app/docs/api-docs/api-docs-data.ts index 7e653ac8d..f69aa4a0f 100644 --- a/frontend/src/app/docs/api-docs/api-docs-data.ts +++ b/frontend/src/app/docs/api-docs/api-docs-data.ts @@ -5981,7 +5981,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "what-is-a-mempool", title: "What is a mempool?", - answer: "

A mempool (short for \"memory pool\") holds the queue of pending and unconfirmed transactions for a cryptocurrency network node. There is no one global mempool: every node on the network maintains its own mempool, so different nodes may hold different transactions in their mempools.

" }, { type: "endpoint", @@ -5989,7 +5988,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "what-is-a-mempool-explorer", title: "What is a mempool explorer?", - answer: "

A mempool explorer is a tool that enables you to view real-time and historical information about a node's mempool, visualize its transactions, and search and view those transactions.

The mempool.space website invented the concept of visualizing a Bitcoin node's mempool as projected blocks. These blocks are the inspiration for our half-filled block logo.

Projected blocks are on the left of the dotted white line, and confirmed blocks are on the right.

" }, { type: "endpoint", @@ -5997,7 +5995,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "what-is-a-blockchain", title: "What is a blockchain?", - answer: "

A blockchain is a distributed ledger that records the transactions for a cryptocurrency network. Miners amend the blockchain ledger by mining new blocks.

" }, { type: "endpoint", @@ -6005,7 +6002,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "what-is-a-block-explorer", title: "What is a block explorer?", - answer: "

A block explorer is a tool that enables you to explore real-time and historical information about the blockchain of a cryptocurrency. This includes data related to blocks, transactions, addresses, and more.

" }, { type: "endpoint", @@ -6013,7 +6009,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "what-is-mining", title: "What is mining?", - answer: "Mining is the process by which unconfirmed transactions in a mempool are confirmed into a block on a blockchain. Miners select unconfirmed transactions from their mempools and arrange them into a block such that they solve a particular math problem.

The first miner on the network to find a suitable block earns all the transaction fees from the transactions in that block. As a result, miners tend to prioritize transactions with higher transaction fees.

" }, { type: "endpoint", @@ -6021,7 +6016,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "what-are-mining-pools", title: "What are mining pools?", - answer: "Mining pools are groups of miners that combine their computational power in order to increase the probability of finding new blocks." }, { type: "endpoint", @@ -6029,7 +6023,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "what-is-full-mempool", title: "What does it mean for the mempool to be \"full\"?", - answer: "

When a Bitcoin transaction is made, it is stored in a Bitcoin node's mempool before it is confirmed into a block. When the rate of incoming transactions exceeds the rate transactions are confirmed, the mempool grows in size.

The default maximum size of a Bitcoin node's mempool is 300MB, so when there are 300MB of transactions in the mempool, we say it's \"full\".

" }, { type: "endpoint", @@ -6037,7 +6030,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "why-empty-blocks", title: "Why are there empty blocks?", - answer: "

When a new block is found, mining pools send miners a block template with no transactions so they can start searching for the next block as soon as possible. They send a block template full of transactions right afterward, but a full block template is a bigger data transfer and takes slightly longer to reach miners.

In this intervening time, which is usually no more than 1-2 seconds, miners sometimes get lucky and find a new block using the empty block template.

" }, { type: "category", @@ -6052,7 +6044,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "why-is-transaction-stuck-in-mempool", title: "Why isn't my transaction confirming?", - answer: "

If it's been a while and your transaction hasn't confirmed, your transaction is probably using a lower feerate relative to other transactions currently in the mempool. Depending on how you made your transaction, there may be ways to accelerate the process.

There's no need to panic—a Bitcoin transaction will always either confirm completely (or not at all) at some point. As long as you have your transaction's ID, you can always see where your funds are.

This site only provides data about the Bitcoin network—it cannot help you get your transaction confirmed quicker.

" }, { type: "endpoint", @@ -6060,7 +6051,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "how-to-get-transaction-confirmed-quickly", title: "How can I get my transaction confirmed more quickly?", - answer: "

To get your transaction confirmed quicker, you will need to increase its effective feerate.

If your transaction was created with RBF enabled, your stuck transaction can simply be replaced with a new one that has a higher fee.

Otherwise, if you control any of the stuck transaction's outputs, you can use CPFP to increase your stuck transaction's effective feerate.

If you are not sure how to do RBF or CPFP, work with the tool you used to make the transaction (wallet software, exchange company, etc). This website only provides data about the Bitcoin network, so there is nothing it can do to help you get your transaction confirmed quicker.

" }, { type: "endpoint", @@ -6068,7 +6058,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "how-prevent-stuck-transaction", title: "How can I prevent a transaction from getting stuck in the future?", - answer: "

You must use an adequate transaction fee commensurate with how quickly you need the transaction to be confirmed. See Mempool's fee estimates on the front page.

Also consider using RBF (if your wallet supports it) so that you can bump the feerate on your transaction if it does end up getting stuck.

" }, { type: "category", @@ -6083,7 +6072,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "looking-up-transactions", title: "How can I look up a transaction?", - answer: "Search for the transaction ID in the search box at the top-right of this website." }, { type: "endpoint", @@ -6091,7 +6079,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "looking-up-addresses", title: "How can I look up an address?", - answer: "Search for the address in the search box at the top-right of this website." }, { type: "endpoint", @@ -6099,7 +6086,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "looking-up-blocks", title: "How can I look up a block?", - answer: "Search for the block number (or block hash) in the search box at the top-right of this website." }, { type: "endpoint", @@ -6107,7 +6093,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "looking-up-fee-estimates", title: "How can I look up fee estimates?", - answer: "

See real-time fee estimates on the main dashboard.

Here is an overview of Mempool's feerate suggestions:

  • High Priority. This figure is the median feerate of transactions in the first mempool block. Consider using this feerate if you want confirmation as soon as possible.
  • Medium Priority. This figure is the average of the median feerate of the first mempool block and the median feerate of the second mempool block.
  • Low Priority. This figure is the average of the Medium Priority feerate and the median feerate of the third mempool block. Consider using this feerate if you want confirmation soon but don't need it particularly quickly.
  • No Priority. This figure is either 2x the minimum feerate, or the Low Priority feerate (whichever is lower). Consider using this feerate if you are in no rush and don't mind if confirmation takes a while.

In all cases, the suggested feerate is adjusted lower if any of the mempool blocks involved in the calculation are not full (example: if there is only 1 mempool block that's less than half-full, Mempool will suggest a feerate of 1 sat/vB—not the median feerate of transactions in the block).

Mempool blocks use feerates, transaction sizes, and other metrics to forecast which transactions will be in future blocks. Actual blocks will turn out to be different: miners have their own views of the mempool, their own algorithms for determining which transactions to include in a block, etc.

Ultimately, the Bitcoin network is not perfectly predictable, so fee estimation cannot be perfectly precise.

Use Mempool's feerate suggestions as a guide, and understand that they do not guarantee transaction confirmation in any period of time.

" }, { type: "endpoint", @@ -6115,7 +6100,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "looking-up-historical-trends", title: "How can I explore historical trends?", - answer: "See the graphs page for aggregate trends over time: mempool size over time and incoming transaction velocity over time." }, { type: "category", @@ -6130,7 +6114,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "who-runs-this-website", title: "Who runs this website?", - answer: "The official mempool.space website is operated by The Mempool Open Source Project. See more information on our About page. There are also many unofficial instances of this website operated by individual members of the Bitcoin community." }, { type: "endpoint", @@ -6138,7 +6121,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "host-my-own-instance-raspberry-pi", title: "How can I host my own instance on a Raspberry Pi?", - answer: "We support one-click installation on a number of Raspberry Pi full-node distros including Umbrel, RaspiBlitz, MyNode, and RoninDojo." }, { type: "endpoint", @@ -6146,7 +6128,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "host-my-own-instance-linux-server", title: "How can I host my own instance on a Linux server?", - answer: "You can manually install mempool on your own Linux server, but this requires advanced sysadmin skills since you will be manually configuring everything. We do not provide support for manual deployments." }, { type: "endpoint", @@ -6154,7 +6135,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "install-mempool-with-docker", title: "Can I install Mempool using Docker?", - answer: "Yes, we publish Docker images (or you can build your own). Check out the documentation for details." }, { type: "endpoint", @@ -6162,6 +6142,5 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "address-lookup-issues", title: "Why do I get an error for certain address lookups on my Mempool instance?", - answer: "

If you're getting errors when doing address lookups, it's probably because of your Electrum server backend.

Mempool uses an Electrum server to do address lookups. There are several implementations of the Electrum server protocol, and Mempool can use any of them, but the implementation you use affects performance:

  1. romanz/electrs. This is a common choice for its low resource requirements, and most full-node distros use it. But while this implementation works great for basic queries, it will struggle with heavier ones (e.g. looking up addresses with many transactions)—especially when running on low-power hardware like a Raspberry Pi.
  2. Fulcrum. Fulcrum requires more resources than romanz/electrs but it can still run on a Raspberry Pi, and it handles heavy queries much more efficiently. If you're having issues with romanz/electrs, Fulcrum is worth a try.
  3. blockstream/electrs. If you have stronger hardware, consider running Blockstream's electrs implementation. It's the backend mempool.space uses, and is also what powers blockstream.info.
" } ]; diff --git a/frontend/src/app/docs/api-docs/api-docs.component.html b/frontend/src/app/docs/api-docs/api-docs.component.html index f73de31c7..90ec13695 100644 --- a/frontend/src/app/docs/api-docs/api-docs.component.html +++ b/frontend/src/app/docs/api-docs/api-docs.component.html @@ -14,10 +14,7 @@
@@ -110,3 +107,89 @@ + +

A mempool (short for "memory pool") the queue of pending and unconfirmed transactions for a cryptocurrency network node. There is no one global mempool: every node on the network maintains its own mempool, so different nodes may hold different transactions in their mempools.

+ + + +

A mempool explorer is a tool that enables you to view real-time and historical information about a node's mempool, visualize its transactions, and search and view those transactions.

The mempool.space website invented the concept of visualizing a Bitcoin node's mempool as projected blocks. These blocks are the inspiration for our half-filled block logo.

Projected blocks are on the left of the dotted white line, and confirmed blocks are on the right.

+
+ +
+ + + +

A blockchain is a distributed ledger that records the transactions for a cryptocurrency network. Miners amend the blockchain ledger by mining new blocks.

+ + + +

A block explorer is a tool that enables you to explore real-time and historical information about the blockchain of a cryptocurrency. This includes data related to blocks, transactions, addresses, and more.

+ + + + Mining is the process by which unconfirmed transactions in a mempool are confirmed into a block on a blockchain. Miners select unconfirmed transactions from their mempools and arrange them into a block such that they solve a particular math problem.

The first miner on the network to find a suitable block earns all the transaction fees from the transactions in that block. As a result, miners tend to prioritize transactions with higher transaction fees.

+ + + + Mining pools are groups of miners that combine their computational power in order to increase the probability of finding new blocks. + + + +

When a Bitcoin transaction is made, it is stored in a Bitcoin node's mempool before it is confirmed into a block. When the rate of incoming transactions exceeds the rate transactions are confirmed, the mempool grows in size.

The default maximum size of a Bitcoin node's mempool is 300MB, so when there are 300MB of transactions in the mempool, we say it's \"full\".

+ + + +

When a new block is found, mining pools send miners a block template with no transactions so they can start searching for the next block as soon as possible. They send a block template full of transactions right afterward, but a full block template is a bigger data transfer and takes slightly longer to reach miners.

In this intervening time, which is usually no more than 1-2 seconds, miners sometimes get lucky and find a new block using the empty block template.

+ + + +

If it's been a while and your transaction hasn't confirmed, your transaction is probably using a lower feerate relative to other transactions currently in the mempool. Depending on how you made your transaction, there may be ways to accelerate the process.

There's no need to panic—a Bitcoin transaction will always either confirm completely (or not at all) at some point. As long as you have your transaction's ID, you can always see where your funds are.

This site only provides data about the Bitcoin network—it cannot help you get your transaction confirmed quicker.

+ + + +

To get your transaction confirmed quicker, you will need to increase its effective feerate.

If your transaction was created with RBF enabled, your stuck transaction can simply be replaced with a new one that has a higher fee.

Otherwise, if you control any of the stuck transaction's outputs, you can use CPFP to increase your stuck transaction's effective feerate.

If you are not sure how to do RBF or CPFP, work with the tool you used to make the transaction (wallet software, exchange company, etc). This website only provides data about the Bitcoin network, so there is nothing it can do to help you get your transaction confirmed quicker.

+ + + +

You must use an adequate transaction fee commensurate with how quickly you need the transaction to be confirmed. See Mempool's fee estimates on the front page.

Also consider using RBF (if your wallet supports it) so that you can bump the feerate on your transaction if it does end up getting stuck.

+ + + + Search for the transaction ID in the search box at the top-right of this website. + + + + Search for the address in the search box at the top-right of this website. + + + + Search for the block number (or block hash) in the search box at the top-right of this website. + + + +

See real-time fee estimates on the main dashboard.

Here is an overview of Mempool's feerate suggestions:

In all cases, the suggested feerate is adjusted lower if any of the mempool blocks involved in the calculation are not full (example: if there is only 1 mempool block that's less than half-full, Mempool will suggest a feerate of 1 sat/vB—not the median feerate of transactions in the block).

Mempool blocks use feerates, transaction sizes, and other metrics to forecast which transactions will be in future blocks. Actual blocks will turn out to be different: miners have their own views of the mempool, their own algorithms for determining which transactions to include in a block, etc.

Ultimately, the Bitcoin network is not perfectly predictable, so fee estimation cannot be perfectly precise.

Use Mempool's feerate suggestions as a guide, and understand that they do not guarantee transaction confirmation in any period of time.

+ + + + See the graphs page for aggregate trends over time: mempool size over time and incoming transaction velocity over time. + + + + The official mempool.space website is operated by The Mempool Open Source Project. See more information on our About page. There are also many unofficial instances of this website operated by individual members of the Bitcoin community. + + + + We support one-click installation on a number of Raspberry Pi full-node distros including Umbrel, RaspiBlitz, MyNode, and RoninDojo. + + + + You can manually install mempool on your own Linux server, but this requires advanced sysadmin skills since you will be manually configuring everything. We do not provide support for manual deployments." + + + + Yes, we publish Docker images (or you can build your own). Check out the documentation for details. + + + +

If you're getting errors when doing address lookups, it's probably because of your Electrum server backend.

Mempool uses an Electrum server to do address lookups. There are several implementations of the Electrum server protocol, and Mempool can use any of them, but the implementation you use affects performance:

  1. romanz/electrs. This is a common choice for its low resource requirements, and most full-node distros use it. But while this implementation works great for basic queries, it will struggle with heavier ones (e.g. looking up addresses with many transactions)—especially when running on low-power hardware like a Raspberry Pi.
  2. Fulcrum. Fulcrum requires more resources than romanz/electrs but it can still run on a Raspberry Pi, and it handles heavy queries much more efficiently. If you're having issues with romanz/electrs, Fulcrum is worth a try.
  3. blockstream/electrs. If you have stronger hardware, consider running Blockstream's electrs implementation. It's the backend mempool.space uses, and is also what powers blockstream.info.
+ diff --git a/frontend/src/app/docs/api-docs/api-docs.component.ts b/frontend/src/app/docs/api-docs/api-docs.component.ts index 3d68ef75c..69abd18de 100644 --- a/frontend/src/app/docs/api-docs/api-docs.component.ts +++ b/frontend/src/app/docs/api-docs/api-docs.component.ts @@ -1,16 +1,17 @@ -import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core'; +import { Component, OnInit, Input, QueryList, AfterViewInit, ViewChildren } from '@angular/core'; import { Env, StateService } from '../../services/state.service'; import { Observable, merge, of } from 'rxjs'; import { tap } from 'rxjs/operators'; import { ActivatedRoute } from "@angular/router"; import { faqData, restApiDocsData, wsApiDocsData } from './api-docs-data'; +import { FaqTemplateDirective } from '../faq-template/faq-template.component'; @Component({ selector: 'app-api-docs', templateUrl: './api-docs.component.html', styleUrls: ['./api-docs.component.scss'] }) -export class ApiDocsComponent implements OnInit { +export class ApiDocsComponent implements OnInit, AfterViewInit { hostname = document.location.hostname; network$: Observable; active = 0; @@ -25,6 +26,9 @@ export class ApiDocsComponent implements OnInit { screenWidth: number; officialMempoolInstance: boolean; + @ViewChildren(FaqTemplateDirective) faqTemplates: QueryList; + dict = {}; + constructor( private stateService: StateService, private route: ActivatedRoute, @@ -40,6 +44,7 @@ export class ApiDocsComponent implements OnInit { window.addEventListener('scroll', function() { that.desktopDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative"; }, { passive: true} ); + this.faqTemplates.forEach((x) => this.dict[x.type] = x.template); }, 1 ); } diff --git a/frontend/src/app/docs/docs.module.ts b/frontend/src/app/docs/docs.module.ts index 134886c5d..70f22a9a6 100644 --- a/frontend/src/app/docs/docs.module.ts +++ b/frontend/src/app/docs/docs.module.ts @@ -6,12 +6,14 @@ import { DocsComponent } from './docs/docs.component'; import { ApiDocsNavComponent } from './api-docs/api-docs-nav.component'; import { CodeTemplateComponent } from './code-template/code-template.component'; import { DocsRoutingModule } from './docs.routing.module'; +import { FaqTemplateDirective } from './faq-template/faq-template.component'; @NgModule({ declarations: [ ApiDocsComponent, CodeTemplateComponent, ApiDocsNavComponent, DocsComponent, + FaqTemplateDirective, ], imports: [ CommonModule, diff --git a/frontend/src/app/docs/faq-template/faq-template.component.ts b/frontend/src/app/docs/faq-template/faq-template.component.ts new file mode 100644 index 000000000..cf838f681 --- /dev/null +++ b/frontend/src/app/docs/faq-template/faq-template.component.ts @@ -0,0 +1,9 @@ +import { Directive, Input, TemplateRef } from '@angular/core'; + +@Directive({ + selector: 'ng-template[type]' +}) +export class FaqTemplateDirective { + @Input() type: string; + constructor(public template: TemplateRef) { } +}