### Install ngx-tiptap Package

Source: https://github.com/sibiraj-s/ngx-tiptap/blob/master/README.md

Installs the ngx-tiptap library using npm or yarn. This package provides the Angular bindings for Tiptap v2.

```bash
npm i ngx-tiptap

# or

yarn add ngx-tiptap
```

--------------------------------

### Manually Rendering Angular Components with AngularRenderer

Source: https://github.com/sibiraj-s/ngx-tiptap/blob/master/README.md

Illustrates how to use the `AngularRenderer` class from `ngx-tiptap` to manually create and manage Angular component instances outside of the standard Angular rendering process. It shows how to get the component instance, its DOM element, and how to destroy it.

```ts
import { AngularRenderer } from 'ngx-tiptap';

const renderer = new AngularRenderer(Component, injector, props);

renderer.instance; // get the instance of the component, can be used to update `@Input` properties
renderer.dom; // get the HTMLElement for the component
renderer.destroy(); // destroy the component and its instance
```

--------------------------------

### Adding Editable Content to an Angular Node View

Source: https://github.com/sibiraj-s/ngx-tiptap/blob/master/README.md

Provides an example of an HTML template for an Angular component used as a Tiptap node view. It demonstrates the use of the `tiptapNodeViewContent` directive to designate an element where the node's editable content should be rendered.

```html
<!-- editable.component.html -->
<div class="angular-component-with-content">
  <p tiptapNodeViewContent></p>
</div>
```

--------------------------------

### Using a Custom Tiptap Extension in Angular

Source: https://github.com/sibiraj-s/ngx-tiptap/blob/master/README.md

Demonstrates how to initialize a Tiptap editor in an Angular component (`AppComponent`). It shows how to include the `StarterKit` and a custom `CounterComponentExtension`, passing the Angular `Injector` to the extension. It also sets initial content and editor properties.

```ts
import { Component, Injector, OnInit, OnDestroy } from '@angular/core';
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';

import CounterComponentExtension from './CounterComponentExtension';

@Component({
  selector: 'app-root',
  template: './app.component.html',
})
export class AppComponent implements OnInit, OnDestroy {
  editor: Editor;

  constructor(private injector: Injector) {}

  ngOnInit(): void {
    this.editor = new Editor({
      content: `
        <p>This is still the text editor you’re used to, but enriched with node views.</p>
        <angular-component-counter count="0"></angular-component-counter>
      `,
      extensions: [StarterKit, CounterComponentExtension(this.injector)],
      editorProps: {
        attributes: {
          class: 'p-2 border-black focus:border-blue-700 border-2 rounded-md outline-none',
        },
      },
    });
  }

  ngOnDestroy(): void {
    this.editor.destroy();
  }
}
```

--------------------------------

### Initialize Tiptap Editor in Angular Component

Source: https://github.com/sibiraj-s/ngx-tiptap/blob/master/README.md

Demonstrates how to create and manage a Tiptap Editor instance within an Angular component, including importing necessary modules and extensions, setting initial content, and destroying the editor on component destruction.

```typescript
import { Component, OnDestroy } from '@angular/core';
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { TiptapEditorDirective } from 'ngx-tiptap';

@Component({
  selector: 'app-root',
  template: './app.component.html',
  imports: [CommonModule, FormsModule, TiptapEditorDirective],
})
export class AppComponent implements OnDestroy {
  editor = new Editor({
    extensions: [StarterKit],
  });

  value = '<p>Hello, Tiptap!</p>'; // can be HTML or JSON, see https://www.tiptap.dev/api/editor#content

  ngOnDestroy(): void {
    this.editor.destroy();
  }
}
```

--------------------------------

### Use Tiptap Editor Component in HTML Template

Source: https://github.com/sibiraj-s/ngx-tiptap/blob/master/README.md

Shows how to integrate the initialized Tiptap editor instance into an Angular component's HTML template using the `tiptap-editor` component and two-way data binding with `ngModel`.

```html
<tiptap-editor [editor]="editor" [(ngModel)]="value"></tiptap-editor>
```

--------------------------------

