> For the complete documentation index, see [llms.txt](https://wrapper.angular-package.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wrapper.angular-package.dev/wrapper/methods/instance/wrapon.md).

# ★ wrapOn()

## `Wrapper.prototype.wrapOn()`

The method wraps the given [`text`](#text-customtext) with the wrap, the [`opening`](/wrap/accessors/opening.md), and [`closing`](/wrap/accessors/closing.md) chars of the [`Wrapper`](/wrapper/overview.md) object.

{% code title="wrapper.class.ts" %}

```typescript
public wrapOn<CustomText extends string = ''>(
  text: CustomText
): Wrapped<Opening, CustomText, Closing> {
  return new Wrap(this.opening, this.closing, text).valueOf();
}
```

{% endcode %}

### Generic type variables

#### <mark style="color:green;">`CustomText`</mark>`extends`<mark style="color:green;">`string`</mark>`=`<mark style="color:green;">`''`</mark>

A generic type variable constrained by the [`string`](https://www.typescriptlang.org/docs/handbook/basic-types.html#string) indicates the captured type of the supplied [`text`](#text-customtext) parameter and the value of the generic type variable [`Text`](/type/wrapped.md#textextendsstring) in the  generic type [`Wrapped`](/type/wrapped.md) via [return type](#return-type), by default an empty [`string`](https://www.typescriptlang.org/docs/handbook/basic-types.html#string).

### Parameters

#### `text:`[<mark style="color:green;">`CustomText`</mark>](#customtextextendsstring)

The text of generic type variable [`CustomText`](#customtext-extends-string) to wrap by the [`opening`](https://wrapper.angular-package.dev/wrapper/methods/instance/pages/QTYxQh3MKwTJRj5pYA28#wrap.prototype.opening) and [`closing`](https://wrapper.angular-package.dev/wrapper/methods/instance/pages/QTYxQh3MKwTJRj5pYA28#wrap.prototype.closing) chars of the [`Wrapper`](/wrapper/overview.md) instance.

### Return type

#### `Wrapped<Opening, CustomText, Closing>`

The **return type** is generic type [`Wrapped`](/type/wrapped.md) that takes generic type variables [`Opening`](/wrapper/generic-type-variables.md#wrap-opening), [`CustomText`](#customtextextendsstring) and [`Closing`](/wrapper/generic-type-variables.md#wrap-closing).

### Returns

The **return value** is the given [`text`](#text-customtext) wrapped by the [`opening`](/wrap/accessors/opening.md) and [`closing`](/wrap/accessors/closing.md) chars of the [`Wrapper`](/wrapper/overview.md) object of the generic type [`Wrapped`](/type/wrapped.md).

## Example usage

```typescript
// Example usage.
import { Wrapper } from '@angular-package/wrapper';

const longText = new Wrapper('{', '}', '{This is a long text}');

// Returns {{This is a long text}}.
longText.wrapOn('{This is a long text}');

// Returns <span color="red">.
new Wrapper('<', '>').wrapOn('span color="red"');
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wrapper.angular-package.dev/wrapper/methods/instance/wrapon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.