### Create Custom Node Extension with Angular NodeViewRenderer

Source: https://github.com/sibiraj-s/ngx-tiptap/blob/master/README.md

Shows how to define a custom Tiptap Node extension that renders an Angular component as its NodeView using `AngularNodeViewRenderer`. Requires injecting the Angular Injector.

```typescript
import { Injector } from '@angular/core';
import { Node, mergeAttributes } from '@tiptap/core';
import { AngularNodeViewRenderer } from 'ngx-tiptap';

import { NodeviewCounterComponent } from './nodeview-counter/nodeview-counter.component';

const CounterComponentExtension = (injector: Injector): Node => {
  return Node.create({
    // ...other configuration hidden for brevity
    parseHTML() {
      return [{ tag: 'angular-component-counter' }];
    },
    renderHTML({ HTMLAttributes }) {
      return ['angular-component-counter', mergeAttributes(HTMLAttributes)];
    },
    addNodeView() {
      return AngularNodeViewRenderer(NodeviewCounterComponent, { injector });
    },
  });
};

export default CounterComponentExtension;
```

--------------------------------

### Add Bubble Menu to Tiptap Editor

Source: https://github.com/sibiraj-s/ngx-tiptap/blob/master/README.md

Demonstrates how to add a bubble contextual menu to the Tiptap editor using the `tiptap-bubble-menu` directive. Content placed inside the directive will be rendered in the menu.

```html
<tiptap-editor [editor]="editor"></tiptap-editor>
<tiptap-bubble-menu [editor]="editor">
  <!-- Anything that should be rendered inside bubble menu -->
</tiptap-bubble-menu>
```

--------------------------------

### Add Floating Menu to Tiptap Editor

Source: https://github.com/sibiraj-s/ngx-tiptap/blob/master/README.md

Illustrates how to add a floating contextual menu to the Tiptap editor using the `tiptap-floating-menu` directive. Content placed inside the directive will be rendered in the menu.

```html
<tiptap-editor [editor]="editor"></tiptap-editor>
<tiptap-floating-menu [editor]="editor">
  <!-- Anything that should be rendered inside floating menu -->
</tiptap-floating-menu>
```

--------------------------------

### Creating an Angular Node View Component

Source: https://github.com/sibiraj-s/ngx-tiptap/blob/master/README.md

Defines an Angular component that extends `AngularNodeViewComponent` from `ngx-tiptap`. It includes an `increment` method to update the `count` attribute of the associated Tiptap node.

```ts
import { Component } from '@angular/core';
import { AngularNodeViewComponent } from 'ngx-tiptap';

@Component({
  selector: 'app-nodeview-counter',
})
export class NodeviewCounterComponent extends AngularNodeViewComponent {
  increment(): void {
    const updateAttributes = this.updateAttributes();

    updateAttributes({
      count: this.node.attrs.count + 1,
    });
  }
}
```

--------------------------------

### Accessing and Updating Node Attributes in Angular Node View

Source: https://github.com/sibiraj-s/ngx-tiptap/blob/master/README.md

Shows how to access node attributes (`this.node.attrs`) and update them using the `updateAttributes` method within an Angular component extending `AngularNodeViewComponent`. This is part of implementing interactive node views.

```ts
import { AngularNodeViewComponent } from 'ngx-tiptap';

export class NodeviewCounterComponent extends AngularNodeViewComponent {
  increment(): void {
    const updateAttributes = this.updateAttributes();

    updateAttributes({
      count: this.node.attrs.count + 1,
    });
  }
}
```

--------------------------------

### Updating NodeView Component Property Access in ngx-tiptap (v3.0.0)

Source: https://github.com/sibiraj-s/ngx-tiptap/blob/master/CHANGELOG.md

This breaking change in v3.0.0 modifies how properties are accessed within the AngularNodeViewComponent. Instead of accessing properties like `selected` or `updateAttributes` via a `props` object, they are now available directly on the component instance.

```TypeScript
this.props.selected;
this.props.updatedAttributes;
```

```TypeScript
this.selected;
this.updateAttributes;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.